“This is the 24th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

First, different shapes

Arrow functions use arrow definitions, not normal functions.

Function func(){// code} function func=()=>{// code}Copy the code

Arrow functions are anonymous functions

Normal functions can have anonymous functions or named functions, but arrow functions are anonymous.

Function func(){// code} function func=function(){// code} function func=function(){// code}Copy the code

Arrow functions cannot be used in constructors. New cannot be used

Normal functions can be used for constructors to create object instances.

function Person(name,age){ this.name=name; this.age=age; } let admin=new Person("小 white ",18); console.log(admin.name); / / small white the console. The log (admin. Age); / / 18Copy the code

Person is used as a constructor to create instantiated objects. But constructors cannot be used as constructors.

4. The arrow function “this” points differently

This in the arrow function points to the environment in which the definition was made, and this in the normal function points to the environment in which the runtime was created

In normal functions, this always refers to the object on which it is called, or, if used as a constructor, to the object instance being created.

The arrow function itself does not create this

The arrow function doesn’t have this itself, but it can capture the this of its context for its own use when it declares.

Note: Once this is captured, it no longer changes

The arrow function is declared in global scope, so it captures this in global scope, which points to the window object.

Var name = "case 1"; Function wrap(){this.name=" "; let func=() => { console.log(this.name); } func(); } let en=new wrap(); // Result: Case 2Copy the code

Code analysis: (1) wrap() is used as a constructor. (2) After the wrap() function is called with new, this in the function scope points to the created instantiated object. (3) The arrow function is now declared, capturing this. (4) So it prints Enno 2, not enno 1.

Used in combination with the call() and apply() methods

When the arrow function is called with the call() and apply() methods, passing only one argument does not affect this.

let obj2 = { a: 10, b: function(n) { let f = (n) => n + this.a; return f(n); }, c: function(n) { let f = (n) => n + this.a; let m = { a: 20 }; return f.call(m,n); }}; console.log(obj2.b(1)); // Result: 11 console.log(obj2.c(1)); // Result: 11Copy the code

Arrow functions do not bind arguments and use rest arguments instead… To solve

Each ordinary function call has a Arguments object to store the arguments that are actually passed. But the arrow function does not have this object.

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

The other difference

  1. Arrow functions cannot be Generator functions and the yeild keyword cannot be used.
  2. Arrow functions do not have a Prototype object.
  3. Arrow functions do not have super.
  4. Arrow functions do not have new.target.

conclusion

  1. The arrow function’s this always refers to its context’s this, and no method can change the reference, such as call(), bind(), apply().
  2. The this of an ordinary function refers to the object on which it was called