The difference between arrow functions and ordinary functions

Preface

---

The arrow function is a high-frequency test point in the front-end interview session. The arrow function is an API of ES6. I believe many people know it because its syntax is better than ordinary The function is more concise, so it is loved by everyone. This is an API we have been using in daily development, but most students don’t understand it well enough. Let’s learn more about the basic syntax of arrow functions and the difference between arrow functions and ordinary functions.

1. Basic syntax

[1.1]Define functions

The definition of arrow functions is better than ordinary functions in numerical syntax Much simpler, ES6 allows the use of arrows

=>

to define arrow functions. Arrow functions omit the function keyword, and the parameters of the function are placed in the brackets in front of => , the function body follows => in curly braces.

// 箭头函数
let fun = (name) => {
    return `Hello ${name} !`;
};

// 普通函数
let fun = function (name) {
    return `Hello ${name} !`;
};

【1.2】Arrow function parameters

① If the arrow function has no parameters, just write an empty bracket.

② If the arrow function has only one parameter, you can also omit the parentheses surrounding the parameter.

③ If the arrow function has multiple parameters, separate the parameters with commas (,) and wrap them in parentheses.

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

// 只有一个参数，可以省去参数括号
let fun2 = name => {
    console.log(`Hello ${name} !`)
};

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

【1.3】The function body of the arrow function

① If the function body of the arrow function has only one line of code, which simply returns a variable or a simple JS expression, it can be omitted. Curly braces { } for the function body.

let fun = val => val;
// 等同于
let fun = function (val) { return val };

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

② If the function body of the arrow function has only one statement, it returns an object. You can write it like this:

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

③ If the function body of the arrow function has only one statement and does not need to return value (the most common is to call a function), you can add a void keyword in front of this statement

let fun = () => void doesNotReturn();

2. The difference between arrow functions and ordinary functions

---

[2.1] The syntax is more concise and clear

As can be seen from the basic syntax example of arrow function above, the definition of arrow function is more concise and clear than the definition of ordinary function Much more, very quickly.

【2.2】The arrow function does not have a prototype (prototype), so the arrow function itself does not have this

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

【2.3】Arrow function It will not create its own this

The arrow function does not have its own this. The this point of the arrow function is inherited from the first ordinary object in the outer layer when it is defined (note: when it is defined, not when it is called). function's this. Therefore, the pointing of this in the arrow function is determined when it is defined, and will never change later.

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

[2.4] call | apply | bind cannot change the pointer of this in the arrow function

The call | apply | bind method can be used to dynamically modify this when the function is executed Pointing to, but because this of the arrow function is determined when it is defined and will never change. So using these methods can never change the pointing of the arrow function this.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.4] call | apply | bind cannot change the pointer of this in the arrow function

The call | apply | bind method can be used to dynamically modify this when the function is executed Pointing to, but because this of the arrow function is determined when it is defined and will never change. So using these methods can never change the pointing of the arrow function this.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.5] Arrow functions cannot be used as constructors

Let’s first understand what new does in the constructor? To put it simply, it is divided into four steps: ① JS will first generate an object internally; ② Then point this in the function to the object; ③ Then execute the statement in the constructor; ④ Finally return the object instance.

but! ! Because the arrow function does not have its own this, its this actually inherits the this in the outer execution environment, and the point of this will never change depending on where it is called or by whom, so the arrow function cannot be used as a constructor, or It says that the constructor cannot be defined as an arrow function, otherwise an error will be reported when calling with new!

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('dingFY', 24);

[2.6] The arrow function does not bind arguments. Instead, use rest parameters... instead of the arguments object to access the parameter list of the arrow function.

The arrow function does not have its own arguments object. Accessing arguments in an arrow function actually obtains the value in the outer local (function) execution environment.

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

[2.7] Arrow functions cannot be used as generator functions, and the yield keyword cannot be used

Recommended tutorial: "JS Tutorial"

The above is the detailed content of The difference between arrow functions and ordinary functions. For more information, please follow other related articles on the PHP Chinese website!