本來不想寫this的東西，因為實在是頭暈啊，講不清楚，JavaScript中的this真是讓人抓狂，好在我們調試的時候發現錯誤，修改就可以了。但是一位美女程序員給我推薦了一些文章，我就在這里總結一下吧。
所有的知識來自于這兩個牛人的博客和MDN
由于兩人都講的很好，但是又都有一些是對方沒講到的，所以在這里匯總一下。如果能答對下面題目的，可以略過此文了。
測試題目
有時候面試的時候就會有人問到很討厭的情況，我很想罵一聲，還能不能好好寫代碼。
測試題目1
請問下面打印出什么？
var obj = {
x: 10,
fn: function() {
function f() {
console.log(this);
console.log(this.x);
}
f();
}
};
obj.fn();
答案是window。
fn里面的函數f才是打印this的，所以fn中this還是obj，但是f在準備打印this的時候，this不是obj。提供一個寫解析器的思路：如果是全局環境，就是window，如果是對象調用，就是obj，如果不知道上下文環境，還是window吧。哈哈，不知道這樣說，大家覺得直觀不。這一個case我覺得還是很奇怪的，只有調試出錯了才好想起來。
測試題目2
下面打印什么？
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
var test = obj.prop.getFullname;
console.log(test());
答案是打印'John Doe'。
這個明顯可以套用萬能公式。因為test()的函數在全局環境中。console.log(obj.prop.getFullname());打印的是Aurelio De Rosa
測試題目3
下面的this是什么？
<button onclick="alert((function(){return this}}()));"> Show inner this</button>
<button onclick="alert(this.tagName.toLowerCase());"> Show this</button>
這一題在下面也有答案。兩個不同哦。
測試題目4
下面打印什么？
function a(xx) {
this.x = xx;
return this
};
var x = a(5);
var y = a(6);
console.log(x.x);
console.log(y.x);
很多人會說6......呵呵，x名稱在window下面被覆蓋了，x是6，但是x.x是undefined。答案是undefined，6。
this知識的總結
在JavaScript中，函數的this關鍵字的行為與其他語言相比有很多不同。在JavaScript的嚴格模式和非嚴格模式下也略有區別。
在絕大多數情況下，函數的調用方式決定了this的值。可以簡單理解為誰調用該函數，this就是誰；或者被調用時，函數上下文是誰，誰就是this（這兩句總結是我瞎掰的，對不對我們看看下面的例子）
全局上下文中的this
在全局運行上下文中（在任何函數體外部），this 指代全局對象，無論是否在嚴格模式下。
console.log(this.document === document); // true
// 在瀏覽器中，全局對象為 window 對象：
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
萬能公式：誰調用，誰是this，全局中調用，全局對象是this。
函數上下文
javascript除了全局作用域，就是函數作用域了（新的標準會有塊作用域let），但是作用域和執行上下文又不一樣，這個可以換一篇文章來說，this和執行上下文有關系嗎？當然有關系，但是執行上下文是啥玩意啊，有一篇文章寫的特別好，推薦一下簡述【執行上下文】，簡單描述一下，當函數準備運行的時候，準備下面這些數據：
- 變量、函數表達式變量“提升”聲明，默認賦值為undefined；
- this賦值；
- 函數聲明“提升”；
- 參數賦值
- arguments 賦值
- 自由變量（非本地變量）的取值作用域賦值，這里參見閉包或者作用域的知識。
數據的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。this的值就是在做這些準備工作的時候創建的。但是this賦值的規則是什么呢，我們看看下面。
構造函數中的this
所謂構造函數就是用來new對象的函數。其實嚴格來說，所有的函數都可以new一個對象，但是有些函數的定義是為了new一個對象，而有些函數則不是。另外注意，構造函數的函數名第一個字母大寫（規則約定）。例如：Object、Array、Function等。
function Foo(){
this.name = '王福民';
this.year = 1988;
console.log(this);
}
var f1 = new Foo();
那么我們看看構造函數怎么工作的
- 當一個函數被作為一個構造函數來使用（使用new關鍵字），它的this與即將被創建的新對象綁定。
- 沒有返回值的時候，返回的是this，有返回值的時候，就是返回的對象。所以默認情況下，構造函數就是返回this的。
//構造函數是這么工作的:
function MyConstructor(){
// Actual function body code goes here.
// Create properties on |this| as
// desired by assigning to them. E.g.,
this.fum = "nom";
// et cetera...
// If the function has a return statement that
// returns an object, that object will be the
// result of the |new| expression. Otherwise,
// the result of the expression is the object
// currently bound to |this|
// (i.e., the common case most usually seen).
}
上面的代碼我們可以這樣使用
f1.name;
f1.year;
對于這個規則，是不是很難記住啊。那就套用萬能公式：
誰調用函數，函數中的this就是誰：
new來調用構造函數，返回的this是創建的對象本身(如果你沒有指定返回值)，內部的this就是正在被創建的那個對象。
直接調用函數中的this
注意，以上僅限new Foo()的情況，即Foo函數作為構造函數的情況。如果直接調用Foo函數，而不是new Foo()，情況就大不一樣了。
-
非嚴格模式this就是全局對象
不是構造函數 -
嚴格模式this是undefined
嚴格模式
萬能公式：誰調用函數，函數this就是誰：
直接調用函數，this就是window了（非瀏覽器環境就是全局對象）。嚴格模式就是undefined
對象“方法”中的this
當以對象調用函數時，this 是調用該函數的對象.
下面的例子中，當 o.f() 被調用時，函數內的this將綁定到o對象。
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f()); // logs 37
注意，不在對象中定義函數也沒關系，因為this是在準備執行上下文中指定的（動態），和你在哪定義這種靜態的代碼位置沒有關系。
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f()); // logs 37
this 的綁定只受最靠近的成員引用的影響。
o.b = {
g: independent,
prop: 42
};
console.log(o.b.g()); // logs 42
原型鏈中的 this也是一樣。
var o = {
f : function(){
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
getter 與 setter 中的 this也一樣
function modulus(){
return Math.sqrt(this.re * this.re + this.im * this.im);
}
var o = {
re: 1,
im: -1,
get phase(){
return Math.atan2(this.im, this.re);
}
};
Object.defineProperty(o, 'modulus', {
get: modulus, enumerable:true, configurable:true});
console.log(o.phase, o.modulus); // logs -0.78 1.4142
這么多，怎么記呢。萬能公式：誰調用函數，this就是誰。對象調用函數，對象就是this
call 和 apply
當一個函數的函數體中使用了this關鍵字時，通過所有函數都從Function對象的原型中繼承的call()方法和apply()方法調用時，它的值可以綁定到一個指定的對象上。
當一個函數的函數體中使用了this關鍵字時，通過所有函數都從Function對象的原型中繼承的call()方法和apply()方法調用時，它的值可以綁定到一個指定的對象上。
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
// The first parameter is the object to use as 'this', subsequent parameters are passed as
// arguments in the function call
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
// The first parameter is the object to use as 'this', the second is an array whose
// members are used as the arguments in the function call
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
使用 call 和 apply 函數的時候要注意，如果傳遞的 this 值不是一個對象，JavaScript 將會嘗試使用內部 ToObject 操作將其轉換為對象。因此，如果傳遞的值是一個原始值比如 7 或 'foo' ，那么就會使用相關構造函數將它轉換為對象，所以原始值 7 通過new Number(7)被轉換為對象，而字符串'foo'使用 new String('foo') 轉化為對象，例如：
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
王炸：bind 方法
ECMAScript 5 引入了 Function.prototype.bind。調用f.bind(someObject)會創建一個與f具有相同函數體和作用域的函數，但是在這個新函數中，this將永久地被綁定到了bind的第一個參數，無論這個函數是如何被調用的。
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var o = {a:37, f:f, g:g};
console.log(o.f(), o.g()); // 37, azerty
DOM事件處理函數中的 this
當函數被用作事件處理函數時，它的this指向觸發事件的元素
// 被調用時，將關聯的元素變成藍色
function bluify(e){
console.log(this === e.currentTarget); // 總是 true
// 當 currentTarget 和 target 是同一個對象是為 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 將bluify作為元素的點擊監聽函數，當元素被點擊時，就會變成藍色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
內聯事件處理函數中的 this
當代碼被內聯處理函數調用時，它的this指向監聽器所在的DOM元素：
<button onclick="alert(this.tagName.toLowerCase());"> Show this</button>
上面的alert會顯示button。注意只有外層代碼中的this是這樣設置的：
<button onclick="alert((function(){return this}}()));"> Show inner this</button>
在這種情況下，沒有設置內部函數的 this
，所以它指向 global/window
對象（即非嚴格模式下調用的函數未設置 this 時指向的默認對象）。
總結
上面例舉了很多情況，我們看看萬能公式還能用否。誰調用函數，誰就是this。下面的的誰調用，也可以理解為所有者，或者環境。
|誰調用|this是誰|this是否是調用者|
|---|---|
|全局上下文調用函數或者使用this|window或者全局對象|是|
|new 構造函數|構造的對象|是|
|直接調用函數|window或者undefied|除了strict模式，都是|
|對象方法中的this|對象|是|
|call或者apply|第一個參數|不是|
|bind方法|第一個參數|不是|
|DOM中的this|觸發操作的元素|外層this是監聽器的元素，算是，內層不是|
