js中的闭包this指向不明确的解决方法
问题出现首先了解声明是闭包?比较简单的开源这里理解,函数中嵌套一个函数;比如函数1是函数2的父函数,那么函数2可以访问到函数1的变量。我们通过一个简单的例子运行到页面就知道了。let between = {user: "user1",get: function() {console.log(this);return function() {retu
·
问题出现
首先了解声明是闭包?比较简单的开源这里理解,函数中嵌套一个函数;比如函数1是函数2的父函数,那么函数2可以访问到函数1的变量。我们通过一个简单的例子运行到页面就知道了。
let between = {
user: "user1",
get: function() {
console.log(this);
return function() {
return this.user;
return this.user; // 报错,无法访问到get中的变量
};
}
};
console.log(between.get()());
上述问题分析:
使用 : return this.user 去返回值,无法得到我们想要的结果,而且还会报错,因为 return this.user; 中的this指向的是window对象。而window 对象里面没有 user;这是因为this的内存泄漏问题。那么我们怎么解决呢?
解决方法
我们可以有两种方法进行解决,一个是原始的函数方式,通过重新定义this的指向来解决:
- 在函数内部声明一个"_this" 来解决这个this指向问题。
这个方法在Vue中做一个ajax请求的时候比较常使用,每一次都声明一个_this,解决闭包留下来的泄漏问题,而且指向的对象比较有唯一性。
let _this = this;
return function() {
return _this.user;
};
- 通过箭头函数来解决,这个方法最快;通过箭头函的特殊性来解决。
return () => {
return this.user;
}
两种解决方法的源代码:
let between = {
user: "user1",
get: function() {
console.log(this);
// let _this = this;
// return function() {
// return _this.user;
// };
return () => {
return this.user;
}
}
};
console.log(between.get()());
上述就是解决闭包内存泄漏的两个方法,希望能帮助你,有更好的解决方案可以留在评论区给大家一起分享!
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)