「JavaScript-指针问题」-CSDN博客

不论是在工作还是学习中，相信大家都会被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的效果吧

可以看到，如果不保存全局变量直接使用this，this会指向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指向的是全局，所以会打印

在上面的堆内存中相同的例子，只是因为箭头函数和普通函数，所以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的基本使用场景，如果大家还有更多好玩的操作，可以在下面留言?