Arrow functions are one of the most interesting new features in ES6. As the name suggests, arrow functions are a new syntax that uses arrows (=>) to define functions, but they differ slightly from traditional JavaScript functions in the following respects:

  • No this, super, arguments, and new.target binding arrow functions. The values of this, super, arguments, and new.target are determined by the nearest non-arrow function.

There is no super for arrow functions, but just like this, arguments, and new.target, these values are determined by the nearest non-arrow function.

In arrow functions, this refers to the context in which the arrow function is defined. In both calls to sayColor(), this refers to the window object because the arrow function is defined in the window context: window.color = 'red' let o = {color: 'blue' } let sayColor = () => console.log(this.color) sayColor() o.sayColor = sayColor o.sayColor()Copy the code

We know that when we call a function in an event callback or a timed callback, the value of this points to an object other than the desired object, and we can solve the problem by writing the callback as an arrow function. This is because the this in the arrow function preserves the context in which the function was defined:

Function King(){this.royaltyName = 'Henry' //this references the instance of King setTimeout (() => console.log(this.royaltyname),1000)} Function Queen(){this.royaltyName = 'Elizabeth' //this reference to the window object setTimeout (function() {the console. The log (enclosing royaltyName); }1000) } new King() //Henry new Queen() //ElizabethCopy the code
  • Arrow functions cannot be called with the new keyword. There is no [[Construct]] method and therefore cannot be used as a constructor. If you call arrow functions with the new keyword, the program will throw an error.
JavaScript functions have two internal methods: [[Call]] and [[Construct]]. When a function is called from new, the [[Construct]] method is executed to create an instance object, and then the function body is executed to bind this to the instance. When called directly, the [[Call]] method executes the function body directly. The arrow function does not have a [[Construct]] method and cannot be used as a constructor. If called from new, an error will be reported. var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructorCopy the code
  • There is no need to build a prototype because the arrow function cannot be called with the new keyword, so there is no prototype attribute for the arrow function.

Since you can’t call the arrow function with new, there’s no need to build a prototype, so the arrow function doesn’t have the prototype property.

var Foo = () => {};
console.log(Foo.prototype); // undefined
Copy the code
  • The value of this inside a function bound to this cannot be changed and remains the same throughout the life of the function.
  • Arguments object arrow functions have no arguments binding, so you have to access function arguments using both named and undefined arguments.

The arrow function does not have its own arguments object, which is not necessarily a bad thing, since the arrow function can access the arguments object of the peripheral function:

function constant() { return () => arguments[0] } var result = constant(1); console.log(result()); / / 1Copy the code

What if we just want to access the arguments to the arrow function?

You can access parameters either as named parameters or as REST parameters:

let nums = (... nums) => nums;Copy the code
  • Arrow functions do not support duplicate named arguments in strict or non-strict mode, and traditional functions do not support duplicate named arguments only in strict mode.