JS function of the arrow

Today, knowledge sharing function of the arrow at the JS with you.

1 arrow function

1. Do not bind this
before the arrow function appears, each new function has its own definition of this value

var myObject = {
value:1,
getValue:function(){
console.log(this.value)
},
double:function(){
return function(){
console.log(this.value = this.value * 2);
}
}
}
myObject.double()();  //希望value乘以2
myObject.getValue();  //1

In this ECMAscript5 will be assigned to a variable to solve:

var myObject = {
value:1,
getValue:function(){
console.log(this.value)
},
double:function(){
var that = this;
return function(){
console.log(that.value = that.value * 2);
}
}
}

myObject.double()();  //2
myObject.getValue();  //2

In addition, use may also bind function, the desired value is transmitted to this Double () function.

var myObject = {
value:1,
getValue:function(){
console.log(this.value)
},
double:function(){
return function(){
console.log(this.value = this.value * 2);
}.bind(this)
}
}
myObject.double()();  //2

myObject.getValue();  //2

Arrow function captures it in the context of this value, this value as its own, so the following code will run as expected.

var myObject = {
value:1,
getValue:function(){
console.log(this.value)
},
double:function(){
//回调里面的 `this` 变量就指向了期望的那个对象了

return ()=>{
console.log(this.value = this.value * 2);
}
}
}
myObject.double()();
myObject.getValue();

2. Using the call () and apply () call
Since this has been completed at the lexical level of binding, by the time a function call, only the parameters passed by call () or apply () only, and has no effect on this:

var myObject = {
value:1,
add:function(a){
var f = (v) => v + this.value;
return f(a);
},
addThruCall:function(a){
var f = (v) => v + this.value;
var b = {value:2};
return f.call(b,a);
}
}
console.log(myObject.add(1));    //2
console.log(myObject.addThruCall(1));    //2

3. Arrow function does not bind arguments, replacing it with rest parameters ... to solve

var foo = (...args) => {
return args[0]
}
console.log(foo(1))    //1

4. Using the new operator
arrow constructor function can not be used, together with new, and will throw an error.

var Foo = () => {};
var foo = new Foo();  //Foo is not a constructor

The prototype property
arrow functions without prototypes properties.

var foo = () => {};
console.log(foo.prototype) //undefined

6. literal can not simply return the object

var func = () => {  foo: 1  };
// Calling func() returns undefined!

var func = () => {  foo: function() {}  };
// SyntaxError: function statement requires a name

//如果要返回对象字面量,用括号包裹字面量
var func = () => ({ foo: 1 });

7. Arrow function when this method of binding is not defined

var obj = {
value:1,
add:() => console.log(this.value),
double:function(){
console.log(this.value * 2)
}
}
obj.add();  //undefined
obj.double(); //2

8. The function can not wrap the arrow

var func = ()
=> 1; // SyntaxError: expected expression, got '=>'

About JS function of the arrow, you learn how much? Comments are welcome in the comments area!