阅读 389

「JavaScript-指针问题」

不论是在工作还是学习中,相信大家都会被this指针问题锁困扰,此篇文章就是帮助大家解决this指向问题,希望可以帮大家对this指针有着更深入的了解

1, 定时器中的this指针问题

在项目中,我们不可避免的会使用定时器,定时器也成为大家项目中的家常便客,但是在项目中大家会经常因为定时器this指针问题困扰,特别实在单页面应用中,定时器不关掉会严重消耗资源,下面来给大家介绍下this指针问题和解决方案

//   例如:在vue项目中使用定时器
export default {
    name:"component",
    data(){
        return{
            time:null,         //定义一个定时器初始值
        }
    },
    mounted(){
        //    这个定义变量尽量使用_this,或者self,方便其他同时识别
        let _this = this;

        //    进入页面开始轮询查询接口,这里仅仅演示使用fetch查询,axios同理
        this.time = setInterval(function(){
            fetch('url',{
                methods:'get',
            })
            .then(res => res.json().then(data => console.log(data)))
        },3000)
    },
    destoryed(){
        //    个人习惯,喜欢定义一个局部变量,避免this指针自己不好控制
        let _this = this;
        clearInterval(_this.time)
    }
}复制代码

好了,这样一个简单的demo就搭建完成了,下面来给大家讲解一下为什么这么写

由于个人习惯原因,本人喜欢先定义一个局部变量,避免使用全局变量,既let _this = this;

首先我们来看下如果不使用let _this = this的效果吧


可以看到,如果不保存全局变量直接使用thisthis会指向window,不会指向实例vue,而在window上找不到time属性,所以无法清楚定时器。

再来实验一下定一个一个局部变量_this来保存全局变量吧


可以看到。定义了局部变量_this保存全局变量this会使_this指向vue实例

这样就解决了定时器在单页面项目中无法清除定时器的问题了。

2,  引用值的this指向问题(既堆内存中this的指向)

不管使初学者还是学了很久js的伙伴,大家逗知道调用谁,this就指向谁,这句话没错,但是要联系上下文,不只是简单的调用谁就指向谁,下面来看一个🌰

var a = 2;
var obj = {
    a:1,
    b:function() {
        console.log(this.a)
    }
}

console.log(obj.b());
var fn = obj.b;
console.log(fn());复制代码

下面来看下这道题的具体思路吧

var a = 2;
var obj = {
    a:1,
    b:function() {
        console.log(this.a)    //    在对象内部调用this,this指向obj
    }
}

console.log(obj.b());         //    此时this指针指向的是obj,打印结果为:1
var fn = obj.b;               //    var 一个变量,此时this指向fn,fn在window上,所以指向window
console.log(fn());            //    此时打印的全局变量window上的a, 既打印结果为:2复制代码

对于下面的this指向window相信大家可能还有一定的误解,在这里我说一下本人对引用值中this的理解

1.谁调用this就指向谁

2. var 或者new出来的实例逗创建了一个新的实例,全局变量是挂载在window上的,所以this  指向的是window。

3.原始值中this 的指向(既栈内存中this 的指向)

//    栈内存this的指向相对好理解
var a = 1;                    //申明全局变量a,全局变量挂载在window上
var b = 2;                    //申明全局变量b,全局变量b挂载在window上
console.log(this.a) ;         //this指向window,打印结果:1复制代码

4.箭头函数this指向问题

// 箭头函数没有this,箭头的函数的this指向需要根据上下文来判断

//先来一个简单的例子吧,比如说定时器

var a = 1;
var b = {
    a:2,
    c:setInterval(()=>{
        console.log(this.a,'this指向')
    },1000)
}

b.c;复制代码

这里在window上调用b.c箭头函数的this指向的是全局,所以会打印

1

在上面的堆内存中相同的例子,只是因为箭头函数和普通函数,所以this指向的方向也变得不同,这里需要特别⚠️注意,最好在函数内部保存一下全局变量this!!!(⚠️⚠️⚠️)

这样相信你对this也有了一定的理解,下面我们来看下关于的this指针的面试题吧

5, 面试高频this指针问题

var a = 1;
var obj = {
    a:2,
    c:3,
    b:function(a,c) {
        console.log(a+c);
    }
}
var fn = obj.b(this.a,this.c);
console.log(fn);
var fn1 = obj.b.call(this.obj,obj.a,obj.c);
console.log(fn1)复制代码

首先,分析下这道题

//    这里的this指向的是window,相信大家都没问题
var fn = obj.b(this.a,this.c);            //打印结果 NaN,只在全局变量中找到了this.a,this.c
                                            未定义所以为undefind,数字 + undefind = NaN
复制代码
//    这里本来this指向的是window,但是使用了call()将函数的this指向由window指向了obj
var fn1 = obj.b.call(this.obj,this.a,this.c);        //打印结果为5,在this.obj中找到了
                                                       this.a = 2,this.c = 3;复制代码

以上就是this的基本使用场景,如果大家还有更多好玩的操作,可以在下面留言🙏



关注下面的标签,发现更多相似文章
评论