Are you using the ES6 arrow function correctly

The blog instructions

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

instructions

In ES6, functions are allowed to be defined using “arrows” (=>), so there are a lot of arrow functions as we write code, because it smells good! But it also brings up some questions, the soul question, do you really understand the arrow function? Because not sure answer, so the book.

Arrow function

A simple arrow function

// es6
const hello = item= > item;

// The code above es5 is equivalent to
const hello = function (item) {
  return item;
};
Copy the code

Usage (three ifs)

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

const hello = () = > 'hello';

const sum = (num1, num2) = > num1 + num2;
Copy the code

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

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

If the arrow function returns an object directly, parentheses must be placed around the object or an error will be reported.

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

Four Points to Note

The following four points may be mentioned countless times and appear in various sections of the exam. Yes, here they are again today.

Arrow functions don’t have their ownthisobject
It cannot be used as a constructor. It cannot be usednewThe command
Do not useargumentsObject that does not exist in the function body. If so, use the REST parameter instead
Do not useyieldCommand, so the arrow function cannot be used as a Generator function

The arrow function points to this

For normal functions, the internal this refers to the object in which the function runs. The arrow function does not have its own this object; the internal this is the this in the upper scope when it is defined.

The “this” point inside the arrow function is fixed, compared to the “this” point in an ordinary function.

Convert ES6 to ES5

It turns out that this is just a so-called arrow function that’s just 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);
}
Copy the code

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

function test() {
  this.s1 = 0;
  this.s2 = 0;
  // Arrow function
  setInterval(() = > this.s1++, 1000);
  // Normal function
  setInterval(function () {
    this.s2++;
  }, 1000);
}

s1 / / 1
s2 / / 0
Copy the code

S2 can be modified after the normal function is modified

// Normal function
setInterval(function () {
	let _this = this;
  _this.s2++;
}, 1000);
Copy the code

You can also see the arrow function pointing to this, so you can see that the arrow function is a good place to do callbacks

Cannot be used as a constructor

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

You cannot use the Arguments object

Like this, arguments refers to the variable corresponding to the outer function, as do super and new.target

function hello() {
  setTimeout(() = > {
    console.log('args:'.arguments);
  }, 1000);
}

hello(1.2.3.4)
// args: [1, 2, 3, 4]
Copy the code

Because of this problem, arrow functions cannot use call(), apply(), bind(), or bind() to redirect this, so this is “static”.

Good and bad arrow functions

In fact, this object was always a headache before ES6, when it was used with care and too many callbacks, the code was burnt. It is this static “this” that improves these problems.

When using the arrow function, we should make good 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

ES6 tutorial by Yifeng Ruan

And hard-working self, personal blog, GitHub

Are you using the ES6 arrow function correctly