【譯】javascript的this關(guān)鍵詞理解

tainzhi 發(fā)布于2019-08-23 17:06 / 1290人閱讀

摘要：在中，當(dāng)使用關(guān)鍵字調(diào)用函數(shù)構(gòu)造函數(shù)時(shí)，函數(shù)構(gòu)造函數(shù)中也有這個(gè)概念，但是它不是惟一的規(guī)則，而且常常可以引用來(lái)自不同執(zhí)行上下文的不同對(duì)象。因此，我們使用調(diào)用函數(shù)，可以看到這是對(duì)象，并且的屬性是正常的。

一直以來(lái)，javascript里邊的this都是一個(gè)很難理解的東西，之前看的最多的就是阮一峰老師關(guān)于this的理解：

http://www.ruanyifeng.com/blo...

今天在留言區(qū)發(fā)現(xiàn)了一國(guó)外大神關(guān)于this的理解，借助翻譯工具讀了一下原文，相對(duì)來(lái)說(shuō)是最好的關(guān)于理解this的文章，就翻譯了一下，也算是記錄一下。

JavaScript的一個(gè)常用特性是“this”關(guān)鍵字，但它也常常是該語(yǔ)言中最令人困惑和誤解的特性之一。“this”到底是什么意思?它是如何決定的?

本文試圖澄清這種困惑，并以一種清晰的方式解釋這個(gè)問(wèn)題的答案。

“this”關(guān)鍵字對(duì)于那些用其他語(yǔ)言編程的人來(lái)說(shuō)并不新鮮，而且它通常引用在通過(guò)類的構(gòu)造函數(shù)實(shí)例化類時(shí)創(chuàng)建的新對(duì)象。例如，如果我有一個(gè)類Boat()，它有一個(gè)方法moveBoat()，當(dāng)在moveBoat()方法中引用“this”時(shí)，我們實(shí)際上是在訪問(wèn)新創(chuàng)建的Boat()對(duì)象。

在JavaScript中，當(dāng)使用“new”關(guān)鍵字調(diào)用函數(shù)構(gòu)造函數(shù)時(shí)，函數(shù)構(gòu)造函數(shù)中也有這個(gè)概念，但是它不是惟一的規(guī)則，而且“this”常常可以引用來(lái)自不同執(zhí)行上下文的不同對(duì)象。如果您不熟悉JavaScript的執(zhí)行上下文，我建議您閱讀我關(guān)于這個(gè)主題的另一篇文章（本人注：文章找不到了）。談得夠多了，讓我們來(lái)看一些JavaScript例子:

// 全局作用域

foo = "abc";
alert(foo); // abc

this.foo = "def";
alert(foo); // def

無(wú)論何時(shí)在全局上下文中使用關(guān)鍵字“this”(而不是在函數(shù)中)，它總是指向全局對(duì)象。現(xiàn)在讓我們看看函數(shù)中“this”的值:

var boat = {
    size: "normal",
    boatInfo: function() {
        alert(this === boat);
        alert(this.size);
    }
};

boat.boatInfo(); // true, "normal"

var bigBoat = {
    size: "big"
};

bigBoat.boatInfo = boat.boatInfo;
bigBoat.boatInfo(); // false, "big"

那么上面的“this”是如何確定的呢?我們可以看到一個(gè)對(duì)象boat，它有一個(gè)屬性size和一個(gè)方法boatInfo()。在boatInfo()中，如果該對(duì)象的值是實(shí)際的boat對(duì)象，它將發(fā)出警報(bào)，并警告該對(duì)象的size屬性。因此，我們使用boat.boatInfo()調(diào)用函數(shù)，可以看到這是boat對(duì)象，并且boat的size屬性是正常的。

然后我們創(chuàng)建另一個(gè)對(duì)象bigBoat，它的size屬性為big。然而，bigBoat對(duì)象沒(méi)有一個(gè)boatInfo()方法，因此我們使用bigBoat從boat復(fù)制該方法。boatInfo = boat.boatInfo。現(xiàn)在，當(dāng)我們調(diào)用bigBoat.boatInfo()并輸入函數(shù)時(shí)，我們看到它不等于boat, size屬性現(xiàn)在是big。為什么會(huì)這樣?這個(gè)值在boatInfo()中是如何變化的?

您必須意識(shí)到的第一件事是，任何函數(shù)中的這個(gè)值都不是靜態(tài)的，它總是在每次調(diào)用函數(shù)時(shí)確定的，但是在函數(shù)實(shí)際執(zhí)行之前，它是代碼。函數(shù)內(nèi)部的值實(shí)際上是由父作用域提供的，在父作用域中調(diào)用函數(shù)，更重要的是，函數(shù)語(yǔ)法是如何編寫的。

每當(dāng)調(diào)用一個(gè)函數(shù)時(shí)，我們必須查看方括號(hào)/圓括號(hào)“()”的左邊。如果在括號(hào)的左邊我們可以看到一個(gè)引用，那么傳遞給函數(shù)調(diào)用的“this”的值就是該對(duì)象所屬的值，否則它就是全局對(duì)象。讓我們來(lái)看一些例子:

function bar() {
    alert(this);
}
bar(); // global - 因?yàn)榉椒╞ar()在調(diào)用時(shí)屬于全局對(duì)象

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - 因?yàn)榉椒╞az()在調(diào)用時(shí)屬于對(duì)象foo

如果到目前為止一切都很清楚，那么上面的代碼顯然是有意義的。通過(guò)用兩種不同的方式編寫call / invoke語(yǔ)法，我們可以在同一個(gè)函數(shù)中更改“this”的值，從而使事情變得更加復(fù)雜:

var foo = {
    baz: function() {
        alert(this);
    }
}
foo.baz(); // foo - 因?yàn)閎az在調(diào)用時(shí)屬于foo對(duì)象

var anotherBaz = foo.baz;
anotherBaz(); // global - 因?yàn)榉椒╝notherBaz()在調(diào)用時(shí)屬于全局對(duì)象，而不是foo

在這里，我們看到baz()中的“this”值每次都是不同的，因?yàn)樗恼Z(yǔ)法調(diào)用有兩種不同的方式。現(xiàn)在，讓我們看看“this”在深度嵌套對(duì)象中的值:

var anum = 0;

var foo = {
    anum: 10,
    baz: {
        anum: 20,
        bar: function() {
            console.log(this.anum);
        }
    }
}
foo.baz.bar(); // 20 - 因?yàn)?)的左邊是bar，它在調(diào)用時(shí)屬于baz對(duì)象

var hello = foo.baz.bar;
hello(); // 0 - 因?yàn)?)的左邊是hello，它在調(diào)用時(shí)屬于全局對(duì)象

另一個(gè)經(jīng)常被問(wèn)到的問(wèn)題是如何在事件處理程序中確定關(guān)鍵字“this”?答案是，事件處理程序中的“this”總是指向它所觸發(fā)的元素。我們來(lái)看一個(gè)例子:

I am an element with id #test

function doAlert() { 
    alert(this.innerHTML); 
} 

doAlert(); // undefined 

var myElem = document.getElementById("test"); 
myElem.onclick = doAlert; 

alert(myElem.onclick === doAlert); // true 
myElem.onclick(); // I am an element

這里我們可以看到，當(dāng)?shù)谝淮握{(diào)用doAlert()時(shí)，它會(huì)發(fā)出未定義的警報(bào)，因?yàn)閐oAlert()屬于全局對(duì)象。然后我們寫myElem。onclick = doAlert，它將函數(shù)doAlert()復(fù)制到myElem的onclick()事件。這基本上意味著無(wú)論何時(shí)觸發(fā)onclick()，它都是myElem的一個(gè)方法，這意味著“This”的值就是myElem對(duì)象。

關(guān)于這個(gè)主題，我想指出的最后一點(diǎn)是，“this”的值也可以使用call()和apply()手動(dòng)設(shè)置，覆蓋了我們今天討論的內(nèi)容。同樣有趣的是，當(dāng)在函數(shù)構(gòu)造函數(shù)中調(diào)用“this”時(shí)，“this”引用構(gòu)造函數(shù)中所有實(shí)例中新創(chuàng)建的對(duì)象。原因是函數(shù)構(gòu)造函數(shù)是用“new”關(guān)鍵字調(diào)用的，它創(chuàng)建了一個(gè)新對(duì)象，其中構(gòu)造函數(shù)中的“this”總是引用剛剛創(chuàng)建的新對(duì)象。

總結(jié)

希望今天的博客文章已經(jīng)澄清了對(duì)“this”這個(gè)關(guān)鍵字的任何誤解，你可以一直知道“this”的正確值。我們現(xiàn)在知道，“this”的值從來(lái)不是靜態(tài)的，它的值取決于函數(shù)是如何調(diào)用的。

原文：http://davidshariff.com/blog/...

歡迎關(guān)注小程序，感謝您的支持！