JavaScript 箭头函数

文章目录

箭头函数语法
- 示例 1：无参数的箭头函数
- 示例 2：带一个参数的箭头函数
- 示例 3：作为表达式的箭头函数
- 示例 4：多行箭头函数
this 与箭头函数
- 在常规函数中
- 在箭头函数中
参数绑定
带有 Promise 和回调的箭头函数
使用箭头函数应该避免的事情
参考文档

在本教程中，您将借助示例了解 JavaScript 箭头函数。
箭头函数是 ES6 版本 JavaScript 中引入的特性之一。与常规函数相比，它允许您以更简洁的方式创建函数。例如，
这个函数：

// 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 与箭头函数

在常规函数中，this 关键字指的是调用它的函数。
但是，this 与箭头函数无关。箭头函数没有自己的 this。因此，无论何时调用 this，它都指的是其父范围。例如，

在常规函数中

function Person() {this.name = 'Jack',this.age = 25,this.sayName = function () {// this is accessibleconsole.log(this.age);function innerFunc() {// this refers to the global objectconsole.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 指的是全局对象（浏览器中的窗口对象）。因此，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]

带有 Promise 和回调的箭头函数

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

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

可以写成

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

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

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

let person = {name: 'Jack',age: 25,sayName: () => {// this refers to the global .....//console.log(this.age);}
}person.sayName(); // undefined

不能使用箭头函数作为构造函数。例如，

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

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

上一教程 ：JS ES6 下一教程 ：JS Default Parameters

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/arrow-function