箭头函数与this指向探究
我有明珠一颗，久被尘劳关锁，一朝尘净光生，照破山河万朵。——柴陵郁禅师
今天研究了下箭头函数与this，发现了一些挺好玩的特性
首先，我们在控制台输入上这段js
var handler = {
name :'handler',
init: function() {
let init1 = function(event) {
console.log("init1: ", this);
let init5 = function(){
console.log("init5: ", this);
}
init5(); // init5: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
};
init1() // init1: Window {window: Window, self: Window, document: document, name: '', location: Location, …}
let init2 = () => console.log("init2: ", this);
init2.call() // init2: {name: 'handler', init: ƒ}
let init3 = () => {
let init4 = ()=> console.log("init4: ", this);
init4() // init4: {name: 'handler', init: ƒ}
}
init3.apply();
},
};
handler.init();
image-20211113165351571
可以明显的看到，箭头函数是锁定了this指向的，这里的箭头函数中的this都指向这个handler对象
而使用function声明的函数中的this永远指向外部的window对象
我们再到webpack构建的vue项目中尝试
printThis() {
console.log("printThis", this); // VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
function print1() {
console.log("print1: ", this); // undefined
function print2() {
console.log("print2: ", this); // undefined
let print3 = () => void console.log("print3: ", this); // undefined
print3.apply()
}
print2.call();
let print4 = () => void console.log("print4: ", this); // undefined
print4.apply();
}
print1.call();
let print5 = () => {
console.log("print5: ", this) // VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
let print6 = () => console.log("print6: ", this); // VueComponent {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
print6.call();
};
print5();
}
image-20211113171322127
可以看到这里的箭头函数中的this都为undefined
而使用function声明的函数仍然指向当前Vue组件实例
了解这个特性，能清楚this的具体指向，方便后续前端开发
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-11-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读