ES6-- difference function and normal function of the arrow

ES6 standard added a new function: Arrow Function (arrow function).

Why is it called Arrow Function? Because it is defined by an arrow:

Syntax :

// 1, when the parameter does not 
let fun = () => console.log ( ' I is a function of an arrow' ); 
Fun (); 
// 2, when there is only one parameter () can be omitted 
let fun2 = a => the console.log (a); 
fun2 ( 'AAA' ); 

// . 3, and over both a two formal parameters when 
let fun3 = (x, y)   => console.log (x, y); // function comprises only a default return expression omit return 
FUN3 (24,44 ); 

// . 4, both a function and a parameter expression statements multipotent 
the let FUN4 = (X, Y) => { 
　　Console. log (X, Y); 
　　return X + Y; // must be added to only return a return value 
} 
// 5, if the object needs to be returned with a wrap parentheses, braces occupied interpreted as code blocks, and correct writing
 the let fun5 = () => ({foo: X})    // if x => {foo: x} // syntax error is

 

So what are the characteristics of the arrow function?

• More concise syntax
• Not this
• You can not use the new constructor
• Not bound arguments, with the rest to solve the parameters ...
• Use call () and apply () call
• Capture value in this context, as its value this
• Arrow attribute functions without prototypes
• We can not simply return the object literal
• Generator can not function as a function of the arrow, you can not use the yield keyword
• Function can not wrap the arrow

 

Compared to ordinary function more concise syntax

Arrow function

where a = () => {
 return 1 ; 
}

Equivalent to an ordinary function

function a(){
  return 1;
}

 

Not 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(){　　//this指向double函数内不存在的value
      console.log(this.value = this.value * 2); 
    }
  }
}
/*希望value乘以2*/
myObject.double()();  //NaN
myObject.getValue();  //1

Use the arrow function

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

You can not use new

Arrow function as an anonymous function, not as a constructor, you can not use new

var B = ()=>{
  value:1;
}

var b = new B(); //TypeError: B is not a constructor

Not bound arguments, with the rest to solve the parameters ...

/ * General function uses arguments * / 
function test1 (A) { 
  the console.log (arguments);    // . 1 
}
 / * arrows function can not use arguments * / 
var test2 = (A) => {the console.log (arguments)}   // a ReferenceError: Not defined arguments IS 
/ * arrows reset function used to solve the parameters ... * / 
the let Test3 = (... A) => {the console.log (A [. 1])} // 22 is 

test1 ( . 1 ) ; 
test2 ( 2 ); 
Test3 ( 33,22,44);

Use call () and apply () call

Since this has been completed binding lexical level, by the time a function call () or apply () method call, just passed in the parameter only, and has no effect on this:

var obj = { 
  value: . 1 , 
  the Add: function (A) {
     var F = (V) => V + the this .Value; // A == V,. 1. 3 + 
    return F (A); 
  }, 
  addThruCall: function (A) {
     var F = (V) => V + this .Value; // this point this obj.value 
    var B = {value: 2 };
     return f.call (B, A); // F functions are not point b, it just passed the parameters a 
    
  } 
} 
 
the console.log (obj.add ( . 3));     // . 4 
the console.log (obj.addThruCall (. 4));    //5

 

Capture value in this context, as its value this

var obj = {
  a: 10,
  b: function(){
    console.log(this.a); //10
  },
  c: function() {
     return ()=>{
           console.log(this.a); //10
     }
  }
}
obj.b(); 
obj.c()();

Arrow attribute functions without prototypes

var a = ()=>{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}

We can not simply return the object literal

Parentheses packet need to be returned if the object up, because braces interpreted code blocks are occupied, the correct wording

= fun5 the let () => ({foo: X})    // if x => {foo: x} // syntax error is

Generator can not function as a function of the arrow, you can not use the yield keyword

Function can not wrap the arrow

let a = ()
          =>1; //SyntaxError: Unexpected token =>