JavaScript 箭头函数

Question

在本教程中，您将借助示例学习 JavaScript 箭头函数 。

箭头功能是 JavaScript 的 ES6 版本中引入的函数之一。与常规函数相比，它可以使您以更简洁的方式创建函数。例如，这个函数

// function expression
let x = function(x, y) {
   return x * y;
}

可以写成

// using arrow functions
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 与箭头功能无关。 Arrow 函数没有自己的 this 。因此，无论何时调用 this ，它都指向其父范围。例如，

在常规函数

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        // this is accessible
        console.log(this.age);

        function innerFunc() {

            // this refers to the global object
            console.log(this.age);
            console.log(this);
        }

        innerFunc();

    }
}

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

输出

25
undefined
Window {}

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

但是， innerFunc() 是常规函数 ， this.age 无法访问 this.age 因为 this 引用了全局对象（浏览器中的 Window 对象)。因此， this.age innerFunc() 函数内部的 innerFunc() 给出了 undefined 。

内箭函数

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        console.log(this.age);
        let innerFunc = () => {
            console.log(this.age);
        }

        innerFunc();
    }
}

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

输出

25
25

在这里， innerFunc() 函数是使用 arrow 函数定义的。在 arrow 函数内部， this 是指父级的范围。因此， this.age 给出 25 。

---

参数绑定

常规函数具有参数绑定。这就是为什么在将参数传递给常规函数时可以使用 arguments 关键字访问它们的原因。例如，

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

箭头函数没有参数绑定。

当您尝试使用 arrow 函数访问参数时，它将给出错误。例如，

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]

---

带承诺和回调的箭头功能

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

// 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 refers to the global .....
        //
        console.log(this.age);
    }
}

person.sayName(); // undefined

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

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

注意 ：箭头功能在 ES6 中引入。某些浏览器可能不支持使用箭头功能。访问 JavaScript Arrow Function 支持以了解更多信息。