Arrow function

Arrow functions are anonymous, have a more concise syntax than function expressions, and do not have their own this, arguments, super, or new.target. Arrow function expressions are more appropriate where anonymous functions are required, and they cannot be used as constructors.

Introducing the arrow function serves two purposes: it is a shorter function and does not bind this.

features

  • Not of one’s ownthis
  • Not of one’s ownargument
  • There is noprototypeattribute
  • There is nosuperornew.target
  • yieldKeywords generally cannot be used in arrow functions (unless they are nested within permitted functions).
  • Cannot be used as a constructor. Cannot proceednewoperation

grammar

General syntax

(param1, param2,... , paramN) => { statements }

The parentheses are optional when there is only one argument, and both of the following are true.

param1 => { statements } 
(param1) => { statements }

If there are no arguments, you need to keep the parentheses.

// Functions with no arguments should be written in parentheses. () => { statements }

There are also some abbreviations

(param1, param2,... , paramN) => expression // Param1, param2... , paramN) =>{ return expression; }

It is recommended that you keep the parentheses regardless of whether there is only one argument (to add or subtract arguments later).

Advanced grammar:

// The function body in parentheses returns the object literal expression: params => ({foo: bar}) // Support the remaining parameters and default parameters (param1, param2... REST) => {statements} (param1 = DefaultValue1, param2... , paramN = DefaultValuen) => {Statements} // Let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; f(); / / 6

The arrow function this

<u>Instead of creating its own "this", which is bound when the function is defined, the arrow function will simply look up its own scope chain, finding the nearest common function's "this" object (like a lookup variable), and then inherit this</u>

The "this" of an inherited normal function changes, and the "this" of the arrow function changes accordingly. And the direction of the arrow function this object cannot be changed directly.

Function fn1(){console.log(this); // Window let obj1 = {// Level 2 object fn2: () => {// Level 3 arrow function console.log(this); // window } } obj1.fn2(); } fn1()

Fn1 is a normal function whose this points to the global object window, while fn2 is an arrow function that is nested within fn1’s obj1 object. It inherits fn1’s this, so the arrow function’s this also points to window.

Arrow functions refer to global objects when none of their scope chains can inherit this. The following

let arrow = () => { console.log(this); } arrow() // window object
let o1 = { o2: { arrow: () => { console.log(this); }} o1.o2.arrow() // Window object

The arrow function in the above code cannot find an inherited this in the ancestor scope, so it will point to window whether it is in strict mode or not. Now change O2 to a normal function (which has its own this), and the arrow function will find an inherited this and point to.

let o1 = { o2(){ console.log(this); // O2 object let arrow = () => {console.log(this); } arrow()}} o1.O2 () // O2 object

Arrow function arguments

Arrow functions do not have arguments of their own; using them directly will return an error

let fn1 = (a) => { console.log(arguments); }fn1("a")// Uncaught ReferenceError: arguments is not defined

However, like this, it can inherit arguments from normal functions

function fn1(a,b){ console.log(arguments); // Arguments(2){... } let arrow = () => { console.log(arguments); // Arguments(2){... } } arrow()}fn1("a","b")

In most cases, using the remaining arguments is a better choice than using the Arguments object.

Use the new operator

The arrow function cannot be used as a constructor; using it with new throws an error.

var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor

Using the prototype property

Arrow functions have no prototype property.

var Foo = () => {}; console.log(Foo.prototype); // undefined

Use the yield keyword

The yield keyword generally cannot be used in arrow functions (unless nested within an allowable function). Therefore, arrow functions cannot be used as function generators.

Repair defects

Due to a design flaw in JavaScript, in non-strict mode, the function this is defined inside the function refers to window; in strict mode, this is undefined.

let oTest = { fn(){ let fnTest = function(){ console.log(this); } fnTest(); }}oTest.fn(); / / the window object

The arrow function completely fixes this flaw. Simply change the above code to an arrow function.

let oTest = {    fn(){        let fnTest = function(){            console.log(this);        }        fnTest();    }}oTest.fn();