探祕js中的this

你是否是和我同樣，以爲this是個難以捉摸的神祕玩意兒，一會指向這個，一會又指向那個，可謂神祕莫測。這篇文章是我在學習過程當中對this的一些總結，或許能撥開一些籠罩在this上的重重謎團……

什麼是this

this是js中的關鍵字之一，它也是不少語言的關鍵字，用於指定某一個對象。

this, self, and Me are keywords used in some computer programming languages to refer to the object, class, or other entity of which the currently running code is a part. --《維基百科》

this的謎之身份

上一部分，咱們已經知道了js用來指定某一個對象或者實體等，看起來好像很簡單，實則難的一逼，難就難在this的身份老是難以捉摸的。下面搞幾個例子：

狀況1：全局

var a=1;
    console.log(this.a);
    console.log(this);
複製代碼

輸出結果：

全局變量a是掛在全局window上的，此時的this是window，

console.log(this.a);至關於console.log(window.a);

狀況2：全局函數

function f(){
        console.log(this);
    }
    f();
複製代碼

輸出結果：

由於f()爲全局函數，下面調用f()至關於window調用了f()，此時的this是window。

狀況3：對象的方法

var a=1;
    let obj = {
        a:2,
        say:function(){
            console.log(this.a)
        }
    }
    obj.say();
    let f=obj.say;
    f();
複製代碼

輸出結果：

這個結果能夠說明，當用obj.say()調用函數時，this是obj； 當用f()調用函數時，this是window；

到這裏就能夠得出一個重要結論：誰調用了包含this的函數，this就是誰。

狀況4：new

function One(){
        console.log(this)
    }
    One();
    let a=new One();
複製代碼

輸出結果：

若是在調用函數以前加一個new的話，會建立並返回一個新的對象，這個函數內部的this就會指向這個對象。

狀況5：call和apply

function f(){
        console.log(this);
    }
    let obj={};
    f.call(obj);
複製代碼

輸出結果：

function f(){
        console.log(this);
    }
    let obj={};
    f.apply(obj);
複製代碼

輸出

使用call和apply，this指向第一個參數。

結束

歸根到底，真理就是一句話：

誰調用了，this就是誰。

實踐是檢驗真理的惟一標準，再錯綜複雜的this身份之謎的真相也經過實驗例子慢慢浮出水面，不過本文也就只是拋磚引玉，皮毛而已，但願能有所幫助。