跳到主要内容

JavaScript 箭头函数

提示
  1. 简洁的语法：箭头函数提供了一种更简洁的函数书写方式，特别是在只有一条语句或表达式时，代码更加简洁。
  2. 没有自己的 this 绑定：箭头函数不拥有自己的 this，它会捕获其所在上下文的 this 值，使得 this 在函数的嵌套中更加可预测。
  3. 没有 arguments 对象：箭头函数不绑定 arguments 对象，无法直接访问函数的实参列表，但可以通过扩展运算符 ... 解决这个问题。

箭头函数是在JavaScript的ES6版本中引入的一个特性。它允许您以比常规函数更清洁的方式创建函数。例如，

这个函数

// 函数表达式
let x = function (x, y) {
  return x * y;
};

可以写成

// 使用箭头函数
let x = (x, y) => x * y;

使用箭头函数。

箭头函数语法​

箭头函数的语法是：

let myFunction = (arg1, arg2, ...argN) => {
  statement(s);
};

其中，

  • myFunction 是函数的名称
  • arg1, arg2, ...argN 是函数的参数
  • statement(s) 是函数体

如果函数体只有单一语句或表达式，您可以将箭头函数写为：

let myFunction = (arg1, arg2, ...argN) => expression;

示例 1：没有参数的箭头函数​

如果一个函数不接受任何参数，则应该使用空括号。例如，

let greet = () => console.log("Hello");
greet(); // Hello

示例 2：只有一个参数的箭头函数​

如果一个函数只有一个参数，您可以省略括号。例如，

let greet = (x) => console.log(x);
greet("Hello"); // Hello

示例 3：作为表达式的箭头函数​

您也可以动态创建一个函数并将其用作表达式。例如，

let age = 5;

let welcome = age < 18 ? () => console.log("Baby") : () => console.log("Adult");

welcome(); // Baby

示例 4：多行箭头函数​

如果一个函数体包含多条语句，您需要将它们放在花括号{}中。例如，

let sum = (a, b) => {
  let result = a + b;
  return result;
};

let result1 = sum(5, 7);
console.log(result1); // 12

箭头函数中的this​

在常规函数内部，this关键字指向调用它的函数。

然而，箭头函数不与this关联。箭头函数没有自己的this。所以当你调用this时，它指向其父作用域。例如，

在常规函数内部

function Person() {
  (this.name = "Jack"),
    (this.age = 25),
    (this.sayName = function () {
      // this是可以访问的
      console.log(this.age);

      function innerFunc() {
        // this指向全局对象
        console.log(this.age);
        console.log(this);
      }

      innerFunc();
    });
}

let x = new Person();
x.sayName();

输出

25
undefined
Window {}

这里，this.sayName()内部的this.age是可访问的，因为this.sayName()是对象的方法。

然而，innerFunc()是一个普通函数，this.age不可访问，因为this指向全局对象（在浏览器中是Window对象）。因此，innerFunc()函数内的this.age返回undefined。

在箭头函数内部

function Person() {
  (this.name = "Jack"),
    (this.age = 25),
    (this.sayName = function () {
      console.log(this.age);
      let innerFunc = () => {
        console.log(this.age);
      };

      innerFunc();
    });
}

const x = new Person();
x.sayName();

输出

25;
25;

这里，innerFunc()函数是使用箭头函数定义的。在箭头函数内部，this指向父作用域。因此，this.age返回25。

参数绑定​

常规函数具有参数绑定。这就是为什么当你向常规函数传递参数时，你可以使用arguments关键字访问它们。例如，

let x = function () {
  console.log(arguments);
};
x(4, 6, 7); // Arguments [4, 6, 7]

箭头函数没有参数绑定。

当您尝试使用箭头函数访问参数时，它会给出一个错误。例如，

let x = () => {
  console.log(arguments);
};

x(4, 6, 7);
// ReferenceError: Can't find variable: arguments

为了解决这个问题，您可以使用展开语法。例如，

let x = (...n) => {
  console.log(n);
};

x(4, 6, 7); // [4, 6, 7]

箭头函数与Promises和回调​

箭头函数提供了更好的语法来编写promises和回调。例如，

// ES5
asyncFunction()
  .then(function () {
    return asyncFunction1();
  })
  .then(function () {
    return asyncFunction2();
  })
  .then(function () {
    finish;
  });

可以写成

// ES6
asyncFunction()
  .then(() => asyncFunction1())
  .then(() => asyncFunction2())
  .then(() => finish);

使用箭头函数应避免的事情​

1. 您不应该使用箭头函数在对象内部创建方法。

let person = {
  name: "Jack",
  age: 25,
  sayName: () => {
    // this指向全局......
    //
    console.log(this.age);
  },
};

person.sayName(); // undefined

2. 您不能将箭头函数用作构造函数。例如，

let Foo = () => {};
let foo = new Foo(); // TypeError: Foo is not a constructor

注意：箭头函数是在ES6中引入的。一些浏览器可能不支持箭头函数的使用。访问JavaScript箭头函数支持情况了解更多。

最后于 更新