JavaScript的this

周國輝發(fā)布于2019-08-20 17:21 / 3300人閱讀

摘要：里，的值隨著一個函數(shù)被調(diào)用情況的不同而不同。作為構(gòu)造函數(shù)被調(diào)用指用關(guān)鍵字進(jìn)行調(diào)用生成一個對象實(shí)例子的情況，這時候生成的實(shí)例對象在我們用調(diào)用一個構(gòu)造函數(shù)時，發(fā)生了三件事創(chuàng)建了一個新的空對象。在第一步創(chuàng)建的這個空對象作為傳給這個構(gòu)造函數(shù)。

在JavaScript被調(diào)用的時候，除了可見的行參被傳入方法體之外，this也被隱形地傳進(jìn)去了。所以，從這點(diǎn)也再次說明JavaScript的this的值完全取決于函數(shù)被調(diào)用時候的上下文，而不是像java的this是在聲明的時候確定的。
JavaScript里，this的值隨著一個函數(shù)被調(diào)用情況的不同而不同。而一個函數(shù)有4種被調(diào)用的情況，也就是說this的值有4種，那先來看看有哪四種調(diào)用函數(shù)的方法：

1: 作為方法被調(diào)用
當(dāng)一個函數(shù)被賦給一個對象的屬性，并引用該屬性進(jìn)行調(diào)用時，this === the object

var func = function(){
    return this.a;
}
var obj = {
    a: 10,
    name: "hehe",
    fn: func
}
this.a = 20;
obj.fn();//10

當(dāng)我們執(zhí)行到func時，在右邊的調(diào)試工具欄可以看到this是我們的obj這個對象。

2: 作為一個函數(shù)被調(diào)用
只最常用的用（）進(jìn)行調(diào)用的情況，這時候this === Window
先來看一段代碼：

var func = function(){
    var a = 10;
    return this.a;
}

var a = 20;
func();//結(jié)果是20而不是10

當(dāng)我們執(zhí)行到func時，這時候的this是全局對象Window,那this.a自然就是全局變量a(20),而不是定義在func內(nèi)部的a(10)。
其實(shí)第二種情況是第一種情況的特例，這里的對象是全局對象Window,這個方法是在Window上調(diào)用的，那this自然也就是Window了。

3: 作為構(gòu)造函數(shù)被調(diào)用
指用new關(guān)鍵字進(jìn)行調(diào)用生成一個對象實(shí)例子的情況，這時候this === 生成的實(shí)例對象

function Fruit(){
   this.func = function(){return this}
}
var apple = new Fruit();
var orange = new Fruit();

apple.func() === apple; //true
orange.func() === orange; // ture

在我們用new調(diào)用一個構(gòu)造函數(shù)時，發(fā)生了三件事：

 1: 創(chuàng)建了一個新的空對象。
 2: 在第一步創(chuàng)建的這個空對象作為this傳給這個構(gòu)造函數(shù)。 (每一個函數(shù)被調(diào)用時，都隱式地傳入一個this)
 3: 如果沒有顯示的返回值，新創(chuàng)建的這個對象，就會作為構(gòu)造器函數(shù)的返回值進(jìn)行返回。

第三點(diǎn)解釋了為什么我們可以在apple上調(diào)用func這個方法，第二點(diǎn)解釋了為什么appl.func()的執(zhí)行結(jié)果等于apple.

4: 使用apply()和call()方法進(jìn)行調(diào)用