JavaScript中的this陷阱的最全收集--沒(méi)有之一

當(dāng)有人問(wèn)起你JavaScript有什么特點(diǎn)的時(shí)候，你可能立馬就想到了單線程、事件驅(qū)動(dòng)、面向?qū)ο蟮纫欢言~語(yǔ)，但是如果真的讓你解釋一下這些概念，可能真解釋不清楚。有句話這么說(shuō)：如果你不能向一個(gè)6歲小孩解釋清楚一個(gè)東西，那么你自己也不懂這個(gè)東西。這句話或許有點(diǎn)夸張，但是極其有道理。個(gè)人覺(jué)得，如果需要掌握一門(mén)語(yǔ)言，掌握它的API只是學(xué)了皮毛，理解這門(mén)語(yǔ)言的精髓才是重點(diǎn)。提及JavaScript的精髓，this、閉包、作用域鏈、函數(shù)是當(dāng)之無(wú)愧的。這門(mén)語(yǔ)言正式因?yàn)檫@幾個(gè)東西而變得魅力無(wú)窮。

博客的標(biāo)題是《JavaScript中的this陷阱的最全收集--沒(méi)有之一》，很顯然這篇博客闡述的是this。相信做過(guò)JavaScript開(kāi)發(fā)的人都遇到過(guò)不少this的陷阱，我自己本身也遇到過(guò)不少坑，但是如果非要給出一個(gè)系統(tǒng)的總結(jié)的話，還沒(méi)有足夠的底蘊(yùn)。非常幸運(yùn)的是，今天早上起來(lái)看《Hacker News》的時(shí)候，恰巧看到了一篇有關(guān)于JavaScript this的解析：all this。于是，本著學(xué)習(xí)和共享的精神，決定將它翻譯成中文。翻譯的目的絕對(duì)不是為了當(dāng)大自然的搬運(yùn)工，在這個(gè)過(guò)程中會(huì)完全弄明白別人的著作，加深認(rèn)識(shí)，同時(shí)將好東西分享給別人，才能讓更多的學(xué)習(xí)者站在巨人的肩膀上前進(jìn)。按照我自己的習(xí)慣，會(huì)翻譯的過(guò)程中加上一些自己解釋(引用部分)，畢竟中西方人的思考方式是有差異的。當(dāng)然文章標(biāo)題所述的最全也不是吹的，文章非常長(zhǎng)。

原文翻譯:

JavaScript來(lái)自一門(mén)健全的語(yǔ)言，所以你可能覺(jué)得JavaScript中的this和其他面向?qū)ο蟮恼Z(yǔ)言如java的this一樣，是指存儲(chǔ)在實(shí)例屬性中的值。事實(shí)并非如此，在JavaScript中，最好把this當(dāng)成哈利波特中的博格特的背包，有著深不可測(cè)的魔力。

下面的部分是我希望我的同事在使用JavaScript的this的時(shí)候應(yīng)當(dāng)知道的。內(nèi)容很多，是我學(xué)習(xí)好幾年總結(jié)出來(lái)的。

JavaScript中很多時(shí)候會(huì)用到this，下面詳細(xì)介紹每一種情況。在這里我想首先介紹一下宿主環(huán)境這個(gè)概念。一門(mén)語(yǔ)言在運(yùn)行的時(shí)候，需要一個(gè)環(huán)境，叫做宿主環(huán)境。對(duì)于JavaScript，宿主環(huán)境最常見(jiàn)的是web瀏覽器，瀏覽器提供了一個(gè)JavaScript運(yùn)行的環(huán)境，這個(gè)環(huán)境里面，需要提供一些接口，好讓JavaScript引擎能夠和宿主環(huán)境對(duì)接。JavaScript引擎才是真正執(zhí)行JavaScript代碼的地方，常見(jiàn)的引擎有V8(目前最快JavaScript引擎、Google生產(chǎn))、JavaScript core。JavaScript引擎主要做了下面幾件事情：

  • 一套與宿主環(huán)境相聯(lián)系的規(guī)則;
  • JavaScript引擎內(nèi)核（基本語(yǔ)法規(guī)范、邏輯、命令和算法);
  • 一組內(nèi)置對(duì)象和API;
  • 其他約定。

但是環(huán)境不是唯一的，也就是JavaScript不僅僅能夠在瀏覽器里面跑，也能在其他提供了宿主環(huán)境的程序里面跑，最常見(jiàn)的就是nodejs。同樣作為一個(gè)宿主環(huán)境，nodejs也有自己的JavaScript引擎--V8。根據(jù)官方的定義:
Node.js is a platform built on Chrome’s JavaS