在 ES6 中，箭头函数已经成为一种非常常见的语法，其简洁的语法和方便的 this 绑定也为前端开发带来了极大的便利。而在 ES7 中，箭头函数的特性还进一步拓展，为我们提供了更加强大和灵活的使用和编写方式。本文将为您介绍 ES7 中使用箭头函数的注意事项，使你能够更好地掌握和运用这项技术。
注意事项一：箭头函数在绑定 this 时的特性
在 ES7 中，箭头函数绑定 this 的方式与 ES6 中的相同。箭头函数在定义时就已经绑定了 this，因此它不会根据执行上下文来动态绑定 this，而是永远绑定在箭头函数定义时的上下文。这意味着如果你在箭头函数中使用 this，那么 this 指向的就是箭头函数定义时的上下文。
例如：
-- -------------------- ---- -------
--- --- - -
----- --------
---------- -----
------ ---------- -
--- --- - --- -------------------- - ---------------
------------- -- -
------------------- -- ---- -- ------------ --- - -- ------ ----- -------
-- ------
-
--
------------上面的例子中，箭头函数中的 this 指向了 obj，而不是 setTimeout 函数的上下文。因此，箭头函数在这里可以正确输出 obj 中的属性信息。
注意事项二：箭头函数不能用作构造函数
在 ES7 中，箭头函数还是不能用作构造函数。这意味着你不能使用 new 关键字来实例化一个箭头函数。如果你尝试用 new 来实例化一个箭头函数，JavaScript 引擎将会抛出一个错误。
例如：
let Person = (name, age) => {
this.name = name;
this.age = age;
};
let alice = new Person("Alice", 30);上面的例子中，我们尝试用箭头函数来定义一个 Person 类，然后使用 new 关键字来实例化它。然而，由于箭头函数不能用作构造函数，JavaScript 引擎将会抛出一个错误。
注意事项三：箭头函数不能使用 arguments 对象
在 ES7 中，箭头函数还是不能使用 arguments 对象。这是因为箭头函数中的 arguments 对象并没有在箭头函数内部定义。箭头函数中的 this 取决于箭头函数的外部上下文。
例如：
let sum = () => {
let argArray = Array.from(arguments);
return argArray.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4, 5));上面的例子中，我们尝试在箭头函数 sum 中使用 arguments 对象。但是由于箭头函数中的 arguments 对象并没有在箭头函数内部定义，因此 JavaScript 引擎将会抛出一个错误。
注意事项四：箭头函数不会创建自己的作用域
在 ES7 中，箭头函数不会创建自己的作用域。这意味着箭头函数中的变量和函数名将会在其外部定义的作用域内可见和可用。
例如：
let x = 10;
let arrowFunc = () => {
console.log(x);
};
arrowFunc();上面的例子中，我们定义了一个 x 变量，并在箭头函数中输出了它的值。由于箭头函数不会创建自己的作用域，因此 x 变量在箭头函数内部是可见和可用的。
总结
ES7 中的箭头函数继承了 ES6 中的特性，并引入了对 this 自动绑定的支持。然而，箭头函数在继承绑定 this 特性的同时也继承了一些限制，例如不能用作构造函数、不能使用 arguments 对象等。了解这些注意事项，将有助于您更加灵活地使用和编写箭头函数，并使您的前端开发更加高效和便捷。
示例代码
下面是一个使用箭头函数和 setTimeout 函数来输出一段提示信息的例子：
let delayLog = message => {
setTimeout(() => {
console.log(message);
}, 1000);
};
delayLog("Hello, world!");来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf6204b5eee0b5256b5dc4