什么是ES6箭头功能，它们如何工作？ [英] What are ES6 arrow functions, how do they work?
问题描述
ES6箭头功能深入
ES6最漂亮的功能之一就是轻松赢得比赛，如果这样的比赛将会举行。许多人不知道的是，箭头功能不仅仅是一种形式的语法糖，我们可以使用而不是常规回调。
我喜欢向参加我的培训/研讨会的人员解释，箭头功能是这个无论如何，参数 -less， new.target -less和 super
让我们现在可以通过较短的语法，深入了解箭头功能的具体细节。
词汇绑定这个
以前，如果将这些值设置为全局对象（如果它们被用作回调），那么常规函数将被赋值给新对象，以防它们被调用使用新的运算符，或者在jQuery的库的情况下，它们将被设置为在事件处理程序的情况下触发事件的对象，或者在 $。each iteration.This情况证明，即使对于有经验的开发人员来说也是很混乱的。
假设你有一段代码如下所示。
var obj = {
nameValue ：'default'，
initializeHandlers：function（）{
var nameInput = document.querySelector（'＃name'）;
nameInput.addEventListener（'blur'，function（event）{
this.nameValue = event.target.value;
}）;
}
};
obj.initializeHandlers（）;
问题是这个 code> blur 事件处理程序设置为全局对象而不是obj。在严格的模式— 'use strict'; —您有可能冒犯您的申请，因为这个设置为 undefined 。为了分步这个问题，我们有两个选择：
- 将事件处理程序转换为绑定到外层作用域的函数， a href =https://developer.mozilla.org/en-US/docs/Web =nofollow>
Function.prototype.bind - 在
initializeHandlers函数中使用脏的var self = this;（我认为这是一个黑客）
这两个选项如下所示。
[...]
initializeHandlers：function（）{
var nameInput = document.querySelector（'＃name'）;
//更优雅，但我们可以做得更好
var blurHandler = function（event）{
this.nameValue = event.target.value;
} .bind（this）
nameInput.addEventListener（'blur'，blurHandler）;
}
[...]
[...]
initializeHandlers：function（）{
var nameInput = document.querySelector（'＃名称'）;
// ugly and error-prone
var self = this;
nameInput.addEventListener（'blur'，function（event）{
self.nameValue = event.target.value;
}）;
}
[...]
另一方面，箭头功能没有内部上下文。他们从外部范围继承他们的上下文。让我们来看看如何使用箭头来解决这个问题。
const obj = {
nameValue：'default'
initializeHandlers：function（）{
const nameInput = document.querySelector（'＃name'）;
nameInput.addEventListener（'blur'，（event）=> {
//这引用obj而不是全局对象
this.nameValue = event.target.value ;
}）;
}
};
在我们的新实现中这个引用 obj 对象，并且由于嵌套而不会丢失。
词法参数
有没有试过访问一个箭头函数中的参数对象？我有，我浪费了3个固定的时间，试图弄清楚为什么我得到外部函数的参数，而不是箭头函数的参数。
幸运的是，MDN存在，按照良好的做法，您最终检查文档，当您坐在角落时，膝盖卷入胸部，摇摆并重复自己：我应该是木匠！
有趣的是，箭头函数不会公开一个参数对象。如果您尝试访问它，您将获得周围功能的参数。在我们的例子中，由于外部函数也是一个箭头函数，我们在链中没有更多的功能，我们将得到一个 ReferenceError 。 p>
const variadicAdder =（x）=> {
return（）=> {
let args = Array.prototype.slice.call（arguments，0）;
return args.reduce（（cumulative，current）=> {
return cumulative + current;
}，x）;
}
}
const variadicAdderOf5 = variadicAdder（5）;
console.log（variadicAdderOf5（10，11，12））;
// ReferenceError：参数未定义
这里没有修复，因为有没什么破我们可以做的是从我们的 variadicAdder（）返回一个简单的函数，而不是一个箭头。
这将使我们有机会访问参数对象而没有问题。更新的代码将如下所示，唯一的区别是
，它实际上可以工作，而不会抛出错误。
const variadicAdder =（x）=> {
return function（）{
let args = Array.prototype.slice.call（arguments，0）;
return args.reduce（（cumulative，current）=> {
return cumulative + current;
}，x）;
}
}
const variadicAdderOf5 = variadicAdder（5）;
console.log（variadicAdderOf5（10，11，12））;
// 38
了解更多关于 Array.prototype导致