ES6 箭头函数是一种更加简洁的函数表达式语法，可以让我们更方便地书写函数。然而，它也有一些特殊的行为，特别是在处理 this 和 arguments 时。在本文中，我们将深入探讨箭头函数的这些特性，并提供一些指导意义和示例代码。
箭头函数的基本语法
ES6 箭头函数的基本语法如下：
(param1, param2, …, paramN) => { statements }其中，(param1, param2, …, paramN) 是函数的参数列表，{ statements } 是函数体。例如，以下是一个简单的箭头函数：
const sum = (a, b) => {
return a + b;
};这个箭头函数接受两个参数 a 和 b，并返回它们的和。
箭头函数的 this
在普通函数中，this 的值是根据函数的调用方式动态确定的。例如，在以下代码中，this 的值将是 window 对象：
function foo() {
console.log(this);
}
foo(); // 输出 window而在以下代码中，this 的值将是 obj 对象：
const obj = {
foo() {
console.log(this);
}
};
obj.foo(); // 输出 obj然而，在箭头函数中，this 的值是根据函数的定义方式静态确定的。具体来说，箭头函数的 this 值是在定义函数时确定的，而不是在调用函数时确定的。例如，以下代码中的箭头函数始终将 this 值设置为 obj 对象：
const obj = {
foo: () => {
console.log(this);
}
};
obj.foo(); // 输出 window这是因为箭头函数的 this 值是在定义时从外层作用域继承而来的，而不是在调用时动态确定的。在这个例子中，箭头函数定义时的外层作用域是全局作用域，因此 this 值被设置为 window 对象。
需要注意的是，如果箭头函数被作为方法调用（即作为对象的属性），它的 this 值将被设置为该对象。例如：
// javascriptcn.com 代码示例
const obj = {
foo: () => {
console.log(this);
}
};
const anotherObj = {
foo: obj.foo
};
anotherObj.foo(); // 输出 anotherObj在这个例子中，箭头函数 obj.foo 被赋值给了另一个对象的属性 anotherObj.foo，当 anotherObj.foo() 被调用时，它的 this 值被设置为 anotherObj 对象。
箭头函数的 arguments
在普通函数中，arguments 对象包含了函数被调用时传递的所有参数。例如，在以下代码中，arguments 对象包含了三个参数 1、2 和 3：
function foo() {
console.log(arguments);
}
foo(1, 2, 3); // 输出 [1, 2, 3]然而，在箭头函数中，arguments 对象并不存在。如果你尝试在箭头函数中使用 arguments，你将得到一个 ReferenceError 错误。例如：
const foo = () => {
console.log(arguments); // 抛出 ReferenceError 错误
};这是因为箭头函数没有自己的 arguments 对象。如果你需要访问函数的参数列表，你可以使用剩余参数语法 ...args。例如：
const foo = (...args) => {
console.log(args);
};
foo(1, 2, 3); // 输出 [1, 2, 3]在这个例子中，箭头函数使用了剩余参数语法 ...args，它将所有参数打包成一个数组 args。你可以像操作普通数组一样操作这个数组。
总结
在本文中，我们深入探讨了 ES6 箭头函数的 this 和 arguments。我们了解到，箭头函数的 this 值是在定义时从外层作用域继承而来的，而不是在调用时动态确定的。我们还了解到，箭头函数没有自己的 arguments 对象，但可以使用剩余参数语法 ...args 访问函数的参数列表。最后，我们提供了一些指导意义和示例代码，帮助你更好地理解和使用箭头函数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65629164d2f5e1655dc6a39b