深入理解JavaScript 箭头函数

箭头函数简介

JavaScript 中的箭头函数是 ECMAScript 6 规范引入的一种简化函数表达式的语法形式。在 JavaScript 中，创建函数通常有两种方式：

• 函数声明语句。
• 函数表达式。

函数声明语句的创建方式如下所示：

function add(num1, num2) {
var res = num1 + num2;
return res;
}
var sum = add(7, 2);
console.log(sum);

同样功能的函数表达式可以写成如下形式：

var add = function (num1, num2) {
var res = num1 + num2;
return res;
}
var sum = add(7, 2);
console.log(sum);

ECMA 2015（即 ES6）引入了更简洁的语法来编写函数表达式，被称为箭头函数。使用箭头函数，上述函数表达式可以改写为：

var add = (num1, num2) => { return num1 + num2; };

可以看出，使用箭头函数编写的代码更加简短。

箭头函数语法

箭头函数的基本语法规则

首先，参数必须包含在小括号内。例如，创建一个包含两个参数的箭头函数如下：

ar add = (num1, num2) => { return num1 + num2; };

如果仅传递一个参数，小括号可以省略。创建一个单参数箭头函数的示例如下：

var add = num => { return num * 10; };

如果没有参数，必须保留空括号，不能省略。因此，无参箭头函数的写法为：

var add = () => { console.log("hey foo") };

如果函数体仅包含单个表达式或语句：

• 此时函数体大括号是可选的。
• 同时，return 语句也是可选的。

你可以将 add 函数重写为省略函数体大括号和 return 语句的形式，如下所示：

var add = (num1, num2) => num1 + num2;

同样，你可以编写不带参数的控制台输出函数，示例如下：

var add = () => console.log("hey");

返回对象字面量

返回对象字面量

JavaScript 箭头函数也可以返回对象字面量。唯一的约束是必须将返回的对象包裹在小括号中，如下所示：

var foo = (name, age) => ({
name: name,
age: age
})
var r = foo("my cat", 22);
console.log(r);

如上所见，返回的对象被置于小括号内。如果不这样做，JavaScript 引擎将无法区分对象字面量与函数体。

Rest 参数与默认参数

箭头函数支持 rest 参数

JavaScript 箭头函数支持 ES6 的另一个特性：rest 参数。你可以在箭头函数中使用 rest 参数，代码如下：

var add = (num1, num2, ...restparam) => {
console.log(restparam.length);
var result = num1 + num2;
return result;
}
var r = add(67, 8, 90, 23);
console.log(r);

在此示例中，当使用带有 rest 参数的箭头函数时，输出结果为 2 和 75。这是因为传递的额外参数数量为 2，而 num1 和 num2 的总和为 75。

箭头函数支持默认参数

此外，JavaScript 箭头函数还支持 ES6 的默认参数特性。你可以在箭头函数中使用默认参数，如下所示：

var add = (num1 = 9, num2 = 8) => {
var result = num1 + num2;
return result;
}
var r = add();
console.log(r);

在上述代码中，箭头函数包含默认参数。调用该函数时未传递任何值，由于默认参数的存在，输出结果为 17。

箭头函数中的 this 指向

“this”在箭头函数中如何工作？

箭头函数没有自己的 this 值。箭头函数中的 this 值总是从封闭的执行上下文中继承。在 JavaScript 中，每个函数都有它自己的 this 值，这取决于代码调用函数的方式。请仔细观察以下代码：

var Cat = {
name: 'mew',
canRun: function () {
console.log(this)
var foo = () => { console.log(this) }
foo();
}
};

这里，cat 是一个对象字面量，包含：

• 属性名称。
• 方法 canRun。

在 canRun 方法中，我们定义了一个箭头函数 foo，并指定了 this 值。由于箭头函数没有自己的 this 值，它将从周围的函数作用域获取，因此你将得到：

如你所见，this 值在 canRun 方法和箭头函数 foo 中是相同的。箭头函数从继承的作用域中获取 this 值。如果对此尚不清楚，请牢记以下两条规则：

• 使用 object.method 在方法中获取有意义的对象作为 this 值。
• 对于其他情况，使用箭头函数。由于箭头函数没有自己的 this 值，它将继承封闭作用域的 this 值。

箭头函数的限制

使用箭头函数的限制条件

应用箭头函数时需要注意以下一些限制：

• 箭头函数没有 arguments 对象。
• 箭头函数不能与 new 运算符一起使用，因此它不能用作构造函数。
• 箭头函数没有 prototype 属性。

如果你尝试将箭头函数用作构造函数，将会抛出异常。请看以下代码：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代码试图通过 new 运算符使用箭头函数 foo 创建对象 f1，JavaScript 将抛出以下异常：

此外，当你尝试输出箭头函数的 prototype 值时，会得到 undefined 的输出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

发生这种情况的原因是箭头函数没有 prototype 属性。请记住：虽然箭头函数提供了编写函数表达式的简短方法，但它没有自己的 this 值，且不能用作构造函数。

英文原文：Easy JavaScript Part 6 : Arrow functions in JavaScript

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。