Do you use the ES6 arrow function correctly

The blog instructions

The information involved in the article comes from the Internet and personal summary, meaning is personal learning and experience summary, if there is any local infringement, please contact me to delete, thank you!

instructions

ES6 allows functions to be defined using “arrows” (=>), so there are a lot of arrow functions in the rest of the code, because it’s nice! But it also brings up the question, the soul question, do you really know the arrow function? Because not sure to answer, so this book.

Arrow function

A simple arrow function

// es6 const hello = item => item; Const hello = function (item) {return item; };

Usage (three ifs)

If the arrow function requires no arguments or more than one argument, a parenthesis is used to represent the argument part.

const hello = () => 'hello';

const sum = (num1, num2) => num1 + num2;

If the code block of the arrow function has more than one statement, enclose them in curly braces and return them with a return statement.

const sum = (num1, num2) => { 
  let num = 0; 
  if(num1 && num2){
    num = num1 + num2;
  }
  return num;
}

If the arrow function returns an object directly, you must enclose the object with parentheses, otherwise an error will be reported.

const getInfo = id => ({ id: id, name: "hello" });

Four Points to Watch

The following four points may be mentioned countless times, and appear on the test of every kind, yes, again today.

The arrow function doesn’t have its ownthisobject
Cannot be used as a constructor. Cannot be usednewThe command
Not availableargumentsObject that does not exist in the function body. If so, you can use the REST parameter instead
Not availableyieldCommand, so the arrow function cannot be used as a Generator function

The arrow function this points to

For normal functions, the internal this refers to the object on which the function is running. The arrow function does not have its own this object; the inner this is the upper scope of this at the time of definition.

Inside the arrow function, the “this” point is fixed. In contrast, the “this” point in a normal function is variable.

Convert ES6 to ES5

It turns out that this is actually just a so-called arrow function that was borrowed from the outside

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

In setInterval, there is no this.s2, so its value does not change.

function test() { this.s1 = 0; this.s2 = 0; SetInterval (() => this.s1++, 1000); SetInterval (function () {this.s2++; }, 1000); } s1 // 1 s2 // 0

You can modify S2 after you modify the normal function

SetInterval (function () {let _this = this; _this.s2++; }, 1000);

You can also see the arrow function pointing to this here, and you can see that the arrow function is a good fit for callbacks

Cannot act as a constructor

It can’t be a constructor, and that makes sense. Since the arrow function does not have its own “this”, why construct it? So the arrow function cannot be used as a constructor. You can’t use the new keyword.

Arguments objects cannot be used

Like this, arguments refer to the corresponding variable of the outer function, as well as similar siblings like super and new.target

function hello() { setTimeout(() => { console.log('args:', arguments); }, 1000); } hello(1,2,3,4) // args: [1, 2,3,4]

Because of this problem, the arrow function cannot change the direction of this using methods such as call(), apply(), and bind(), so the arrow function’s this is “static”.

Good and bad arrow functions

When it comes to the arrow function “this”, it causes this to fail and that to fail. This is not the case. Before ES6, the “this” object was always a headache. It is because of the “static” this that these problems are improved.

When using the arrow function, it is necessary to make reasonable use of the advantages and disadvantages of the arrow function, and choose the appropriate scene. Do not use arrow functions when defining object methods and dynamically binding this.

Thank you

Universal network

Ruan Yifeng’s ES6 tutorial

And my hardworking self, personal blog, GitHub

Do you use the ES6 arrow function correctly