js中的闭包this指向不明确的解决方法

本文介绍了JavaScript中闭包导致的内存泄漏问题,并提供了两种解决方法:一是通过在函数内部声明_this来重新定义this的指向;二是利用箭头函数的特性直接解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题出现

首先了解声明是闭包?比较简单的开源这里理解,函数中嵌套一个函数;比如函数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()());

上述就是解决闭包内存泄漏的两个方法,希望能帮助你,有更好的解决方案可以留在评论区给大家一起分享!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值