近期羣裏常有人提一些簡單的問題，比如發一段代碼亂七八糟的代碼，然後說裏面某個變量是什麼，比如這裏就有個很好的例子：
alert(this.arg);
alert(this);
}
fn(123);
var o = { fn: fn };
o.fn(123);
然後就可能有這樣的問題：
爲什麼this.arg是undefined？爲什麼2次調用fn的this是不一樣的？
爲此，我覺得自己作爲一個雖然不成熟的前端，對於一些自己力所能及的事情，還是應該傳道授業解惑的。所以，這篇文章，計劃從非常膚淺的層面上，來解釋一下javascript中的對象查找是如何進行的。
注意，本篇文章只是從表象上來介紹對象查找這一行爲的過程，文章中的觀點並不全正確，甚至存在着一些謬誤，但是這也是爲了讓初學者更好地理解對象查找這一過程。相信如果說得太過抽象、深入，反而會引起一些負面效果。如果有一天，你再回過來，發現這個文章說得並不那麼正確，那麼恭喜你，那個時候的你已經可以找到正確前進的道路，這篇中的錯誤也不會再對你有任何影響。
對象的分類
所謂對象查找，即在一段可執行代碼的作用域內，找到一個當前需要的對象。在javascript中，需要進行查找的對象大致可以分爲3種類型：
- 變量查找，如
foo++;，這裏就會去查找一個叫作foo的變量。 - 屬性查找，如
foo.bar++;，這裏會去查找foo這個變量下的一個叫作bar的屬性。 - this查找，即針對this關鍵字的處理。
區分這3種類型的對象查找是首先要完成的任務，你可以基於以下原則進行判斷：
- 變量僅由變量名組成，即單獨的foo、bar等。
- 屬性永遠由2種形式去訪問，即
foo.bar和foo['bar']，因此看到有“.”或“[]”即可當成是屬性查找。 - this就不用說了，好好的關鍵字。
看一下這段代碼：
foo.bar();
這2行的代碼就體現了3種對象查找，分別爲：
- 查找this對象，並賦值給foo變量。
- 查看foo變量。
- 查找foo變量下的bar屬性，並將之作爲一個函數進行調用。
變量的查找
當確定一個對象的查找爲變量查找後，可以按照變量查找的規則來查看。
變量查找，即在作用域鏈上進行查找，作用域鏈是javascript非常著名的2條鏈之一，以下代碼體現一個標準的作用域鏈：
function a() {
var bar = 2;
function b() {
foo = 3;
function c() {
alert(foo + ',' + bar); // 注意這一行
}
c();
}
b();
}
a();
在c函數中，一共進行了2個變量的查找，分別爲foo和bar。
變量的查找可以簡單地遵守“從下向上”的原則，即：
- 在函數c的範圍內查找foo和bar，顯然在c裏面並沒有foo和bar的聲明，查找失敗。
- 在包含c的函數，即函數b的範圍內查找foo和bar，可以看到b裏面只有對foo的賦值，並沒有聲明，查找失敗。
- 在包括b的函數，即函數a的範圍內查找foo和bar，可以找到bar的聲明，因此確定bar爲2。
- 由於a不被任何函數包含，那麼就在全局作用域內查找foo，發現有foo的聲明，因此確定foo的值爲1。但是由於在函數b中，對這個foo有賦值，所以foo的值被修改爲3。
- 完確定foo的值爲3，bar的值爲2，因此輸出
"3,2"。
總結一下，變量的查找是延着作用域鏈進行的，作用域鏈可以簡單地看成函數間的包含關係，被包含的函數中不存在某個變量時，在包含他的函數中查找，直到全局作用域。
屬性的查找
當確定一個對象的查找爲屬性查找後，可以按照屬性查找的規則來查看。
屬性查找，即在原型鏈上進行查找，原型鏈是javascript雙鏈的另一條，以下可以表示出一個原型鏈：
var b = function() {};
var c = function() {};
b.prototype = new a();
c.prototype = new b();
a.prototype.foo = 1;
b.prototype.bar = 2;
c.prototype.foo = 3;
var o = new c();
alert(o.foo + ',' + o.bar); // 這一行進行查找
屬性查找是一個不斷尋找prototype的過程，即：
- 查找
c.prototype中，有沒有顯示定義foo和和bar，發現定義了foo，其值爲3。 - 發現
c.prototype就是new b()得到的對象，那麼查找b.prototype中，有沒有顯示定義bar，發現定義了，其值爲2。 - 因此確定foo的值爲3，bar的值爲2，輸出
"3,2"。
總結一下，屬性查找是延着原型鏈進行的，原型鏈的具體知識這裏不作詳細解釋，可以另找文章進行參考。所有的對象，其原型鏈最終會是Object.prototype。
this的查找
this的查找是很多人迷茫的一點，也似乎有很多人抱有this不穩定
這樣的看法，實在令人無語。this的查找可以說是3種對象查找中最爲簡單的，因爲其實this對象的確定根本沒有一個“查找”的過程。
首先，this對象只會在一個函數中需要確定，如果是在全局域下，this永遠爲Global對象，在瀏覽器中通常就是window對象。而在javascript中，函數的調用一共有4種方式：
- Function Invocation Pattern
-
諸如`foo()`的調用形式被稱爲Function Invocation Pattern，是函數最直接的使用形式，注意這裏的foo是作爲單獨的變量出現，而不是屬性。
在這種模式下，foo函數體中的this永遠爲Global對象，在瀏覽器中就是window對象。
- Method Invocation Pattern
-
諸如`foo.bar()`的調用形式被稱爲Method Invocation Pattern，注意其特點是被調用的函數作爲一個對象的屬性出現，必然會有“.”或者“[]”這樣的關鍵符號。
在這種模式下，bar函數體中的this永遠爲“.”或“[”前的那個對象，如上例中就一定是foo對象。
- Constructor Pattern
-
`new foo()`這種形式的調用被稱爲Constructor Pattern，其關鍵字`new`就很能說明問題，非常容易識別。
在這種模式下，foo函數內部的this永遠是new foo()返回的對象。
- Apply Pattern
-
`foo.call(thisObject)`和`foo.apply(thisObject)`的形式被稱爲Apply Pattern，使用了內置的`call`和`apply`函數。
在這種模式下，`call`和`apply`的第一個參數就是foo函數體內的this，如果thisObject是`null`或`undefined`，那麼會變成Global對象。
應用以上4種方式，確定一個函數是使用什麼樣的Pattern進行調用的，就能很容易確定this是什麼。
另外，this是永遠不會延作用域鏈或原型鏈出現一個“查找”的過程的，只會在函數調用時就完全確認。
總結
對於一個對象的查找：
- 確定是變量查找、屬性查找還是this查找。
- 如果是變量查找，則延作用域鏈找，找不到就是ReferenceError。
- 如果是屬性查找，就延原型鏈找，找歪以就是undefined。
- 如果是this查找，去找調用函數的代碼，根據調用的形式來確定this是什麼。
-
注意把一次查找過程拆分開來，比如
this.foo.bar.yahoo()，可以拆分成這樣的代碼，就能更清楚了：var o = this; // this查找
var foo = o.this; // 屬性查找
var bar = foo.bar; // 屬性查找
bar.yahoo(); // 屬性查找，加Method Invocation Pattern
最後，如果有一天你可以瞭解這些東西，這篇文章對你用戶也就不大了：
- 爲什麼延作用域查找不到會有ReferenceError。
- 其實變量也是屬性，一個特殊對象的屬性。
- this也許不是Global，也許會是undefined。
