JavaScript Arrow 箭头函数
ES6 中引入了箭头函数。
箭头函数允许我们编写更短的函数
语法
:确实变短了!如果函数只有一个语句,并且该语句返回一个值,则可以去掉括号和 return
关键字:
注释: 这仅在函数只有一条语句时才有效。
如果您有参数,则将它们传递到括号内:
事实上,如果只有一个参数,您也可以略过括号:
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);
使用函数时请记住这些差异。有时,常规函数的行为正是您想要的,如果不是,请使用箭头函数。
浏览器支持
下表注明了首个完全支持 JavaScript 箭头函数的浏览器版本:
Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |