詳解Javascript 中的this指針

前言

Javascript是一門基于對象的動态語言，也就是說，所有東西都是對象，一個很典型的例子就是函數也被視為普通的對象。Javascript可以通過一定的設計模式來實作面向對象的程式設計，其中this “指針”就是實作面向對象的一個很重要的特性。但是this也是Javascript中一個非常容易了解錯，進而用錯的特性。特别是對于接觸靜态語言比較久了的同志來說更是如此。

示例說明

我們先來看一個最簡單的示例：

<script type="text/javascript">

    var name = "Kevin Yang";

    function sayHi(){

       alert("你好，我的名字叫" + name);

    }

    sayHi();

</script>

這段代碼很簡單，我們定義了一個全局字元串對象name和函數對象sayHi。運作會彈出一個打招呼的對話框，“你好，我的名字叫Kevin Yang”。

我們把這段代碼稍微改一改：

       alert("你好，我的名字叫" + this.name);

這段代碼和上段代碼的差別就在于sayHi函數在使用name的時候加上了this.字首。運作結果和上面一摸一樣。這說明this.name引用的也還是全局的name對象。

開頭我們不是說了，函數也是普通的對象，可以将其當作一個普通變量使用。我們再把上面的代碼改一改：

    var person = {};

    person.sayHello = sayHi;

    person.sayHello();

這一次，我們又建立了一個全局對象person，并将sayHi函數對象賦給person對象的sayHello屬性。運作結果如下：

這一次打招呼的内容就有點無厘頭了，我們發現this.name已經變成undefined了。這說明，在sayHello函數内部執行時已經找不着this.name對象了。如果我們重新定義person對象，在其上面加上一個name屬性又會怎麼樣呢？

var person = {name:"Marry"};

運作代碼發現打招呼的“人”變了：

是不是看出點道道了呢？

判别this指針的指導性原則

在Javascript裡面，this指針代表的是執行目前代碼的對象的所有者。

在上面的示例中我們可以看到，第一次，我們定義了一個全局函數對象sayHi并執行了這個函數，函數内部使用了this關鍵字，那麼執行this這行代碼的對象是sayHi（一切皆對象的展現），sayHi是被定義在全局作用域中。其實在Javascript中所謂的全局對象，無非是定義在window這個根對象下的一個屬性而已。是以，sayHi的所有者是window對象。也就是說，在全局作用域下，你可以通過直接使用name去引用這個對象，你也可以通過window.name去引用同一個對象。因而this.name就可以翻譯為window.name了。

再來看第二個this的示例。我們定義了一個person的對象，并定義了它的sayHello屬性，使其指向sayHi全局對象。那麼這個時候，當我們運作person.sayHello的時候，this所在的代碼所屬對象就是sayHello了（其實準确來說，sayHi和sayHello是隻不過類似兩個指針，指向的對象實際上是同一個），而sayHello對象的所有者就是person了。第一次，person裡面沒有name屬性，是以彈出的對話框就是this.name引用的就是undefined對象（Javascript中所有隻聲明而沒有定義的變量全都指向undefined對象）；而第二次我們在定義person的時候加了name屬性了，那麼this.name指向的自然就是我們定義的字元串了。

了解了上面所說的之後，我們将上面最後一段示例改造成面向對象式的代碼。

    function Person(name){

        this.name = name;

    Person.prototype.sayHello = sayHi;

    var marry = new Person("Marry");   

    marry.sayHello();

    var kevin = new Person("Kevin");

    kevin.sayHello();

在上面這段代碼中，我們定義了一個Person的“類”（實際上還是一個對象），然後在這個類的原型（類原型相當于C++中的靜态成員變量的概念）中定義了sayHello屬性，使其指向全局的sayHi對象。運作代碼我們可以看到，marry和kevin都成功的向我們打了聲“招呼”。

在這段代碼中有兩點需要思考的，一個是new我們很熟悉，但是在這裡new到底做了什麼操作呢？另外一個是，這裡執行sayHello的時候，this指針為什麼能夠正确的指向marry和kevin對象呢？

我們來把上面定義“類”和執行個體化類對象的操作重新“翻譯”一下：

        var this;

        return this;

    var marry = Person("Marry");   

    var kevin = Person("Kevin");

當然這段代碼并不能正确執行，但是它可以幫助你更好的了解這個過程。

當我們使用new關鍵字執行個體化一個“類”對象的時候，Javascript引擎會在這個對象内部定義一個新的對象并将其存入this指針。所有此對象内部用到this的代碼實際上都是指向這個新的對象。如this.name = name，實際上是将參數中的name對象指派給了這個新建立的對象。函數對象執行完之後Javascript引擎會将此對象傳回給你，于是就有marry變量得到的對象的name為“Marry”，而kevin變量得到的對象的name屬性确實“Kevin”。

顯式操縱this指針

在上面的面向對象式程式設計執行個體中，我們看到，在使用new操作符的情況下，看起來this的指向和我們前一節中講到的指導原則并不相符。 this指針并沒有指向marry或者kevin的所有者，而是指向marry和kevin變量本身。

實際上，如果你了解什麼是指針的話，那麼你就會知道，既然是指針，那麼當然可以改變其指向的對象。隻不過Javascript引擎不允許我們自己寫代碼來做這樣的事情，也就是說，在Javascript中，你不可以直接寫this = someObj這樣的代碼。Javascript引擎通過以下兩種方式允許我們顯式指定this指針指代的對象：

1. 通過new操作符，Javascript引擎會将this指針傳回給被指派的變量A（對應上面的例子就是marry和kevin變量），這個時候A和 this指針引用的就是同一個對象了，即A == this。過程參見上面的僞代碼。

2. 通過Function.apply或者Function.call的原型方法，我們可以将this指針指代的對象以參數的形式傳入，這個時候，函數内部使用的this指針就是傳入的參數。