文章目录
在本教程中,您将借助示例了解 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 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.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