「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的基本使用場景，若是你們還有更多好玩的操做，能夠在下面留言🙏