Fat arrow functions in Javascript

47 点作者 vbv超过 11 年前

13 条评论

graue超过 11 年前

Did anyone else do a double take reading this?> If you’re a JavaScript programmer, chances are you’ve seen (and done) something like this before:<pre><code> var listener = node.addEventListener("click", function(event) { let _target = event.target; this.handleClick(_target); }.bind(this)); </code></pre> I had to go look up `let` in JavaScript[1]. It appears to still be a bleeding-edge feature not widely supported[2] outside of Firefox... not even in Node with the --harmony flag. I wonder if this is meant to be subtle pro-ES6 propaganda, or the author really takes `let` for granted and doesn't realize most JS programmers have never seen it :)1. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...</a>2. <a href="http://kangax.github.io/es5-compat-table/es6/#let" rel="nofollow">http://kangax.github.io/es5-compat-table/es6/#let</a>

评论 #6419935 未加载

评论 #6420274 未加载

ender7超过 11 年前

First and probably most useful is that they gain the lexical scope of the environment they’re defined in.Nit: technically, all Javascript functions are lexically scoped. The fat arrow permanently binds the value of "this", which is sort of like modifying the scope, but again not technically because "this" is a special keyword and not a variable.

评论 #6419255 未加载

评论 #6420333 未加载

评论 #6418722 未加载

tieTYT超过 11 年前

This article is written for someone who already understands the old issue that this is fixing (there's nothing wrong with writing it like that). But for someone like me that doesn't understand when you need to use this `bind()` stuff and the context your function is in (if I'm even saying that correctly), what can I read to get a better understanding of what's going on here?In other words, what do I need to read before I can understand this article?

评论 #6419772 未加载

评论 #6419362 未加载

评论 #6419368 未加载

EGreg超过 11 年前

I am not pleased at seeing language bloat. Look at what happened with C++11. Languages are supposed to give a common base for developers to read and write the same code. New developers should be able to get up to speed quickly, and see the intent of the other developers, which is one of the reasons Linux is written in C instead of C++."Look at all that saved typing!"Yeah, shockingly there were only a few characters saved. And yet the mental overhead of a whole new syntax is introduced, which developers can now encounter in the wild."The real benefit of course is that you don’t have to go through the mental hoop-jumping of trying to figure out what scope your function is going to run in (and more often-than-not, you just wanted it to run inside the current scope the function is being defined in anyway)."The amount of mental hoop-jumping recalling more language features and what they do outweighs this. I can understand if something is really used all the time. But when something is already a pattern that's pretty straightforward to type, do we really need another lexical element, which differs in obscure semantic details like "you can't override the this variable" and other things?I would argue that languages which are "easy to learn, tough to master", like Chess, are best for programming large projects.

评论 #6419894 未加载

评论 #6419402 未加载

评论 #6419629 未加载

评论 #6419326 未加载

kurrent超过 11 年前

This will be a much needed and welcome addition to ECMA 6.If you're interested in a bit more of a comprehensive overview, Nicholas Zakas previously wrote an excellent article on arrow functions :<a href="http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/" rel="nofollow">http://www.nczonline.net/blog/2013/09/10/understanding-ecmas...</a>

crazygringo超过 11 年前

So let me get this straight... a whole new function syntax is being introduced, just to replace:<pre><code> var that = this; var f = function() { return that.x; } </code></pre> with:<pre><code> var f = () => { return this.x; } </code></pre> I mean, that's it? That's the whole benefit? Am I missing something else here? Please tell me I am.JavaScript is already tricky enough to keep track of everything having to do with "this", now they're adding extra complexity to that too by having multiple types of functions that treat "this" even more differently? (Since it's not like they're removing the original behavior...)

jwoah12超过 11 年前

Is this syntax part of ECMAScript 6? I.E. will it eventually be supported by all browsers?

评论 #6420520 未加载

评论 #6418587 未加载

gwwar超过 11 年前

While this is pretty cool, I'm not really a fan of this. There is less to type, but I end up spending more time reading what the code is doing since there's more than one way to do it. (With optional parens, optional braces, and special syntax for returning objects in a single line).I would have preferred a different function keyword that had lexical this binding.

评论 #6419052 未加载

asaarinen超过 11 年前

Frankly the fat arrow syntax adds so little value that it's not worth adding new syntax to JavaScript, just my humble opinion.The fat arrow seems to be primarily about easier scoping when using this - so it's trying to patch the single most broken feature a language ever had.The existing function syntax is fine, rather just avoid using "this" at all in your code.

doublerebel超过 11 年前

This pattern is incredibly useful, once I had it available I started seeing it constantly. Particularly for binding functions to events while retaining context -- very common in JavaScript.Knowing the value of `this` at the beginning of a function makes for much more readable code. Fat arrow and all the other ES6 features available in CoffeeScript and Traceur are now too valuable to live without imho.

jmcdonald-ut超过 11 年前

Is there a reason why the author is referring to them as fat arrow functions instead of lambdas? I am not trying to be snarky, this is genuine curiosity if there is something differentiating.

评论 #6420630 未加载

Touche超过 11 年前

Wouldn't it be:<pre><code> let x = (...args) => { /* some function gunk */ }; </code></pre> So I wonder if this is allowed:<pre><code> let x = ...args => args.join(',')</code></pre>

评论 #6419741 未加载

smrtinsert超过 11 年前

Having seen all the coffeescript pushback here already I'm not surprised at the pushback here now. The truth is, it takes maybe a day to get really comfortable with using the fat arrow, and after that you wonder why it was any other way before.Sometimes I wonder if a lot of the anti-coffeescript people in this forum are simply Javascript native programmers and don't want any change period. I can't think of many programming languages that stop changing - seems to be the norm.