原文：Understanding the "this" keyword in JavaScript
許多人被JavaScript中的this關鍵字給困擾住了，我想混亂的根源來自人們理所當然地認為JavaScript中的this應該像Java中的this或Python中的self一樣工作。盡管JavaScript的this有時有類似的效果，但它跟Java或其他語言中的this是完全不同的。盡管有點難理解，但它的原理并不神秘。事實上，this遵循一些簡單的小規則，這篇文章就對這些規則作出了解釋。
但首先，我想給出一些專業術語和一些JavaScript運行時環境的相關信息，希望能幫助你構建一個心智模型來更好的理解this。
執行上下文
每一行JavaScript代碼都運行在一個“執行上下文”中。JavaScript運行時環境用一個棧維持著這些上下文，棧頂的一個就是當前正在運行的執行上下文。
有三類可執行代碼：全局代碼（global code），函數代碼（function code），eval代碼（eval code）。大概的說，全局代碼是應用程序最頂層的代碼，不被包含在任何方法中，函數代碼是在函數（function）體中的代碼，eval代碼是被eval解釋的全局代碼。
this對象每次控制進入一個新的執行上下文時會被重新確定指向，直到控制切換到一個不同的上下文。this的值取決于兩件事：被執行的代碼的類型（global,function,eval）和調用代碼的對象。
全局對象
所有的JavaScript運行時都有一個唯一的全局對象。他的屬性包括內置的對象如Math和String，以及其他由主環境變量定義的屬性。
在瀏覽器中，全局對象是window對象。在Node.js中，它就叫作“global object”。（我假定你將在瀏覽器中運行代碼，然而，我所說的一切也同樣適用于Node.js。）
確定this的值
第一條規則很簡單：this指向全局對象在所有全局代碼中。由于所有的程序都是由執行全局代碼開始的，并且this在給定的執行上下文中會被修正，所以，默認的this指全局對象。
當控制進入一個新的執行上下文時發生了什么呢？只有三種this的值發生改變的情況：方法調用，new一個函數對象，函數被call和apply調用。我將逐一解釋。
方法調用
當我們通過點（例obj.foo()）或者方括號（例obj["foo"]）把一個方法作為一個對象的屬性來調用時，this將指向方法體的父對象：
var counter = {
val: 0,
increment: function () {
this.val += 1;
}
};
counter.increment();
console.log(counter.val); // 1
counter['increment']();
console.log(counter.val); // 2
這是第二條規則：函數被當作父對象的屬性來調用時，在函數代碼中的this指向函數的父對象。
注意，如果我們直接調用相同的方法，即，不作為父對象的屬性，this將不會指向counter對象：
var inc = counter.increment;
inc();
console.log(counter.val); // 2
console.log(val); // NaN
當inc被調用時，這里的this不會改變，所以它還是指向全局對象。
當inc執行
this.val += 1;
它等效于執行：
window.val += 1;
window.val是undefined，且undefined加1得到NaN。
new運算符
任何JavaScript函數都可以通過new運算符當成構造函數使用。new運算符創建一個新對象并且設置函數中的this指向調用函數的新對象。舉個栗子：
function F (v) {
this.val = v;
}
var f = new F("Woohoo!");
console.log(f.val); // Woohoo!
console.log(val); // ReferenceError
這就是我們的第三條規則：在用new運算符調用的函數代碼中的this指向新創建的對象。
注意F沒有任何特殊。如果不通過new調用，this將指向全局對象：
var f = F("Oops!");
console.log(f.val); // undefined
console.log(val); // Oops!
在這個例子中，F("Oops!")是一個通常調用，this沒有指向新的對象，因為沒有用new創建新的對象，this繼續指向全局對象。
Call & Apply
所有JavaScript函數都有兩個方法，call和apply，讓你能夠調用函數并且清楚的設置this指向的對象。apply函數有兩個參數：一個是this指向的對象，一個（可選）傳進函數的參數的數組：
var add = function (x, y) {
this.val = x + y;
},
obj = {
val: 0
};
add.apply(obj, [2, 8]);
console.log(obj.val); // 10
call方法和apply方法是完全一樣的，只不過要逐個的傳遞參數，而不是用一個數組：
add.call(obj, 2, 8);
console.log(obj.val); // 10
這是第四條規則：當使用call或apply調用函數時，函數代碼中的this被設置為call或apply中的第一個參數。
總結
- 默認的，
this指向全局對象 - 當一個函數被作為一個父對象的屬性調用時，函數中的
this指向父對象 - 當一個函數被
new運算符調用時，函數中的this指向新創建的對象 - 當使用
call或apply調用函數時，函數代碼中的this被設置為call或apply中的第一個參數。如果第一個參數是null或不是個對象，this指向全局對象。
如果你理解并接受了上面的4條規則，你就能明白this指的是什么了。
補充：eval打破上面所有規則
Remember when I said that code evaluated inside eval is its own type of executable code? Well, that’s true, and it means that the rules for determining what this refers to inside of eval code are a little more complex.
As a first pass, you might think that this directly inside eval refers to the same object as it does in eval’s caller’s context. For example:
var obj = {
val: 0,
func: function() {
eval("console.log(this.val)");
}
};
obj.func(); // 0
That works likely as you expect it to. However, there are many cases with eval where this will probably not work as you expect:
eval.call({val: 0}, "console.log(this.val)"); // depends on browser
The output of the above code depends on your browser. If your JavaScript runtime implements ECMAScript 5, this will refer to the global object and the above should print undefined, because it’s an “indirect” call of eval. That’s what the latest versions of Chrome and Firefox do. Safari 5.1 actually throws an error (“The ‘this’ value passed to eval must be the global object from which eval originated”), which is kosher according to ECMAScript 3.
If you want know how this works with eval, you should read Juriy Zaytsev’s excellent, “Global eval. What are the options?” You’ll learn more about eval, execution contexts, and direct vs. indirect calls than you probably ever wanted to know.
In general, you should just avoid using eval, in which case the simple rules about this given previously will always hold true.
