「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的效果吧

能够看到，若是不保存全局变量直接使用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指向的是全局，因此会打印

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的基本使用场景，若是你们还有更多好玩的操做，能够在下面留言🙏