ES6/ES7/ES8/ES9 中箭头函数与普通函数的区别及应用场景

1. 箭头函数与普通函数的区别

1.1 箭头函数的语法

ES6 中引入了箭头函数的新语法，其语法如下：

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

其中，param1, param2, …, paramN 表示函数的参数列表，statements 表示函数体。

1.2 箭头函数的特点

与普通函数相比，箭头函数具有以下特点：

1. 箭头函数没有 this 绑定，它会捕获其所在上下文的 this 值，作为自己的 this 值。
2. 箭头函数没有 arguments 对象，但可以使用 rest 参数来代替。
3. 箭头函数不能用作构造函数，因为它们没有自己的 this 值。
4. 箭头函数没有 prototype 属性。

1.3 普通函数的特点

普通函数具有以下特点：

1. 普通函数有自己的 this 值，它是在函数被调用时动态绑定的。
2. 普通函数有 arguments 对象，它可以用来获取函数的所有参数。
3. 普通函数可以用作构造函数，因为它们有自己的 this 值。
4. 普通函数有 prototype 属性，它可以用来定义函数的原型方法。

2. 箭头函数的应用场景

2.1 箭头函数作为回调函数

由于箭头函数没有自己的 this 值，它们非常适合作为回调函数。

// 普通函数作为回调函数
setTimeout(function() {
  console.log(this); // window
}, 1000);

// 箭头函数作为回调函数
setTimeout(() => {
  console.log(this); // window
}, 1000);

2.2 箭头函数作为简单函数

当函数体只有一行代码时，可以使用箭头函数来简化代码。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

2.3 箭头函数作为方法

当箭头函数作为对象的方法时，它们的 this 值会被绑定到对象本身，而不是调用对象的上下文。

const person = {
  name: 'Tom',
  sayHi: () => {
    console.log(`Hi, my name is ${this.name}.`); // Hi, my name is undefined.
  },
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`); // Hello, my name is Tom.
  }
};

person.sayHi();
person.sayHello();

2.4 箭头函数作为 Promise 的回调函数

当箭头函数作为 Promise 的回调函数时，它们可以访问外部的变量，而不需要使用 bind 方法来绑定 this 值。

const promise = new Promise((resolve, reject) => {
  const data = 'Hello World';
  resolve(data);
});

promise.then(data => {
  console.log(data); // Hello World
});

3. 总结

箭头函数与普通函数之间的区别主要在于它们的 this 值和 arguments 对象。箭头函数没有自己的 this 值，它们会捕获其所在上下文的 this 值，作为自己的 this 值。箭头函数没有 arguments 对象，但可以使用 rest 参数来代替。由于箭头函数具有简洁的语法和适合作为回调函数的特点，它们在实际开发中得到了广泛应用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c040b7add4f0e0ffa064bb