这里先明确一点:箭头函数的 this 指向比较特殊,它总是指向其最近的外层函数作用域的 this 所指对象
箭头函数
箭头函数为以下形式的函数
const func = (paramList) => {
// 函数体
}
按照习惯,将箭头函数作为单独一个函数来使用的情况并不多,往往是当要传入的参数是函数时才使用箭头函数
// 比如事件处理函数
elem.addEventListener("click", () => {
// 函数体
})
this在函数中的指向
我们常用函数关键字function
来声明一个函数,在一个function()
中,this
总是指向调用这个函数的对象。但箭头函数的this
指向有点特别,它总是指向最近的外层作用域中的this
所指对象
下面用例子来说明:
// 这里有两个点击事件,一个绑定的事件处理函数为普通函数,一个为箭头函数
func.addEventListener("click", function() {
console.log(this);
});
arrow.addEventListener("click", () => {
console.log(this);
});
代码效果图如下:
由控制台打印结果可以看到:
普通函数构造的事件处理函数的this
指向的是事件源对象(button
)
箭头函数构造的事件处理函数中的this
指向的是其最近外层函数作用域中的this
指向的Window
对象
再看一个例子:
const obj = {
func1() {
setTimeout(function() {
console.log(this);
})
},
func2() {
setTimeout(() => {
console.log(this);
})
}
}
obj.func1(); // 打印出 Window
obj.func2(); // 打印出 当前对象obj
代码效果图如下:
这一次function
构造的函数中的this
指向了调用它的window
对象,而箭头函数中的this
指向了最近的外层函数作用域中的this
指向的对象obj
文章源码:https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/js/箭头函数的this指向