JavaScript 箭头函数
JavaScript 箭头函数
ES6 中引入了箭头函数。
箭头函数允许我们编写更短的函数
语法
：
之前：
hello = function() {
return "Hello World!";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>这个例子展示了函数的语法，没有使用箭头函数的语法。</p>
<p id="demo"></p>
<script>
var hello;
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
运行结果：
Javascript 函数 这个例子展示了函数的语法，没有使用箭头函数的语法。 Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
用了箭头函数之后：
hello = () => {
return "Hello World!";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>此例展示了箭头函数的语法以及如何使用它。</p>
<p id="demo"></p>
<script>
var hello;
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
运行结果：
Javascript 箭头函数 此例展示了箭头函数的语法以及如何使用它。 Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
确实变短了！如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：
箭头函数默认返回值：
hello = () => "Hello World!";
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>此例展示了没有括号或 return 关键字的箭头函数。</p>
<p id="demo"></p>
<script>
var hello;
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
运行结果：
Javascript 箭头函数 此例展示了没有括号或 return 关键字的箭头函数。 Hello World!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：这仅在函数只有一条语句时才有效。
如果您有参数，则将它们传递到括号内：
带参数的箭头函数：
hello = (val) => "Hello " + val;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>此例展示了带参数的箭头函数。</p>
<p id="demo"></p>
<script>
var hello;
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
运行结果：
Javascript 箭头函数 此例展示了带参数的箭头函数。 Hello Universe!
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
事实上，如果只有一个参数，您也可以略过括号：
不带括号的箭头函数：
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);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>此例演示在常规函数中，“this”关键字代表不同的对象，具体取决于函数的调用方式。</p>
<p>点击按钮再次执行“hello”函数，你会看到这次“this”代表的是 button 对象。</p>
<button id="btn">点击我！</button>
<p id="demo"></p>
<script>
var hello;
hello = function() {
document.getElementById("demo").innerHTML += this;
}
//window 对象调用函数：
window.addEventListener("load", hello);
//button 对象调用函数：
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
用了箭头函数，则 this 表示函数的拥有者：
// 箭头函数：
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数：
window.addEventListener("load", hello);
// button 对象调用该函数：
document.getElementById("btn").addEventListener("click", hello);
完整实例：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>此例演示在箭头函数中，“this”关键字表示拥有该函数的对象，无论是谁调用该函数。</p>
<p>点击按钮再次执行“hello”函数，你会看到“this”仍然代表 window 对象。</p>
<button id="btn">点击我！</button>
<p id="demo"></p>
<script>
var hello;
hello = () => {
document.getElementById("demo").innerHTML += this;
}
//window 对象调用函数：
window.addEventListener("load", hello);
//button 对象调用函数：
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
使用函数时请记住这些差异。有时，常规函数的行为正是您想要的，如果不是，请使用箭头函数。
浏览器支持
下表注明了首个完全支持 JavaScript 箭头函数的浏览器版本：
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| 2015 年 9 月 | 2015 年 7 月 | 2013 年 5 月 | 2016 年 9 月 | 2015 年 9 月 |
