JavaScript中對this物件理解（程式碼範例）

這篇文章帶給大家的內容是關於JavaScript中對this物件理解（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言：最近在細讀Javascript高階程式設計，對我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，試著解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內容引用自《JavaScript高級程式設計第三版》。

this物件是在執行時期基於函數的執行環境綁定：

在全域環境中， this等於window，而當函數被當作某個物件的方法呼叫時，this就指向了那個對象。

不過匿名函數的執行環境具有全域性，因此其this物件通常指向window。

在閉包中使用this物件可能會導致一些問題。

有時候因為寫閉包的方式不同，這可能不會那麼明顯。

// 在全局环境中，this等于window
function thisBoundForWindow(){
    console.log(this);
    console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//当函数被作为某个对象的方法调用时，this就指向了那个对象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;

//在闭包中使用this对象可能会导致一些问题。
//有时候由于编写闭包的方式不同，这一点可能不会那么明显。
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            console.log(this.name);
        }
    }
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
        return function() {
            console.log(this.name);
        }
    }  => ()调用，还是在全局环境下调用的，所以this.name = window.name => "The Window"
*/

以上程式碼先建立了一個全域變數name，又建立了一個包含name屬性的物件。

這個物件也包含一個方法－getNameFunc(), 它回傳一個匿名函數，而匿名函數又回傳this.name，這個匿名函數就是閉包。

再來回顧一下「閉包」的定義：

有權存取另一個作用域中的變數的函數就是閉包。

由於getNameFunc()回傳一個函數，因此呼叫object.getNameFunc()()就會呼叫它回傳的函數，結果就是控制台印出一個字元竄。

然而，這個範例回傳的字元竄是"The Window"，也就是全域name變數的值。

那麼，要如何把this指向例子中的object呢？

把外部作用域的this物件保存在一個閉包能夠存取到的變數裡，就可以讓閉包存取該物件了。 （注意，這種手法，在使用回呼函數的時候也常用到）。

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function(){
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
object.getNameFunc()(); // "My Object"
/*
// 伪代码过程
object.getNameFunc  execute
=> this = object = that 
=>function() {console.log(that.name);}  
=> ()
=> that.name = object.name 
=> "My Object" 
*/

在定義匿名函數之前，先把this物件賦值給了一個名叫that的變數。

而在定義了閉包之後，閉包也可以存取這個變量，因為它是我們在包含函數中特意聲明的變數。

即使在函數回傳之後，that也仍然引用著object， 所以呼叫Object.getNameFunc()就回傳了"My Object"。

在幾個特殊情況下，this的值可能會意外地改變。例如，下面的程式碼時修改前面例子的結果。

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        console.log(this.name);
    }
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"

第一行程式碼跟平常一樣呼叫了object.getName()，回傳時"My Object"，因為this.name就是object.name。

第二行程式碼在呼叫這個方法前給它加上了括號，雖然加上括號之後，就好像是在引用一個函數，但this的值得到了維持，因為object.getName和(object .getName)的定義是相同的。

第三行程式碼先執行了一條賦值語句，然後再呼叫賦值後的結果。因為這個賦值表達式是函數本身，所以this的值得不到維持，結果就回傳了"The Window"。

//第三个例子伪代码
//理解此段代码，首先要明确一个知识点：赋值语句是有返回值的，返回值就是所赋的值（也就是‘=’右边的值）。

(object.getName = object.getName)(); // "The Window"

(object.getName = function(){ console.log(this.name)})();

(function(){console.log(this.name)})();
//所以this指向window

當然，我們不太可能會像第二行和第三行程式碼一樣呼叫這個方法。暫時理解不了也沒事，這個例子有助於說明即使是文法的細微變化，都有可能意外地改變this值。

以上是JavaScript中對this物件理解（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！