js（JavaScript） 箭头函数（=>）详解
js（JavaScript） 箭头函数（=>）详解ES6 中引入了箭头函数。箭头函数允许我们编写更短的函数语法：
之前：hello = function() {
return "Hello World!";
}
用了箭头函数之后：hello = () => {
return "Hello World!";
}
确实变短了！如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：箭头函数默认返回值：hello = () => "Hello World!";
注释：这仅在函数只有一条语句时才有效。如果您有参数，则将它们传递到括号内：带参数的箭头函数：hello = (val) => "Hello " + val;
事实上，如果只有一个参数，您也可以略过括号：不带括号的箭头函数：hello = val => "Hello " + val;
this 怎么办？与常规函数相比，箭头函数对 this 的处理也有所不同。简而言之，使用箭头函数没有对 this 的绑定。在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，this 关键字始终表示定义箭头函数的对象。让我们看两个例子来理解其中的差异。这两个例子都调用了两次方法，第一次是在页面加载时，第二次是在用户单击按钮时。第一个例子使用常规函数，第二个例子使用箭头函数。结果显示第一个例子返回两个不同的对象（window 和 button），第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。
实例对于常规函数，this 表示调用该函数的对象：// 常规函数：
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数：
window.addEventListener("load", hello);
// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);
实例用了箭头函数，则 this 表示函数的拥有者：// 箭头函数：
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数：
window.addEventListener("load", hello);
// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);
使用函数时请记住这些差异。有时，常规函数的行为正是您想要的，如果不是，请使用箭头函数。
页:
[1]