上查看所有课程
JavaScript 箭头函数是一种简洁的函数表达式写法。
下面是一个箭头函数的快速示例。您可以阅读本教程的其余部分以获取更多信息。
示例
// an arrow function to add two numbers
const addNumbers = (a, b) => a + b;
// call the function with two numbers
const result = addNumbers(5, 3);
console.log(result);
// Output: 8在此示例中，addNumbers() 是一个箭头函数，它接受两个参数 a 和 b，并返回它们的和。
箭头函数语法
箭头函数的语法是
let myFunction = (arg1, arg2, ...argN) => {
statement(s)
}这里，
myFunction是函数名。arg1, arg2, ...argN是函数参数。statement(s)是函数体。
如果函数体只有一个语句或表达式，您可以这样写箭头函数：
let myFunction = (arg1, arg2, ...argN) => expression注意： 箭头函数是在 ES6 中引入的。某些浏览器可能不支持箭头函数。请访问 JavaScript 箭头函数支持 了解更多信息。
为了了解常规函数表达式和箭头函数之间的区别，让我们考虑一个将两个数字相乘的函数。
使用常规函数
// regular function
let multiply = function(x, y) {
return x * y;
};使用箭头函数
// arrow function
let multiply = (x, y) => x * y;在这里，常规函数表达式和箭头函数都执行两个数字的乘法。
正如您所见，箭头函数的语法更清晰、更简洁。
示例 1：无参数的箭头函数
如果一个函数不接受任何参数，那么应该使用空括号。例如：
const sayHello = () => "Hello, World!";
// call the arrow function and print its return value
console.log(sayHello());
// Output: Hello, World!在此示例中，调用 sayHello() 时，它会执行箭头函数，该函数返回字符串 Hello, World!。
示例 2：带一个参数的箭头函数
如果一个函数只有一个参数，可以省略括号。例如：
const square = x => x * x;
// use the arrow function to square a number
console.log(square(5));
// Output: 25箭头函数 square() 接受一个参数 x 并返回它的平方。
因此，调用 square() 并传入值 5 会返回 25。
带箭头函数的 this 关键字
在常规函数中，this 关键字 指的是调用它的函数。
然而，this 与箭头函数无关。因此，每当调用 this 时，它都指向其父作用域。例如：
// constructor function
function Person() {
this.name = 'Jack',
this.age = 25,
this.sayAge = function () {
console.log(this.age);
let innerFunc = () => {
console.log(this.age);
}
innerFunc();
}
}
const x = new Person();
x.sayAge();输出
25 25
在这里，innerFunc() 函数是一个箭头函数。
在箭头函数内部，this 指向父作用域，即 Person() 函数的作用域。因此，this.age 的值为 25。
如上所述，this 关键字 指的是调用它的函数。例如：
// constructor function
function Person() {
this.name = "Jack",
this.age = 25,
this.sayAge = 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.sayAge();输出
25
undefined
<ref *1> Object [global] {...}
在这里，this.sayAge() 中的 this.age 是可访问的，因为 this.sayAge() 是一个对象的方法。
但是，innerFunc() 是一个普通函数，并且 this.age 是不可访问的，因为 this 指向全局对象。
因此，innerFunc() 函数中的 this.age 是 undefined。
更多关于箭头函数
您也可以动态创建箭头函数并将其用作表达式。例如：
let age = 5;
// use arrow functions as expressions in ternary operator
// to dynamically assign functionality
let welcome = (age < 18) ?
() => console.log("Child") :
() => console.log("Adult");
welcome();
// Output: Child在此示例中，根据 age 是否小于 18 来创建箭头函数。
如果 age 小于 18，函数将打印 Child。否则，它将打印 Adult。
因此，调用函数时，由于 age 为 5，我们得到输出 Child。
如果函数体有多个语句，您需要将它们放在花括号 {} 中。例如：
let sum = (a, b) => {
let result = a + b;
return result;
};
let result1 = sum(5,7);
console.log(result1);
// Output: 121. 在对象中创建方法时，不应使用箭头函数。
let person = {
name: "Jack",
age: 25,
sayAge: () => {
console.log(this.age);
}
}
person.sayAge(); // undefined2. 不能使用箭头函数作为构造函数。
let Foo = () => {};
let foo = new Foo();
// Output: TypeError: Foo is not a constructor另请阅读