Functions in ES6
Le 25 mars 2013 à 08:28, Axel Rauschmayer <axel at rauschma.de> a écrit :
- Function expressions --> arrow functions
No, it depends. Roughly, I would replace function expressions by arrow functions when I want to use the 'this' binding of the enclosing scope (or don't use the 'this' binding), and the body is short.
Random counter-example from my ES6 polyfill:
if (typeof String.prototype.contains !== 'function') {
String.prototype.contains = function(x, p) {
return this.indexOf(x, p) !== -1
}
Object.defineProperty(String.prototype, 'contains', {enumerable: false})
}
I could not use an arrow expression (even if it existed in ES5) because I need a proper 'this' binding. In fact, I could hardly use anything else than a function expression.
Another case where I could need a proper 'this' binding in a function expression, is when I register an event listener.
And again, I will probably not use arrow if the body isn't short.
On Mon, Mar 25, 2013 at 3:28 AM, Axel Rauschmayer <axel at rauschma.de> wrote:
A rough guide for migrating functions from ES5 to ES6 would be:
- Function declarations --> function declarations
- Function expressions --> arrow functions
Claude nailed this one
- IIFEs --> blocks
or Modules
- Functions in object literals --> concise method syntax
- Constructors --> classes
- New: generator functions
These rules are easy to understand, with one exception: You can’t have a function declaration with lexical |this| (that is, #1 is a potential source of confusion).
Have there been ideas for this? I’m thinking arrow function declarations (but without syntactic expression-versus-declaration ambiguity).
What do you mean by arrow function declarations?
On Mar 25, 2013, at 1:57 AM, Claude Pache wrote:
Le 25 mars 2013 ? 08:28, Axel Rauschmayer <axel at rauschma.de> a ?crit :
- Function expressions --> arrow functions
No, it depends. Roughly, I would replace function expressions by arrow functions when I want to use the 'this' binding of the enclosing scope (or don't use the 'this' binding), and the body is short.
Random counter-example from my ES6 polyfill:
if (typeof String.prototype.contains !== 'function') { String.prototype.contains = function(x, p) { return this.indexOf(x, p) !== -1 } Object.defineProperty(String.prototype, 'contains', {enumerable: false}) }I could not use an arrow expression (even if it existed in ES5) because I need a proper 'this' binding. In fact, I could hardly use anything else than a function expression.
You could use a concise method:
if (typeof String.prototype.contains !== 'function') {
String.prototype.contains = {contains(x, p) {return this.indexOf(x, p) !== -1}}.contains;
}
Object.defineProperty(String.prototype, 'contains', {enumerable: false})
or
if (typeof String.prototype.contains !== 'function') {
Object.assign(String.prototype, {contains(x, p) {return this.indexOf(x, p) !== -1}}); //or Object.mixin
}
Object.defineProperty(String.prototype, 'contains', {enumerable: false})
Allen
Possibly worth mentioning: If you use super then Object.defineProperty() does not work, only Object.assign() and Object.mixin() update [[HomeObject]]. AFAIK, we don't have Object.defineMethod() yet (maybe ever).
A rough guide for migrating functions from ES5 to ES6 would be:
Function declarations --> function declarations
Function expressions --> arrow functions
IIFEs --> blocks
Functions in object literals --> concise method syntax
Constructors --> classes
New: generator functions
These rules are easy to understand, with one exception: You can’t have a function declaration with lexical |this| (that is, #1 is a potential source of confusion).
Have there been ideas for this? I’m thinking arrow function declarations (but without syntactic expression-versus-declaration ambiguity).
Axel