本來不想寫this的東西耻蛇，因為實在是頭暈啊蜗侈，講不清楚纤子，JavaScript中的this真是讓人抓狂搬瑰，好在我們調(diào)試的時候發(fā)現(xiàn)錯誤，修改就可以了控硼。但是一位美女程序員給我推薦了一些文章泽论，我就在這里總結(jié)一下吧。
所有的知識來自于這兩個牛人的博客和MDN
- 廖雪峰的官方網(wǎng)站
- 王福民的博客
- 我的最愛MDN
由于兩人都講的很好卡乾，但是又都有一些是對方?jīng)]講到的翼悴，所以在這里匯總一下。如果能答對下面題目的幔妨，可以略過此文了鹦赎。
測試題目
有時候面試的時候就會有人問到很討厭的情況，我很想罵一聲误堡，還能不能好好寫代碼古话。
測試題目1
請問下面打印出什么？
var obj = {
x: 10,
fn: function() {
function f() {
console.log(this);
console.log(this.x);
}
f();
}
};
obj.fn();
答案是window锁施。
fn里面的函數(shù)f才是打印this的陪踩，所以fn中this還是obj，但是f在準(zhǔn)備打印this的時候悉抵，this不是obj肩狂。提供一個寫解析器的思路：如果是全局環(huán)境，就是window基跑，如果是對象調(diào)用婚温，就是obj，如果不知道上下文環(huán)境媳否，還是window吧栅螟。哈哈，不知道這樣說篱竭，大家覺得直觀不力图。這一個case我覺得還是很奇怪的，只有調(diào)試出錯了才好想起來掺逼。
測試題目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()的函數(shù)在全局環(huán)境中赘那。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知識的總結(jié)
在JavaScript中，函數(shù)的this關(guān)鍵字的行為與其他語言相比有很多不同鸯乃。在JavaScript的嚴(yán)格模式和非嚴(yán)格模式下也略有區(qū)別鲸阻。
在絕大多數(shù)情況下，函數(shù)的調(diào)用方式?jīng)Q定了this的值飒责。可以簡單理解為誰調(diào)用該函數(shù)赘娄，this就是誰；或者被調(diào)用時宏蛉，函數(shù)上下文是誰，誰就是this（這兩句總結(jié)是我瞎掰的性置，對不對我們看看下面的例子）
全局上下文中的this
在全局運行上下文中（在任何函數(shù)體外部）拾并，this 指代全局對象，無論是否在嚴(yán)格模式下鹏浅。
console.log(this.document === document); // true
// 在瀏覽器中嗅义，全局對象為 window 對象：
console.log(this === window); // true
this.a = 37;
console.log(window.a); // 37
萬能公式：誰調(diào)用，誰是this隐砸，全局中調(diào)用之碗，全局對象是this。
函數(shù)上下文
javascript除了全局作用域季希，就是函數(shù)作用域了（新的標(biāo)準(zhǔn)會有塊作用域let）褪那，但是作用域和執(zhí)行上下文又不一樣，這個可以換一篇文章來說式塌，this和執(zhí)行上下文有關(guān)系嗎博敬？當(dāng)然有關(guān)系，但是執(zhí)行上下文是啥玩意啊峰尝，有一篇文章寫的特別好偏窝，推薦一下簡述【執(zhí)行上下文】，簡單描述一下，當(dāng)函數(shù)準(zhǔn)備運行的時候祭往，準(zhǔn)備下面這些數(shù)據(jù)：
- 變量伦意、函數(shù)表達式變量“提升”聲明，默認賦值為undefined硼补；
- this賦值默赂；
- 函數(shù)聲明“提升”；
- 參數(shù)賦值
- arguments 賦值
- 自由變量（非本地變量）的取值作用域賦值括勺，這里參見閉包或者作用域的知識缆八。
數(shù)據(jù)的準(zhǔn)備情況我們稱之為“執(zhí)行上下文”或者“執(zhí)行上下文環(huán)境”。this的值就是在做這些準(zhǔn)備工作的時候創(chuàng)建的疾捍。但是this賦值的規(guī)則是什么呢奈辰，我們看看下面。
構(gòu)造函數(shù)中的this
所謂構(gòu)造函數(shù)就是用來new對象的函數(shù)乱豆。其實嚴(yán)格來說奖恰，所有的函數(shù)都可以new一個對象，但是有些函數(shù)的定義是為了new一個對象宛裕，而有些函數(shù)則不是瑟啃。另外注意，構(gòu)造函數(shù)的函數(shù)名第一個字母大寫（規(guī)則約定）揩尸。例如：Object蛹屿、Array、Function等岩榆。
function Foo(){
this.name = '王福民';
this.year = 1988;
console.log(this);
}
var f1 = new Foo();
那么我們看看構(gòu)造函數(shù)怎么工作的
- 當(dāng)一個函數(shù)被作為一個構(gòu)造函數(shù)來使用（使用new關(guān)鍵字）错负，它的this與即將被創(chuàng)建的新對象綁定。
- 沒有返回值的時候勇边，返回的是this犹撒，有返回值的時候，就是返回的對象粒褒。所以默認情況下识颊，構(gòu)造函數(shù)就是返回this的。
//構(gòu)造函數(shù)是這么工作的:
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;
對于這個規(guī)則奕坟，是不是很難記住啊祥款。那就套用萬能公式：
誰調(diào)用函數(shù)，函數(shù)中的this就是誰：
new來調(diào)用構(gòu)造函數(shù)执赡，返回的this是創(chuàng)建的對象本身(如果你沒有指定返回值)镰踏，內(nèi)部的this就是正在被創(chuàng)建的那個對象。
直接調(diào)用函數(shù)中的this
注意沙合，以上僅限new Foo()的情況奠伪，即Foo函數(shù)作為構(gòu)造函數(shù)的情況跌帐。如果直接調(diào)用Foo函數(shù)，而不是new Foo()绊率，情況就大不一樣了谨敛。
-
非嚴(yán)格模式this就是全局對象
不是構(gòu)造函數(shù) -
嚴(yán)格模式this是undefined
嚴(yán)格模式
萬能公式：誰調(diào)用函數(shù)，函數(shù)this就是誰：
直接調(diào)用函數(shù)滤否，this就是window了（非瀏覽器環(huán)境就是全局對象）脸狸。嚴(yán)格模式就是undefined
對象“方法”中的this
當(dāng)以對象調(diào)用函數(shù)時，this 是調(diào)用該函數(shù)的對象.
下面的例子中藐俺，當(dāng) o.f() 被調(diào)用時炊甲，函數(shù)內(nèi)的this將綁定到o對象。
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f()); // logs 37
注意欲芹，不在對象中定義函數(shù)也沒關(guān)系卿啡，因為this是在準(zhǔn)備執(zhí)行上下文中指定的（動態(tài)），和你在哪定義這種靜態(tài)的代碼位置沒有關(guān)系菱父。
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
這么多浙宜，怎么記呢官辽。萬能公式：誰調(diào)用函數(shù)，this就是誰粟瞬。對象調(diào)用函數(shù)同仆，對象就是this
call 和 apply
當(dāng)一個函數(shù)的函數(shù)體中使用了this關(guān)鍵字時，通過所有函數(shù)都從Function對象的原型中繼承的call()方法和apply()方法調(diào)用時亩钟，它的值可以綁定到一個指定的對象上乓梨。
當(dāng)一個函數(shù)的函數(shù)體中使用了this關(guān)鍵字時，通過所有函數(shù)都從Function對象的原型中繼承的call()方法和apply()方法調(diào)用時清酥，它的值可以綁定到一個指定的對象上。
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 函數(shù)的時候要注意蕴侣，如果傳遞的 this 值不是一個對象焰轻，JavaScript 將會嘗試使用內(nèi)部 ToObject 操作將其轉(zhuǎn)換為對象。因此昆雀，如果傳遞的值是一個原始值比如 7 或 'foo' 辱志，那么就會使用相關(guān)構(gòu)造函數(shù)將它轉(zhuǎn)換為對象，所以原始值 7 通過new Number(7)被轉(zhuǎn)換為對象狞膘，而字符串'foo'使用 new String('foo') 轉(zhuǎn)化為對象揩懒，例如：
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
王炸：bind 方法
ECMAScript 5 引入了 Function.prototype.bind。調(diào)用f.bind(someObject)會創(chuàng)建一個與f具有相同函數(shù)體和作用域的函數(shù)挽封，但是在這個新函數(shù)中已球，this將永久地被綁定到了bind的第一個參數(shù)，無論這個函數(shù)是如何被調(diào)用的。
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事件處理函數(shù)中的 this
當(dāng)函數(shù)被用作事件處理函數(shù)時智亮，它的this指向觸發(fā)事件的元素
// 被調(diào)用時忆某，將關(guān)聯(lián)的元素變成藍色
function bluify(e){
console.log(this === e.currentTarget); // 總是 true
// 當(dāng) currentTarget 和 target 是同一個對象是為 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 獲取文檔中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 將bluify作為元素的點擊監(jiān)聽函數(shù)，當(dāng)元素被點擊時阔蛉，就會變成藍色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
內(nèi)聯(lián)事件處理函數(shù)中的 this
當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時弃舒，它的this指向監(jiān)聽器所在的DOM元素：
<button onclick="alert(this.tagName.toLowerCase());"> Show this</button>
上面的alert會顯示button。注意只有外層代碼中的this是這樣設(shè)置的：
<button onclick="alert((function(){return this}}()));"> Show inner this</button>
在這種情況下状原，沒有設(shè)置內(nèi)部函數(shù)的 this
聋呢，所以它指向 global/window
對象（即非嚴(yán)格模式下調(diào)用的函數(shù)未設(shè)置 this 時指向的默認對象）。
總結(jié)
上面例舉了很多情況颠区，我們看看萬能公式還能用否削锰。誰調(diào)用函數(shù)，誰就是this瓦呼。下面的的誰調(diào)用喂窟，也可以理解為所有者，或者環(huán)境央串。
|誰調(diào)用|this是誰|this是否是調(diào)用者|
|---|---|
|全局上下文調(diào)用函數(shù)或者使用this|window或者全局對象|是|
|new 構(gòu)造函數(shù)|構(gòu)造的對象|是|
|直接調(diào)用函數(shù)|window或者undefied|除了strict模式磨澡，都是|
|對象方法中的this|對象|是|
|call或者apply|第一個參數(shù)|不是|
|bind方法|第一個參數(shù)|不是|
|DOM中的this|觸發(fā)操作的元素|外層this是監(jiān)聽器的元素，算是质和，內(nèi)層不是|
