快捷導航

深入理解Javascript中的this關(guān)鍵字

更新時間：2015年03月27日 16:40:11 投稿：junjie

這篇文章主要介紹了深入理解Javascript中的this關(guān)鍵字,本文講解了方法調(diào)用模式、函數(shù)調(diào)用模式、構(gòu)造器調(diào)用模式、apply調(diào)用模式中this的不同之處,需要的朋友可以參考下

自從接觸javascript以來，對this參數(shù)的理解一直是模棱兩可。雖有過深入去理解，但卻也總感覺是那種浮于表面，沒有完全理清頭緒。

但對于this參數(shù)，確實會讓人產(chǎn)生很多誤解。那么this參數(shù)到底是何方神圣？

理解this　　

this是一個與執(zhí)行上下文（execution context，也就是作用域）相關(guān)的特殊對象。因此,它可以叫作上下文對象(也就是用來指明執(zhí)行上下文是在哪個上下文中被觸發(fā)的對象)。

任何對象都可以做為上下文中的this的值。在一些對ECMAScript執(zhí)行上下文和部分this的描述中的所產(chǎn)生誤解。this經(jīng)常被錯誤的描述成是變量對象的一個屬性。再重復一次：

this是執(zhí)行上下文的一個屬性,而不是變量對象的一個屬性。這個特性非常重要,因為與變量相反,this從不會參與到標識符解析過程。換句話說,在代碼中當訪問this的時候,它的值是直接從執(zhí)行上下文中獲取的,并不需要任何作用域鏈查找。this的值只在進入上下文的時候進行一次確定。

廢話不多，先看一個板栗：

復制代碼代碼如下:

var test = function(){};

test.prototype = {
    foo:"apple",
    fun:function(){
        this.foo="banana";
    }
};

var myTest = new test();
myTest.fun();

console.log(myTest.hasOwnProperty("foo")); //輸出什么
console.log(myTest.hasOwnProperty("fun")); //輸出什么

hasOwnProperty：是用來判斷一個對象是否有你給出名稱的屬性或?qū)ο蟆２贿^需要注意的是，此方法無法檢查該對象的原型鏈中是否具有該屬性，該屬性必須是對象本身的一個成員。

不知道看官們心里的答案是什么，正確的答案是true,false。

復制代碼代碼如下:

console.log(myTest.hasOwnProperty("foo"));
console.log(myTest.hasOwnProperty("fun"));

true
false

要弄明白為什么是這樣，就必須要理解上面this所扮演的角色，所指代的對象。在《javascript語言精粹》一書中，指出了在javascript中一共有四種調(diào)用模式：

1.方法調(diào)用模式
2.函數(shù)調(diào)用模式
3.構(gòu)造器調(diào)用模式
4.apply調(diào)用模式

而在這些模式當中，對于如何初始化關(guān)鍵參數(shù)this上是存在不同差異的。

方法調(diào)用模式

當一個函數(shù)被保存為對象的一個屬性時，我們稱它為一個方法。當一個方法被調(diào)用時，this被綁定到該對象。注意加粗的這句是重點：

復制代碼代碼如下:

// 創(chuàng)建myObject。它有一個value屬性和一個increment方法

var myObject = {
    value: 0;
    increment: function(inc) {
        this.value += typeof inc ==='number'?inc:1; // 接受一個可選參數(shù)，如果不是數(shù)字，則默認為數(shù)字1
    }
};

myObject.increment();
console.log(myObject.value); // 1

myObject.increment(2); //傳入數(shù)字2
console.log(myObject.value); // 3

這里，方法increment可以使用this去訪問myObject對象，所以可以改變value的值。而且，this到對象的綁定發(fā)生在調(diào)用的時候。

函數(shù)調(diào)用模式

如果一個函數(shù)并非一個對象的屬性時，那么它被當作一個函數(shù)來調(diào)用，此時，this被綁定到全局對象，書上說這是js語言設(shè)計的一個缺陷。倘若設(shè)計正確，當內(nèi)部函數(shù)被調(diào)用的時，this應(yīng)該仍然綁定到外部函數(shù)的this變量。拋開對語言設(shè)計的正確與否討論，要當函數(shù)調(diào)用模式時this變量依舊綁定到該對象，有如下經(jīng)典解決方案:

復制代碼代碼如下:

// 給myObject增加一個double方法

var myObject = {
    value: 0;
    increment: function(inc) {
        this.value += typeof inc ==='number'?inc:1; // 接受一個可選參數(shù)，如果不是數(shù)字，則默認為數(shù)字1
    }
};

myObject.increment(2);

myObject.double = function () {
    var that=this; //解決方法

    var helper= function () {
        that.value=add(that.value,that.value);
    };
    helper();
};
myObject.double(); //以方法的形式調(diào)用double
console.log(myObject.getValue());   //6

即是給該方法定義一個變量并且把它賦值為this，那么內(nèi)部函數(shù)就可以通過那個變量訪問到this，按照約定，給那個變量命名為that。

構(gòu)造器調(diào)用模式

構(gòu)造器調(diào)用模式即是我一開頭給出的例子所提到的。如果在一個函數(shù)前面帶上new來調(diào)用，那么將創(chuàng)建一個連接到該函數(shù)的prototype成員新對象，同時this將會被綁定到那個新對象上。聽上去十分拗口且難以理解，先再看個demo：

復制代碼代碼如下:

//構(gòu)造一個名為Quo的構(gòu)造器函數(shù)，帶有一個status屬性的對象

var Quo = function(string){
this.status =string;
};

Quo.prototype.get_status = function(){
return this.status;
}

var myQuo =new Quo("confuse"); //構(gòu)造一個Quo實例

console.log(myQuo.get_status()); //confuse

簡單來說，Quo對象下的this在被用為構(gòu)造一個新實例即new時，this指代的是新生成的myQuo對象而不是Quo對象本身。

一句話，重點就是：原型中的this不是指的原型對象，而是調(diào)用對象。

再回過頭看一開始的demo，就很好理解了，在執(zhí)行myTest.fun()時，this指代了myTest對象，所以生成了一個foo屬性值為“banana”，所以myTest.hasOwnProperty("foo")返回值為true。

Apply調(diào)用模式

因為javascript是一門函數(shù)式面向?qū)ο缶幊陶Z言，所以函數(shù)可以擁有方法。apply方法讓我們構(gòu)建一個參數(shù)數(shù)組并用其去調(diào)用其他函數(shù)，apply方法接收兩個參數(shù)，第一個是將被綁定的this的值，第二個是參數(shù)數(shù)組。說簡單直接一點就是apply方法能劫持另外一個對象的方法，繼承另外一個對象的屬性. 推薦可以看js中apply方法的使用詳細解析，就不擺demo了。

學識尚淺，若文中有不正確，請務(wù)必指出，誤人子弟實乃大過。

您可能感興趣的文章: