ES2015 brings us a lot of features, arrow functions are getting a lot of attention, so what are arrow functions for? It’s really just a use, creating functions. Previously, JavaScript created functions in three ways:

1 / / method
let func1 = function(a,b){
	return a + b;
};
console.log(func1(1.2)); / / 3
2 / / method
function func2(a,b){
	return a - b;
}
console.log(func2(1.2)); // -1
// Method 3 (not recommended)
let func3 = new Function("num1"."num2"."return num1 + num2");
Copy the code

All three methods can be used to create functions. Method 3 is not recommended.

There is a difference between method 2 and method 1. There is variable promotion in method 2. The functions created by method 1 can only be used after they are defined (var is not recommended for creating variables).

console.log(add(a+b));  // Execute correctly
function add(a,b){
	return a + b;
};
Copy the code

The arrow function gives us a third way to create functions.

let add = (a,b) = > {
	returna + b; } (input argument)=>{function body}Copy the code

Arrow function features:

  1. anonymous
  2. Don’t have their own this, arguments, super or new.target

Usage:

Simplify the function

Do not use arrow functions

// Use findIndex to find age 13 in the people array
let people = [{name:"A".age:11}, {name:"B".age:12}, {name:"C".age:13}];
let age13Index = people.findIndex(function(item) = >{
	return item.age === 13;
})
Copy the code

Using the arrow function

let people = [{name:"A".age:11}, {name:"B".age:12}, {name:"C".age:13}];
let age13Index = people.findIndex(item= >item.age === 13})
Copy the code

Much more succinct, we use arrow functions to kill return, funcion, and input arguments ().

Binding this

Before the arrow function appeared, each new function defined the function’s this value according to how it was called:

  • If the function is a constructor, the this pointer points to a new object.
  • In strict mode function calls, this refers to undefined.
  • If the function is a method of an object, its this pointer points to that object.
  • Use call, apply, and bind to change the reference to this.

Do not use arrow functions

function Person() {
  let that = this; 
  that.age = 0;
  setInterval(function growUp() {  
  // Use that to point to this, because setInterval's callback will be executed in the window environment, this===window
    that.age++;
  }, 1000);
}
let p = new Person();
Copy the code

Using the arrow function

function Person(){
  this.age = 0;
  setInterval(() = > {
    this.age++; / / | this | to p instance correctly
  }, 1000);
}
let p = new Person();
Copy the code

What’s going on here, Babel? Turn it around.Turn ES5

Arrow functions cannot replace functions

Disadvantages:

  1. Arrow functions do not have arguments, super or new.target.
  2. Arrow functions cannot be constructors.New ()=>{} // error.
  3. !!!!!!!!! Arrow functions don’t have this.

1, 2 Obviously, this is how arrow functions are designed. But is three a disadvantage? Didn’t three help us kill that? Yes, the arrow function can kill that, but it doesn’t have this, and it can be problematic for functions that depend on this, such as functions in objects.

let people = {
	name: "A".age: 18.getName: function(){
		return this.name; If this function is a method of an object, then its this pointer points to the object
	},
	getAge: () = >{
		return this.age; // Arrow does not have this, non-strictly this will point to window, strictly undefined.
	}
}
people.getName() // A
people.getAge() / / an error
Copy the code

We can use Babel to convert the above code into ES5.

So, there’s a paragraph in the Vue documentation.

Do not use the arrow function casually. Because the arrow function can do anything normal functions can do.

Creation is not easy! If it helps you, please also like favorites. If in doubt, leave a comment below. If you have any suggestions, you can send me a private message.