Arrow function is ES6 API, I believe many people know, because its syntax is more concise than the general function, so deeply loved by everyone. This is the API we use all the time in our daily development, and the purpose of this article is for me to distinguish the arrow function from the normal function.

1. Arrow functions have no prototype, so they don’t have this

// arrow function let a = () => {}; console.log(a.prototype); Function a() {}; console.log(a.prototype); // {constructor:f}Copy the code

Arrow functions do not create their own this

The arrow function does not have its own this. The arrow function’s this refers to the this inherited from the first normal function in the outer layer when it is defined (** note: ** is defined, not called). So, the orientation of this in the arrow function is determined when it is defined and never changes.

let obj = { a: 10, b: () => { console.log(this.a); // undefined console.log(this); // Window {ƒ : ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window,... } }, c: function() { console.log(this.a); // 10 console.log(this); // {a: ƒ, b: ƒ, c: ƒ}} obj.b(); obj.c();Copy the code

3, call | apply | bind cannot change the arrow point of this function

Call | apply | the bind method can be used to dynamically modify the function executes this point, but as a result of this arrow function definitions have been confirmed and will never change. So using these methods will never change the direction of the arrow function this.

var id = 10; let fun = () => { console.log(this.id) }; fun(); // 10 fun.call({ id: 20 }); // 10 fun.apply({ id: 20 }); // 10 fun.bind({ id: 20 })(); / / 10Copy the code

4. Arrow functions cannot be used as constructors

What does the constructor new do first? To put it simply, it is divided into four steps: ① JS internal first into an object; ② Add this to the object; ③ Execute the statement in the constructor; ④ The object instance is returned.

But!!!!! Arrow functions cannot be used as constructors, or constructors cannot be defined as arrow functions, because the arrow function does not have its own this, and its this inherits from the outer execution environment, and this never changes depending on where or by whom it is called.

let Fun = (name, age) => { this.name = name; this.age = age; }; Let p = new Fun('dingFY', 24);Copy the code

Arrow functions don’t bind arguments, use rest arguments instead… Instead of the Arguments object, access the argument list of the arrow function

Arrow functions have no arguments objects of their own. Calling Arguments in the arrow function actually gets the value in the outer local (function) execution environment.

Function A(A){console.log(arguments); } A,2,3,4,5,8 (1); ƒ : ƒ] // [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(symbol.iterator): ƒ] // },92,32,32 (2 B); // Uncaught ReferenceError: arguments are not defined // rest parameters... let C = (... c) => { console.log(c); } C (3,82,32,11323); // [3, 82, 32, 11323]Copy the code

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