In ES6, using arrows (=>) to define functions is very convenient, but it does not completely replace traditional functions because it has many differences from traditional functions. Specific focus on the following aspects:

This, super, arguments, and new.target binding arrow function values such as this, super, arguments, and new.target are determined by the nearest non-arrow function. There is no [[Construct]] method and therefore cannot be used as a constructor. If you call the arrow function using the new keyword, the program will throw an error. There is no prototype attribute for the arrow function because you can’t call it with the new keyword. The value of this inside a function bound to this cannot be changed, and remains the same for the lifetime of the function. Arguments objects are not supported 6. Duplicate named arguments are not supported

Incorrect usage scenarios:

The arrow function is like a double-edged sword. It is designed to be “disposable”. As such, it lacks the [[Construct]] method and the prototype property of traditional functions because the arrow function defines a constructor.

Review the implementation of the following new keyword

1\. Creates an empty object

Create this inside the empty object and point the __proto__ attribute to the constructor's

prototype.  newObj.__proto__ = fn.prototype

3\. Return object

You can see that at step 2, the arrow function is no longer satisfied, and the program will naturally throw an error

Scenario 2: This association error

The this in the arrow function is determined by the nearest layer of non-arrow functions

const Fn1 = function(){ this.root = 1}

Fn1.prototype.insert1 = () => {
   console.log(this.root) // undefined
}
Fn1.prototype.insert2 = () => {
   console.log(this.root) //1
}
Copy the code