Introduction to the

The ES6 standard has a new Function: Arrow Function.

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

//1, no parameterlet fun = () => console.log('I'm the arrow function'); fun(); //2. () can be omitted if there is only one parameterlet fun2 = a => console.log(a); 
fun2('aaa'); // when two or more parameters are usedletfun3 = (x,y) =>console.log(x,y); // The function body containing only one expression is omittedreturnFun3 (24,44) is returned by default; //4, two parameters and multiple statement expressions of function bodyletfun4 = (x,y) => {     console.log(x,y);    returnx+y; / / must be addedreturn} // return ();} // return ();} // return ()letFun5 = () = > (} {foo: x) / / if x = > {foo: x} / / grammar errorsCopy the code

So what are the features of the arrow function?

  • More concise syntax
  • There is no this
  • The new constructor cannot be used
  • Instead of binding arguments, use rest arguments… To solve
  • Call with call() and apply()
  • Capture its context’s this value as its own this value
  • Arrow functions have no stereotype attributes
  • You cannot simply return an object literal
  • Arrow functions should not be treated as Generator functions and the yield keyword should not be used
  • Arrow functions cannot break lines

A more concise syntax than normal functions

Arrow function

var a = ()=>{
return 1;
}
Copy the code

Equivalent to a normal function

function a() {return 1;
}
Copy the code

There is no this

Before the arrow function, each newly defined function had its own this value

var myObject = {
  value:1,
  getValue:function(){
    console.log(this.value)
  },
  double:function() {return function(){    //this points to value console.log(this.value = this.value * 2) that does not exist in double; }} /* Want value multiplied by 2*/ myObject.double()(); //NaN myObject.getValue(); / / 1Copy the code

Using the arrow function

var myObject = {
  value:1,
  getValue:function(){
    console.log(this.value)
  },
  double:function() {return()=>{ console.log(this.value = this.value * 2); }} /* Want value multiplied by 2*/ myObject.double()(); //2 myObject.getValue(); / / 2Copy the code

You can’t use new

Arrow functions, as anonymous functions, are not constructors and cannot use new

/* Regular functions use arguments*/function test1(a){ console.log(arguments); //1} /* Arrow functions cannot use arguments*/ vartest2 = (a)=>{console.log(arguments)} //ReferenceError: arguments is not defined /* Arrow function uses the reset parameter... To solve the * /let test3 = (... a)=>{console.log(a[1])} //22test1 (1);testTwo (2);test3 (,22,44 33);Copy the code

Call with call() and apply()

Since this is already lexically bound, a call to a function via call() or apply() simply passes in arguments and does not affect this:

var obj = {
  value:1,
  add:function(a){
    var f = (v) => v + this.value; //a==v,3+1
    return f(a);
  },
  addThruCall:function(a){ var f = (v) => v + this.value; Var b = {value:2};returnf.call(b,a); }} console.log(obj.add(3));}} console.log(obj.add(3)); //4 console.log(obj.addThruCall(4)); / / 5Copy the code

Capture its context’s this value as its own this value

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

Arrow functions have no stereotype attributes

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

function b() {return2; } console.log(a.prototype); //undefined console.log(b.prototype); //object{... }Copy the code

You cannot simply return an object literal

If you want to return an object, you need to wrap it in parentheses, because the parentheses are used to interpret it as a code block

letFun5 = () = > (} {foo: x) / / if x = > {foo: x} / / grammar errorsCopy the code

Arrow functions should not be treated as Generator functions and the yield keyword should not be used

Arrow functions cannot break lineslet a = ()
          =>1; //SyntaxError: Unexpected token =>
Copy the code

Original link: www.cnblogs.com/jing-tian/p…