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”。

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

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    sayHi();
script>

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

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

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    var person = {};
    person.sayHello = sayHi;
    person.sayHello();
script>

這一次，我們又創建了一個全局對象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指向的自然就是我們定義的字符串了。

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

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + 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();
script>

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

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

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

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    function Person(name){
        var this;
        this.name = name;
        return this;
    }
    Person.prototype.sayHello = sayHi;
    var marry = Person("Marry");   
    marry.sayHello();
    var kevin = Person("Kevin");
    kevin.sayHello();
script>

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

當我們使用new關鍵字實例化一個“類”對象的時候，Javascript引擎會在這個對象內部定義一個新的對象並將其存入this指針。所有此對象內部用到this的代碼實際上都是指向這個新的對象。如this.name = name，實際上是將參數中的name對象賦值給了這個新創建的對象。函數對象執行完之後Javascript引擎會將此對象返回給你，於是就有marry變量得到的對象的name爲“Marry”，而kevin變量得到的對象的name屬性確實“Kevin”。

容易誤用的情況

理解了this指針後，我們再來看看一些很容易誤用this指針的情況。

示例1——內聯式綁定Dom元素的事件處理函數

<script type="text/javascript">
    function sayHi(){
       alert("當前點擊的元素是" + this.tagName);
    }    
script>
<input id="btnTest" type="button" value="點擊我" onclick="sayHi()">

在此例代碼中，我們綁定了button的點擊事件，期望在彈出的對話框中打印出點擊元素的標籤名。但運行結果卻是：

也就是this指針並不是指向input元素。這是因爲當使用內聯式綁定Dom元素的事件處理函數時，實際上相當於執行了以下代碼：

<script type="text/javascript">    
    document.getElementById("btnTest").onclick = function(){
        sayHi();
    }
script>

在這種情況下sayHi函數對象的所有權並沒有發生轉移，還是屬於window所有。用上面的指導原則一套我們就很好理解爲什麼this.tagName是undefined了。

那麼如果我們要引用元素本身怎麼辦呢？

我們知道，onclick函數是屬於btnTest元素的，那麼在此函數內部，this指針正是指向此Dom對象，於是我們只需要把this作爲參數傳入sayHi即可。

<script type="text/javascript">
    function sayHi(el){
       alert("當前點擊的元素是" + el.tagName);
    }
script>
<input id="btnTest" type="button" value="點擊我" onclick="sayHi(this)">

等價代碼如下：

<script type="text/javascript"> 
    document.getElementById("btnTest").onclick = function(){
        sayHi(this);
    }
script>

示例2——臨時變量導致的this指針丟失

<script type="text/javascript">
    var Utility = {
        decode:function(str){
            return unescape(str);
        },
        getCookie:function(key){
            // ... 省略提取cookie字符串的代碼
            var value = "i%27m%20a%20cookie";
            return this.decode(value);
        }
    };
    alert(Utility.getCookie("identity"))
script>

我們在寫稍微有點規模的Js庫的時候，一般都會自己封裝一個Utility的類，然後將一些常用的函數作爲Utility類的屬性，如客戶端經常會用到的getCookie函數和解碼函數。如果每個函數都是彼此獨立的，那麼還好辦，問題是，函數之間有時候會相互引用。例如上面的getCookie函數，會對從document.cookie中提取到的字符串進行decode之後再返回。如果我們通過Utility.getCookie去調用的話，那麼沒有問題，我們知道，getCookie內部的this指針指向的還是Utility對象，而Utility對象時包含decode屬性的。代碼可以成功執行。

但是有個人不小心這樣使用Utility對象呢？

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函數到一個局部變量，因爲下面會經常用到
        var getCookie = Utility.getCookie;
        alert(getCookie("identity"));
    }
    showUserIdentity();
script>

這個時候運行代碼會拋出異常“this.decode is not a function”。運用上面我們講到的指導原則，很好理解，因爲此時Utility.getCookie對象被賦給了臨時變量getCookie，而臨時變量是屬於window對象的——只不過外界不能直接引用，只對Javascript引擎可見——於是在getCookie函數內部的this指針指向的就是window對象了，而window對象沒有定義一個decode的函數對象，因此就會拋出這樣的異常來。

這個問題是由於引入了臨時變量導致的this指針的轉移。解決此問題的辦法有幾個：

• 不引入臨時變量，每次使用均使用Utility.getCookie進行調用
• getCookie函數內部使用Utility.decode顯式引用decode對象而不通過this指針隱式引用（如果Utility是一個實例化的對象，也即是通過new生成的，那麼此法不可用）
• 使用Funtion.apply或者Function.call函數指定this指針

前面兩種都比較好理解，第三種需要提一下。正是因爲this指針的指向很容易被轉移丟失，因此Javascript提供了兩個類似的函數apply和call來允許函數在調用時重新顯式的指定this指針。

修正代碼如下：

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函數到一個局部變量，因爲下面會經常用到
        var getCookie = Utility.getCookie;
        alert(getCookie.call(Utility,"identity"));
        alert(getCookie.apply(Utility,["identity"]));
    }
    showUserIdentity();
script>

call和apply只有語法上的差異，沒有功能上的差別。

示例3——函數傳參時導致的this指針丟失

我們先來看一段問題代碼：

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }
    setTimeout(person.sayHi,5000);
script>

這段代碼期望在訪客進入頁面5秒鐘之後向訪客打聲招呼。setTimeout函數接收一個函數作爲參數，並在指定的觸發時刻執行這個函數。可是，當我們等了5秒鐘之後，彈出的對話框顯示的this.name卻是undefined。

其實這個問題和上一個示例中的問題是類似的，都是因爲臨時變量而導致的問題。當我們執行函數的時候，如果函數帶有參數，那麼這個時候Javascript引擎會創建一個臨時變量，並將傳入的參數複製（注意，Javascript裏面都是值傳遞的，沒有引用傳遞的概念）給此臨時變量。也就是說，整個過程就跟上面我們定義了一個getCookie的臨時變量，再將Utility.getCookie賦值給這個臨時變量一樣。只不過在這個示例中，容易忽視臨時變量導致的bug。

函數對象傳參

對於函數作爲參數傳遞導致的this指針丟失的問題，目前很多框架都已經有方法解決了。

Prototype的解決方案——傳參之前使用bind方法將函數封裝起來，並返回封裝後的對象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }
    var boundFunc = person.sayHi.bind(person,person.sayHi);
    setTimeout(boundFunc,5000);
script>

bind方法的實現其實是用到了Javascript又一個高級特性——閉包。我們來看一下源代碼：

function bind(){
    if (arguments.length < 2 && arguments[0] === undefined) 
        return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function(){
        return __method.apply(object, args.concat($A(arguments)));
    }
}

 

首先將this指針存入函數內部臨時變量，然後在返回的函數對象中引用此臨時變量從而形成閉包。

微軟的Ajax庫提供的方案——構建委託對象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }    
    var boundFunc = Function.createDelegate(person,person.sayHi);
    setTimeout(boundFunc,5000);
script>

其實本質上和prototype的方式是一樣的。

著名的Extjs庫的解決方案採用的手法和微軟是一樣的。

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

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

<script type="text/javascript"> 
    var name = "Kevin Yang"; 
    function sayHi(){ 
       alert("你好，我的名字叫" + name); 
    } 
    sayHi(); 
script> 
這段代碼很簡單，我們定義了一個全局字符串對象name和函數對象sayHi。運行會彈出一個打招呼的對話框，“你好，我的名字叫Kevin Yang”。 

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

<script type="text/javascript"> 
    var name = "Kevin Yang"; 
    function sayHi(){ 
       alert("你好，我的名字叫" + this.name); 
    } 
    sayHi(); 
script> 
這段代碼和上段代碼的區別就在於sayHi函數在使用name的時候加上了this.前綴。運行結果和上面一摸一樣。這說明this.name引用的也還是全局的name對象。 

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

<script type="text/javascript"> 
    var name = "Kevin Yang"; 
    function sayHi(){ 
       alert("你好，我的名字叫" + this.name); 
    } 
    var person = {}; 
    person.sayHello = sayHi; 
    person.sayHello(); 
script> 
這一次，我們又創建了一個全局對象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指向的自然就是我們定義的字符串了。 

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

<script type="text/javascript"> 
    var name = "Kevin Yang"; 
    function sayHi(){ 
       alert("你好，我的名字叫" + 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(); 
script> 
在上面這段代碼中，我們定義了一個Person的“類”（實際上還是一個對象），然後在這個類的原型（類原型相當於C++中的靜態成員變量的概念）中定義了sayHello屬性，使其指向全局的sayHi對象。運行代碼我們可以看到，marry和kevin都成功的向我們打了聲“招呼”。 

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

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

<script type="text/javascript"> 
    var name = "Kevin Yang"; 
    function sayHi(){ 
       alert("你好，我的名字叫" + this.name); 
    } 
    function Person(name){ 
        var this; 
        this.name = name; 
        return this; 
    } 
    Person.prototype.sayHello = sayHi; 
    var marry = Person("Marry");   
    marry.sayHello(); 
    var kevin = Person("Kevin"); 
    kevin.sayHello(); 
script> 
當然這段代碼並不能正確執行，但是它可以幫助你更好的理解這個過程。 

當我們使用new關鍵字實例化一個“類”對象的時候，Javascript引擎會在這個對象內部定義一個新的對象並將其存入this指針。所有此對象內部用到this的代碼實際上都是指向這個新的對象。如this.name = name，實際上是將參數中的name對象賦值給了這個新創建的對象。函數對象執行完之後Javascript引擎會將此對象返回給你，於是就有marry變量得到的對象的name爲“Marry”，而kevin變量得到的對象的name屬性確實“Kevin”。 

容易誤用的情況 
理解了this指針後，我們再來看看一些很容易誤用this指針的情況。 

示例1——內聯式綁定Dom元素的事件處理函數 

<script type="text/javascript"> 
    function sayHi(){ 
       alert("當前點擊的元素是" + this.tagName); 
    }    
script> 
<input id="btnTest" type="button" value="點擊我" onclick="sayHi()"> 
在此例代碼中，我們綁定了button的點擊事件，期望在彈出的對話框中打印出點擊元素的標籤名。但運行結果卻是： 



也就是this指針並不是指向input元素。這是因爲當使用內聯式綁定Dom元素的事件處理函數時，實際上相當於執行了以下代碼： 

<script type="text/javascript">    
    document.getElementById("btnTest").onclick = function(){ 
        sayHi(); 
    } 
script> 
在這種情況下sayHi函數對象的所有權並沒有發生轉移，還是屬於window所有。用上面的指導原則一套我們就很好理解爲什麼this.tagName是undefined了。 

那麼如果我們要引用元素本身怎麼辦呢？ 

我們知道，onclick函數是屬於btnTest元素的，那麼在此函數內部，this指針正是指向此Dom對象，於是我們只需要把this作爲參數傳入sayHi即可。 

<script type="text/javascript"> 
    function sayHi(el){ 
       alert("當前點擊的元素是" + el.tagName); 
    } 
script> 
<input id="btnTest" type="button" value="點擊我" onclick="sayHi(this)"> 
等價代碼如下： 

<script type="text/javascript"> 
    document.getElementById("btnTest").onclick = function(){ 
        sayHi(this); 
    } 
script> 
示例2——臨時變量導致的this指針丟失 

<script type="text/javascript"> 
    var Utility = { 
        decode:function(str){ 
            return unescape(str); 
        }, 
        getCookie:function(key){ 
            // ... 省略提取cookie字符串的代碼 
            var value = "i%27m%20a%20cookie"; 
            return this.decode(value); 
        } 
    }; 
    alert(Utility.getCookie("identity")) 
script> 
我們在寫稍微有點規模的Js庫的時候，一般都會自己封裝一個Utility的類，然後將一些常用的函數作爲Utility類的屬性，如客戶端經常會用到的getCookie函數和解碼函數。如果每個函數都是彼此獨立的，那麼還好辦，問題是，函數之間有時候會相互引用。例如上面的getCookie函數，會對從document.cookie中提取到的字符串進行decode之後再返回。如果我們通過Utility.getCookie去調用的話，那麼沒有問題，我們知道，getCookie內部的this指針指向的還是Utility對象，而Utility對象時包含decode屬性的。代碼可以成功執行。 

但是有個人不小心這樣使用Utility對象呢？ 

<script type="text/javascript"> 
    function showUserIdentity(){ 
        // 保存getCookie函數到一個局部變量，因爲下面會經常用到 
        var getCookie = Utility.getCookie; 
        alert(getCookie("identity")); 
    } 
    showUserIdentity(); 
script> 
這個時候運行代碼會拋出異常“this.decode is not a function”。運用上面我們講到的指導原則，很好理解，因爲此時Utility.getCookie對象被賦給了臨時變量getCookie，而臨時變量是屬於window對象的——只不過外界不能直接引用，只對Javascript引擎可見——於是在getCookie函數內部的this指針指向的就是window對象了，而window對象沒有定義一個decode的函數對象，因此就會拋出這樣的異常來。 

這個問題是由於引入了臨時變量導致的this指針的轉移。解決此問題的辦法有幾個： 

不引入臨時變量，每次使用均使用Utility.getCookie進行調用 
getCookie函數內部使用Utility.decode顯式引用decode對象而不通過this指針隱式引用（如果Utility是一個實例化的對象，也即是通過new生成的，那麼此法不可用） 
使用Funtion.apply或者Function.call函數指定this指針 
前面兩種都比較好理解，第三種需要提一下。正是因爲this指針的指向很容易被轉移丟失，因此Javascript提供了兩個類似的函數apply和call來允許函數在調用時重新顯式的指定this指針。 

修正代碼如下： 

<script type="text/javascript"> 
    function showUserIdentity(){ 
        // 保存getCookie函數到一個局部變量，因爲下面會經常用到 
        var getCookie = Utility.getCookie; 
        alert(getCookie.call(Utility,"identity")); 
        alert(getCookie.apply(Utility,["identity"])); 
    } 
    showUserIdentity(); 
script> 
call和apply只有語法上的差異，沒有功能上的差別。 

示例3——函數傳參時導致的this指針丟失 

我們先來看一段問題代碼： 

<script type="text/javascript"> 
    var person = { 
        name:"Kevin Yang", 
        sayHi:function(){ 
            alert("你好，我是"+this.name); 
        } 
    } 
    setTimeout(person.sayHi,5000); 
script> 
這段代碼期望在訪客進入頁面5秒鐘之後向訪客打聲招呼。setTimeout函數接收一個函數作爲參數，並在指定的觸發時刻執行這個函數。可是，當我們等了5秒鐘之後，彈出的對話框顯示的this.name卻是undefined。 

其實這個問題和上一個示例中的問題是類似的，都是因爲臨時變量而導致的問題。當我們執行函數的時候，如果函數帶有參數，那麼這個時候Javascript引擎會創建一個臨時變量，並將傳入的參數複製（注意，Javascript裏面都是值傳遞的，沒有引用傳遞的概念）給此臨時變量。也就是說，整個過程就跟上面我們定義了一個getCookie的臨時變量，再將Utility.getCookie賦值給這個臨時變量一樣。只不過在這個示例中，容易忽視臨時變量導致的bug。 

函數對象傳參 
對於函數作爲參數傳遞導致的this指針丟失的問題，目前很多框架都已經有方法解決了。 

Prototype的解決方案——傳參之前使用bind方法將函數封裝起來，並返回封裝後的對象 

<script type="text/javascript"> 
    var person = { 
        name:"Kevin Yang", 
        sayHi:function(){ 
            alert("你好，我是"+this.name); 
        } 
    } 
    var boundFunc = person.sayHi.bind(person,person.sayHi); 
    setTimeout(boundFunc,5000); 
script> 
bind方法的實現其實是用到了Javascript又一個高級特性——閉包。我們來看一下源代碼： 

function bind(){ 
    if (arguments.length < 2 && arguments[0] === undefined) 
        return this; 
    var __method = this, args = $A(arguments), object = args.shift(); 
    return function(){ 
        return __method.apply(object, args.concat($A(arguments))); 
    } 
} 

首先將this指針存入函數內部臨時變量，然後在返回的函數對象中引用此臨時變量從而形成閉包。 

微軟的Ajax庫提供的方案——構建委託對象 

<script type="text/javascript"> 
    var person = { 
        name:"Kevin Yang", 
        sayHi:function(){ 
            alert("你好，我是"+this.name); 
        } 
    }    
    var boundFunc = Function.createDelegate(person,person.sayHi); 
    setTimeout(boundFunc,5000); 
script> 
其實本質上和prototype的方式是一樣的。