技术篇 - 为何在JS中使用箭头函数？

2023-10-07 11:09:31

使用箭头函数的三大优点

JavaScript 中的函数可以分为普通函数和箭头函数。两者在语法和功能上有明显的差异。

提升代码简洁度

箭头函数的语法更简洁，尤其是在处理简单的任务时，比如作为回调函数传递给另一个函数。

//普通函数
const greet = function(name) {
  return "Hello, " + name;
};
// 箭头函数
const greet = name => "Hello, " + name;

保持词法作用域

在普通函数中，this的行为可能会让人难以理解和跟踪。箭头函数不存在自己的this关键字。它使用外层函数的作用域中的this关键字，这意味着你可以轻松地访问外层函数的作用域中的变量和方法。

//普通函数
const person = {
  name: "John Doe",
  greet: function() {
    return "Hello, " + this.name; //this 指向person对象
  }
};
// 箭头函数
const person = {
  name: "John Doe",
  greet: () => "Hello, " + this.name //this指向undefined
};

箭头函数作为一种语法糖

当我们看到箭头函数的前面有一个实参，以为这个实参是传递给这个箭头函数的，却发现和我们以为的是不同的，此时的箭头函数是通过这个实参来定义新的变量，这个变量跟这个实参同名，注意，此时这个实参在箭头函数中被当作一个变量。同时箭头函数的词法作用域跟之前一样，是定义箭头函数的环境，被当作变量的实参的作用域还是原来的作用域。

(x => x + 1)(1) // 2
(() => {
    var x = 1;
    return x + 1;
  })(); // 2

何时使用箭头函数？

在以下情况下，你应该使用箭头函数：

当你想使用一个更简洁的语法来编写回调函数时。

//普通函数
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
// 箭头函数
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

当你想使用一个保持词法作用域的函数时。

//普通函数
const person = {
  name: "John Doe",
  greet: function() {
    return "Hello, " + this.name;
  }
};
// 箭头函数
const person = {
  name: "John Doe",
  greet: () => "Hello, " + this.name
};

当你想使用一个函数作为参数传递给另一个函数时。

//普通函数
setTimeout(function() {
  console.log("Hello, world!");
}, 1000);
// 箭头函数
setTimeout(() => console.log("Hello, world!"), 1000);

何时使用普通函数？

在以下情况下，你应该使用普通函数：

当你想使用一个具有自己this关键字的函数时。

function Person(name) {
  this.name = name;
  this.greet = function() {
    return "Hello, " + this.name;
  };
}

const person = new Person("John Doe");
person.greet(); // "Hello, John Doe"

当你想使用一个可以作为构造函数调用的函数时。

function Person(name) {
  this.name = name;
}

const person = new Person("John Doe");
console.log(person.name); // "John Doe"

当你想使用一个可以被arguments对象访问的函数时。

function sum() {
  console.log(arguments);
}

sum(1, 2, 3); // "[1, 2, 3]"

对比箭头函数和普通函数

特征	箭头函数	普通函数
语法	`() => {}` 或 `(params) => expression`	`function (params) { ... }`
this	外层函数的this	自己的this
作用域	词法作用域	动态作用域
绑定值	绑定的值是箭头函数定义时的值	绑定的值是函数调用时的值
性能	通常情况下，性能略优于普通函数	通常情况下，性能略逊于箭头函数
用法	适合作为回调函数、作为参数传递给另一个函数等	适合作为构造函数、需要访问arguments对象等