作者：yuanzm
原文地址：http://segmentfault.com/a/1190000002640298

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

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

原文翻譯:

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

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

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

• 一套與宿主環(huán)境相聯(lián)系的規(guī)則;

• JavaScript引擎內(nèi)核（基本語法規(guī)范、邏輯、命令和算法);
• 一組內(nèi)置對象和API;
• 其他約定。

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

global this

• 在瀏覽器里，在全局范圍內(nèi)，this等價(jià)于window對象。

1 <script type="text/javascript">
2     console.log(this === window); //true
3 </script>

• 在瀏覽器里，在全局范圍內(nèi)，用var聲明一個(gè)變量和給this或者window添加屬性是等價(jià)的。

1 <script type="text/javascript">
2     var foo = "bar";
3     console.log(this.foo); //logs "bar"
4     console.log(window.foo); //logs "bar"
5 </script>

• 如果你在聲明一個(gè)變量的時(shí)候沒有使用var或者let(ECMAScript 6),你就是在給全局的this添加或者改變屬性值。

 1 <script type="text/javascript">
 2     foo = "bar";
 3 
 4     function testThis() {
 5       foo = "foo";
 6     }
 7 
 8     console.log(this.foo); //logs "bar"
 9     testThis();
10     console.log(this.foo); //logs "foo"
11 </script>

• 在node環(huán)境里，如果使用REPL(Read-Eval-Print Loop，簡稱REPL:讀取-求值-輸出,是一個(gè)簡單的，交互式的編程環(huán)境)來執(zhí)行程序,this并不是最高級的命名空間，最高級的是global.

> this
{ ArrayBuffer: [Function: ArrayBuffer],
  Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },
  Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },
  ...
> global === this
true

• 在node環(huán)境里，如果執(zhí)行一個(gè)js腳本，在全局范圍內(nèi)，this以一個(gè)空對象開始作為最高級的命名空間，這個(gè)時(shí)候，它和global不是等價(jià)的。

 1 test.js腳本內(nèi)容：
 2 
 3 console.log(this);
 4 console.log(this === global);
 5 
 6 REPL運(yùn)行腳本：
 7 
 8 $ node test.js
 9 {}
10 false

• 在node環(huán)境里，在全局范圍內(nèi)，如果你用REPL執(zhí)行一個(gè)腳本文件，用var聲明一個(gè)變量并不會(huì)和在瀏覽器里面一樣將這個(gè)變量添加給this。

1 test.js:
2 
3 var foo = "bar";
4 console.log(this.foo);
5 
6 $ node test.js
7 undefined

• 但是如果你不是用REPL執(zhí)行腳本文件，而是直接執(zhí)行代碼，結(jié)果和在瀏覽器里面是一樣的(神坑)

1 > var foo = "bar";
2 > this.foo
3 bar
4 > global.foo
5 bar

• 在node環(huán)境里，用REPL運(yùn)行腳本文件的時(shí)候，如果在聲明變量的時(shí)候沒有使用var或者let，這個(gè)變量會(huì)自動(dòng)添加到global對象，但是不會(huì)自動(dòng)添加給this對象。如果是直接執(zhí)行代碼，則會(huì)同時(shí)添加給global和this.

1 test.js
2 
3 foo = "bar";
4 console.log(this.foo);
5 console.log(global.foo);
6 
7 $ node test.js
8 undefined
9 bar

上面的八種情況可能大家已經(jīng)繞暈了，總結(jié)起來就是：在瀏覽器里面this是老大，它等價(jià)于window對象，如果你聲明一些全局變量(不管在任何地方)，這些變量都會(huì)作為this的屬性。在node里面，有兩種執(zhí)行JavaScript代碼的方式，一種是直接執(zhí)行寫好的JavaScript文件，另外一種是直接在里面執(zhí)行一行行代碼。對于直接運(yùn)行一行行JavaScript代碼的方式，global才是老大，this和它是等價(jià)的。在這種情況下，和瀏覽器比較相似，也就是聲明一些全局變量會(huì)自動(dòng)添加給老大global，順帶也會(huì)添加給this。但是在node里面直接腳本文件就不一樣了，你聲明的全局變量不會(huì)自動(dòng)添加到this，但是會(huì)添加到global對象。所以相同點(diǎn)是，在全局范圍內(nèi)，全局變量終究是屬于老大的。

function this

• 無論是在瀏覽器環(huán)境還是node環(huán)境， 除了在DOM事件處理程序里或者給出了thisArg(接下來會(huì)講到)外，如果不是用new調(diào)用，在函數(shù)里面使用this都是指代全局范圍的this。

 1 <script type="text/javascript">
 2     foo = "bar";
 3 
 4     function testThis() {
 5       this.foo = "foo";
 6     }
 7 
 8     console.log(this.foo); //logs "bar"
 9     testThis();
10     console.log(this.foo); //logs "foo"
11 </script>

test.js

foo = "bar";

function testThis () {
  this.foo = "foo";
}

console.log(global.foo);
testThis();
console.log(global.foo);
$ node test.js
bar
foo

• 除非你使用嚴(yán)格模式，這時(shí)候this就會(huì)變成undefined。

 1 <script type="text/javascript">
 2     foo = "bar";
 3 
 4     function testThis() {
 5       "use strict";
 6       this.foo = "foo";
 7     }
 8 
 9     console.log(this.foo); //logs "bar"
10     testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined 
11 </script>

• 如果你在調(diào)用函數(shù)的時(shí)候在前面使用了new，this就會(huì)變成一個(gè)新的值，和global的this脫離干系。

 1 <script type="text/javascript">
 2     foo = "bar";
 3 
 4     function testThis() {
 5       this.foo = "foo";
 6     }
 7 
 8     console.log(this.foo); //logs "bar"
 9     new testThis();
10     console.log(this.foo); //logs "bar"
11 
12     console.log(new testThis().foo); //logs "foo"
13 </script>

我更喜歡把新的值稱作一個(gè)實(shí)例。

函數(shù)里面的this其實(shí)相對比較好理解，如果我們在一個(gè)函數(shù)里面使用this，需要注意的就是我們調(diào)用函數(shù)的方式，如果是正常的方式調(diào)用函數(shù)，this指代全局的this，如果我們加一個(gè)new，這個(gè)函數(shù)就變成了一個(gè)構(gòu)造函數(shù)，我們就創(chuàng)建了一個(gè)實(shí)例，this指代這個(gè)實(shí)例，這個(gè)和其他面向?qū)ο蟮恼Z言很像。另外，寫JavaScript很常做的一件事就是綁定事件處理程序，也就是諸如button.addEventListener(‘click’, fn, false)之類的，如果在fn里面需要使用this，this指代事件處理程序?qū)?yīng)的對象，也就是button。

prototype this

• 你創(chuàng)建的每一個(gè)函數(shù)都是函數(shù)對象。它們會(huì)自動(dòng)獲得一個(gè)特殊的屬性prototype，你可以給這個(gè)屬性賦值。當(dāng)你用new的方式調(diào)用一個(gè)函數(shù)的時(shí)候，你就能通過this訪問你給prototype賦的值了。

1 function Thing() {
2       console.log(this.foo);
3 }
4 
5 Thing.prototype.foo = "bar";
6 
7 var thing = new Thing(); //logs "bar"
8 console.log(thing.foo);  //logs "bar"

• 當(dāng)你使用new為你的函數(shù)創(chuàng)建多個(gè)實(shí)例的時(shí)候，這些實(shí)例會(huì)共享你給prototype設(shè)定的值。對于下面的例子，當(dāng)你調(diào)用this.foo的時(shí)候，都會(huì)返回相同的值，除非你在某個(gè)實(shí)例里面重寫了自己的this.foo

復(fù)制代碼

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     console.log(this.foo);
 6 }
 7 Thing.prototype.setFoo = function (newFoo) {
 8     this.foo = newFoo;
 9 }
10 
11 var thing1 = new Thing();
12 var thing2 = new Thing();
13 
14 thing1.logFoo(); //logs "bar"
15 thing2.logFoo(); //logs "bar"
16 
17 thing1.setFoo("foo");
18 thing1.logFoo(); //logs "foo";
19 thing2.logFoo(); //logs "bar";
20 
21 thing2.foo = "foobar";
22 thing1.logFoo(); //logs "foo";
23 thing2.logFoo(); //logs "foobar";

• 實(shí)例里面的this是一個(gè)特殊的對象。你可以把this想成一種獲取prototype的值的一種方式。當(dāng)你在一個(gè)實(shí)例里面直接給this添加屬性的時(shí)候，會(huì)隱藏prototype中與之同名的屬性。如果你想訪問prototype中的這個(gè)屬性值而不是你自己設(shè)定的屬性值，你可以通過在實(shí)例里面刪除你自己添加的屬性的方式來實(shí)現(xiàn)。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     console.log(this.foo);
 6 }
 7 Thing.prototype.setFoo = function (newFoo) {
 8     this.foo = newFoo;
 9 }
10 Thing.prototype.deleteFoo = function () {
11     delete this.foo;
12 }
13 var thing = new Thing();
14 thing.setFoo("foo");
15 thing.logFoo(); //logs "foo";
16 thing.deleteFoo();
17 thing.logFoo(); //logs "bar";
18 thing.foo = "foobar";
19 thing.logFoo(); //logs "foobar";
20 delete thing.foo;
21 thing.logFoo(); //logs "bar";

• 或者你也能直接通過引用函數(shù)對象的prototype 來獲得你需要的值。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     console.log(this.foo, Thing.prototype.foo);
 6 }
 7 
 8 var thing = new Thing();
 9 thing.foo = "foo";
10 thing.logFoo(); //logs "foo bar";

• 通過一個(gè)函數(shù)創(chuàng)建的實(shí)例會(huì)共享這個(gè)函數(shù)的prototype屬性的值，如果你給這個(gè)函數(shù)的prototype賦值一個(gè)Array，那么所有的實(shí)例都會(huì)共享這個(gè)Array，除非你在實(shí)例里面重寫了這個(gè)Array，這種情況下，函數(shù)的prototype的Array就會(huì)被隱藏掉。

1 function Thing() {
2 }
3 Thing.prototype.things = [];
4 
5 
6 var thing1 = new Thing();
7 var thing2 = new Thing();
8 thing1.things.push("foo");
9 console.log(thing2.things); //logs ["foo"]

• 給一個(gè)函數(shù)的prototype賦值一個(gè)Array通常是一個(gè)錯(cuò)誤的做法。如果你想每一個(gè)實(shí)例有他們專屬的Array，你應(yīng)該在函數(shù)里面創(chuàng)建而不是在prototype里面創(chuàng)建。

 1 function Thing() {
 2     this.things = [];
 3 }
 4 
 5 
 6 var thing1 = new Thing();
 7 var thing2 = new Thing();
 8 thing1.things.push("foo");
 9 console.log(thing1.things); //logs ["foo"]
10 console.log(thing2.things); //logs []

• 實(shí)際上你可以通過把多個(gè)函數(shù)的prototype鏈接起來的從而形成一個(gè)原型鏈，因此this就會(huì)魔法般地沿著這條原型鏈往上查找直到找你你需要引用的值。

 1 function Thing1() {
 2 }
 3 Thing1.prototype.foo = "bar";
 4 
 5 function Thing2() {
 6 }
 7 Thing2.prototype = new Thing1();
 8 
 9 
10 var thing = new Thing2();
11 console.log(thing.foo); //logs "bar"

• 一些人利用原型鏈的特性來在JavaScript模仿經(jīng)典的面向?qū)ο蟮睦^承方式。任何給用于構(gòu)建原型鏈的函數(shù)的this的賦值的語句都會(huì)隱藏原型鏈上游的相同的屬性。

 1 function Thing1() {
 2 }
 3 Thing1.prototype.foo = "bar";
 4 
 5 function Thing2() {
 6     this.foo = "foo";
 7 }
 8 Thing2.prototype = new Thing1();
 9 
10 function Thing3() {
11 }
12 Thing3.prototype = new Thing2();
13 
14 
15 var thing = new Thing3();
16 console.log(thing.foo); //logs "foo"

• 我喜歡把被賦值給prototype的函數(shù)叫做方法。在上面的例子中，我已經(jīng)使用過方法了，如logFoo。這些方法有著相同的prototype，即創(chuàng)建這些實(shí)力的原始函數(shù)。我通常把這些原始函數(shù)叫做構(gòu)造函數(shù)。在prototype里面定義的方法里面使用this會(huì)影響到當(dāng)前實(shí)例的原型鏈的上游的this。這意味著你直接給this賦值的時(shí)候，隱藏了原型鏈上游的相同的屬性值。這個(gè)實(shí)例的任何方法都會(huì)使用這個(gè)最新的值而不是原型里面定義的這個(gè)相同的值。

 1 function Thing1() {
 2 }
 3 Thing1.prototype.foo = "bar";
 4 Thing1.prototype.logFoo = function () {
 5     console.log(this.foo);
 6 }
 7 
 8 function Thing2() {
 9     this.foo = "foo";
10 }
11 Thing2.prototype = new Thing1();
12 
13 
14 var thing = new Thing2();
15 thing.logFoo(); //logs "foo";

• 在JavaScript里面你可以嵌套函數(shù)，也就是你可以在函數(shù)里面定義函數(shù)。嵌套函數(shù)可以通過閉包捕獲父函數(shù)的變量，但是這個(gè)函數(shù)沒有繼承this

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     var info = "attempting to log this.foo:";
 6     function doIt() {
 7         console.log(info, this.foo);
 8     }
 9     doIt();
10 }
11 
12 
13 var thing = new Thing();
14 thing.logFoo();  //logs "attempting to log this.foo: undefined"

在doIt里面的this是global對象或者在嚴(yán)格模式下面是undefined。這是造成很多不熟悉JavaScript的人深陷 this陷阱的根源。在這種情況下事情變得非常糟糕，就像你把一個(gè)實(shí)例的方法當(dāng)作一個(gè)值，把這個(gè)值當(dāng)作函數(shù)參數(shù)傳遞給另外一個(gè)函數(shù)但是卻不把這個(gè)實(shí)例傳遞給這個(gè)函數(shù)一樣。在這種情況下，一個(gè)方法里面的環(huán)境變成了全局范圍，或者在嚴(yán)格模式下面的undefined。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {  
 5     console.log(this.foo);   
 6 }
 7 
 8 function doIt(method) {
 9     method();
10 }
11 
12 
13 var thing = new Thing();
14 thing.logFoo(); //logs "bar"
15 doIt(thing.logFoo); //logs undefined

• 一些人喜歡先把this捕獲到一個(gè)變量里面，通常這個(gè)變量叫做self，來避免上面這種情況的發(fā)生。

博主非常喜歡用這種方式

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     var self = this;
 6     var info = "attempting to log this.foo:";
 7     function doIt() {
 8         console.log(info, self.foo);
 9     }
10     doIt();
11 }
12 
13 
14 var thing = new Thing();
15 thing.logFoo();  //logs "attempting to log this.foo: bar"

• 但是當(dāng)你需要把一個(gè)方法作為一個(gè)值傳遞給一個(gè)函數(shù)的時(shí)候并不管用。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () { 
 5     var self = this;
 6     function doIt() {
 7         console.log(self.foo);
 8     }
 9     doIt();
10 }
11 
12 function doItIndirectly(method) {
13     method();
14 }
15 
16 
17 var thing = new Thing();
18 thing.logFoo(); //logs "bar"
19 doItIndirectly(thing.logFoo); //logs undefined

• 你可以通過bind將實(shí)例和方法一切傳遞給函數(shù)來解決這個(gè)問題，bind是一個(gè)函數(shù)定義在所有函數(shù)和方法的函數(shù)對象上面

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () { 
 5     console.log(this.foo);
 6 }
 7 
 8 function doIt(method) {
 9     method();
10 }
11 
12 
13 var thing = new Thing();
14 doIt(thing.logFoo.bind(thing)); //logs bar

• 你同樣可以使用apply和call來在新的上下文中調(diào)用方法或函數(shù)。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () { 
 5     function doIt() {
 6         console.log(this.foo);
 7     }
 8     doIt.apply(this);
 9 }
10 
11 function doItIndirectly(method) {
12     method();
13 }
14 
15 
16 var thing = new Thing();
17 doItIndirectly(thing.logFoo.bind(thing)); //logs bar

• 你可以用bind來代替任何一個(gè)函數(shù)或者方法的this，即便它沒有賦值給實(shí)例的初始prototype。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 
 5 
 6 function logFoo(aStr) {
 7     console.log(aStr, this.foo);
 8 }
 9 
10 
11 var thing = new Thing();
12 logFoo.bind(thing)("using bind"); //logs "using bind bar"
13 logFoo.apply(thing, ["using apply"]); //logs "using apply bar"
14 logFoo.call(thing, "using call"); //logs "using call bar"
15 logFoo("using nothing"); //logs "using nothing undefined"

• 你應(yīng)該避免在構(gòu)造函數(shù)里面返回任何東西，因?yàn)檫@可能代替本來應(yīng)該返回的實(shí)例。

 1 function Thing() {
 2     return {};
 3 }
 4 Thing.prototype.foo = "bar";
 5 
 6 
 7 Thing.prototype.logFoo = function () {
 8     console.log(this.foo);
 9 }
10 
11 
12 var thing = new Thing();
13 thing.logFoo(); //Uncaught TypeError: undefined is not a function

奇怪的是，如果你在構(gòu)造函數(shù)里面返回了一個(gè)原始值，上面所述的情況并不會(huì)發(fā)生并且返回語句被忽略了。最好不要在你將通過new調(diào)用的構(gòu)造函數(shù)里面返回任何類型的數(shù)據(jù)，即便你知道自己正在做什么。如果你想創(chuàng)建一個(gè)工廠模式，通過一個(gè)函數(shù)來創(chuàng)建一個(gè)實(shí)例，這個(gè)時(shí)候不要使用new來調(diào)用函數(shù)。當(dāng)然這個(gè)建議是可選的。

• 你可以通過使用Object.create來避免使用new，這樣同樣能夠創(chuàng)建一個(gè)實(shí)例。

 1 function Thing() {
 2 }
 3 Thing.prototype.foo = "bar";
 4 
 5 
 6 Thing.prototype.logFoo = function () {
 7     console.log(this.foo);
 8 }
 9 
10 
11 var thing =  Object.create(Thing.prototype);
12 thing.logFoo(); //logs "bar"

• 在這種情況下并不會(huì)調(diào)用構(gòu)造函數(shù)

 1 function Thing() {
 2     this.foo = "foo";
 3 }
 4 Thing.prototype.foo = "bar";
 5 
 6 
 7 Thing.prototype.logFoo = function () {
 8     console.log(this.foo);
 9 }
10 
11 
12 var thing =  Object.create(Thing.prototype);
13 thing.logFoo(); //logs "bar"

• 因?yàn)镺bject.create不會(huì)調(diào)用構(gòu)造函數(shù)的特性在你繼承模式下你想通過原型鏈重寫構(gòu)造函數(shù)的時(shí)候非常有用。

 1 function Thing1() {
 2     this.foo = "foo";
 3 }
 4 Thing1.prototype.foo = "bar";
 5 
 6 function Thing2() {
 7     this.logFoo(); //logs "bar"
 8     Thing1.apply(this);
 9     this.logFoo(); //logs "foo"
10 }
11 Thing2.prototype = Object.create(Thing1.prototype);
12 Thing2.prototype.logFoo = function () {
13     console.log(this.foo);
14 }
15 
16 var thing = new Thing2();

object this

• 在一個(gè)對象的一個(gè)函數(shù)里，你可以通過this來引用這個(gè)對象的其他屬性。這個(gè)用new來新建一個(gè)實(shí)例是不一樣的。

1 var obj = {
2     foo: "bar",
3     logFoo: function () {
4         console.log(this.foo);
5     }
6 };
7 
8 obj.logFoo(); //logs "bar"

• 注意，沒有使用new，沒有使用Object.create，也沒有使用函數(shù)調(diào)用創(chuàng)建一個(gè)對象。你也可以將對象當(dāng)作一個(gè)實(shí)例將函數(shù)綁定到上面。

1 var obj = {
2     foo: "bar"
3 };
4 
5 function logFoo() {
6     console.log(this.foo);
7 }
8 
9 logFoo.apply(obj); //logs "bar"

• 當(dāng)你用這種方式使用this的時(shí)候，并不會(huì)越出當(dāng)前的對象。只有有相同直接父元素的屬性才能通過this共享變量

 1 var obj = {
 2     foo: "bar",
 3     deeper: {
 4         logFoo: function () {
 5             console.log(this.foo);
 6         }
 7     }
 8 };
 9 
10 obj.deeper.logFoo(); //logs undefined

• 你可以直接通過對象引用你需要的屬性

var obj = {
    foo: "bar",
    deeper: {
        logFoo: function () {
            console.log(obj.foo);
        }
    }
};

obj.deeper.logFoo(); //logs "bar"

DOM event this

• 在一個(gè)HTML DOM事件處理程序里面，this始終指向這個(gè)處理程序被所綁定到的HTML DOM節(jié)點(diǎn)

 1 function Listener() {
 2     document.getElementById("foo").addEventListener("click",
 3        this.handleClick);
 4 }
 5 Listener.prototype.handleClick = function (event) {
 6     console.log(this); //logs "<div id="foo"></div>"
 7 }
 8 
 9 var listener = new Listener();
10 document.getElementById("foo").click();

• 除非你自己通過bind切換了上下文

 1 function Listener() {
 2     document.getElementById("foo").addEventListener("click", 
 3         this.handleClick.bind(this));
 4 }
 5 Listener.prototype.handleClick = function (event) {
 6     console.log(this); //logs Listener {handleClick: function}
 7 }
 8 
 9 var listener = new Listener();
10 document.getElementById("foo").click();

HTML this

• 在HTML節(jié)點(diǎn)的屬性里面，你可以放置JavaScript代碼，this指向了這個(gè)元素

1 <div id="foo" onclick="console.log(this);"></div>
2 <script type="text/javascript">
3 document.getElementById("foo").click(); //logs <div id="foo"...
4 </script>

override this

• 你不能重寫this，因?yàn)樗潜Ａ糇帧?/li>

1 function test () {
2     var this = {};  // Uncaught SyntaxError: Unexpected token this 
3 }
eval this

• 你可以通過eval來訪問this

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
}

var thing = new Thing();
thing.logFoo();

這會(huì)造成一個(gè)安全問題，除非不用eval，沒有其他方式來避免這個(gè)問題。

• 在通過Function來創(chuàng)建一個(gè)函數(shù)的時(shí)候，同樣能夠訪問this

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = new Function("console.log(this.foo);");

var thing = new Thing();
thing.logFoo(); //logs "bar"

with this

• 你可以通過with來將this添加到當(dāng)前的執(zhí)行環(huán)境，并且讀寫this的屬性的時(shí)候不需要通過this

 1 function Thing () {
 2 }
 3 Thing.prototype.foo = "bar";
 4 Thing.prototype.logFoo = function () {
 5     with (this) {
 6         console.log(foo);
 7         foo = "foo";
 8     }
 9 }
10 
11 var thing = new Thing();
12 thing.logFoo(); // logs "bar"
13 console.log(thing.foo); // logs "foo"

許多人認(rèn)為這樣使用是不好的因?yàn)閣ith本身就飽受爭議。

jQuery this

• 和HTML DOM元素節(jié)點(diǎn)的事件處理程序一樣，在許多情況下JQuery的this都指向HTML元素節(jié)點(diǎn)。這在事件處理程序和一些方便的方法中都是管用的，比如$.each

 1 <div class="foo bar1"></div>
 2 <div class="foo bar2"></div>
 3 <script type="text/javascript">
 4 $(".foo").each(function () {
 5     console.log(this); //logs <div class="foo...
 6 });
 7 $(".foo").on("click", function () {
 8     console.log(this); //logs <div class="foo...
 9 });
10 $(".foo").each(function () {
11     this.click();
12 });
13 </script>

thisArg this

如果你用過underscore.js 或者 lo-dash 你可能知道許多類庫的方法可以通過一個(gè)叫做thisArg 的函數(shù)參數(shù)來傳遞實(shí)例，這個(gè)函數(shù)參數(shù)會(huì)作為this的上下文。舉個(gè)例子，這適用于_.each。原生的JavaScript在ECMAScript 5的時(shí)候也允許函數(shù)傳遞一個(gè)thisArg參數(shù)了，比如forEach。事實(shí)上，之前闡述的bind，apply和call的使用已經(jīng)給你創(chuàng)造了傳遞thisArg參數(shù)給函數(shù)的機(jī)會(huì)。這個(gè)參數(shù)將this綁定為你所傳遞的對象。

 1 function Thing(type) {
 2     this.type = type;
 3 }
 4 Thing.prototype.log = function (thing) {
 5     console.log(this.type, thing);
 6 }
 7 Thing.prototype.logThings = function (arr) {
 8    arr.forEach(this.log, this); // logs "fruit apples..."
 9    _.each(arr, this.log, this); //logs "fruit apples..."
10 }
11 
12 var thing = new Thing("fruit");
13 thing.logThings(["apples", "oranges", "strawberries", "bananas"]);

這使得代碼變得更加簡介，因?yàn)楸苊饬艘淮蠖裝ind語句、函數(shù)嵌套和this暫存的使用。