this關(guān)鍵字相信大家都非常熟悉，js中提供的this關(guān)鍵在要比oo語(yǔ)言中混亂，下面通過(guò)本文給大家介紹js里this關(guān)鍵字的理解，需要的朋友可以參考下

this關(guān)鍵字在c++，java中都提供了這個(gè)關(guān)鍵字，在剛開(kāi)始學(xué)習(xí)時(shí)覺(jué)得有難度，但是只要理解了，用起來(lái)就方便多了，下面通過(guò)本篇文章給大家詳解js里this關(guān)鍵字的理解。

關(guān)于this，是很多前端面試必考的題目，有時(shí)候在網(wǎng)上看到這些題目，自己試了一下，額，還真的錯(cuò)了!在實(shí)際開(kāi)發(fā)中，也會(huì)遇到 this 的問(wèn)題(雖然一些類(lèi)庫(kù)會(huì)幫我們處理)，例如在使用一些框架的時(shí)候，例如:knockout，有時(shí)候不明白為什么不直接使用this,而要把 this 作為參數(shù)傳入。

接下來(lái)你談?wù)勎覍?duì)它的理解，也作為一個(gè)筆記，方便以后參閱。有不對(duì)的地方，歡迎指出批評(píng)。

1. 不像C#，this一定是指向當(dāng)前對(duì)象。

js的this指向是不確定的，也就是說(shuō)是可以動(dòng)態(tài)改變的。call/apply 就是用于改變this指向的函數(shù)，這樣設(shè)計(jì)可以讓代碼更加靈活，復(fù)用性更高。

2. this 一般情況下，都是指向函數(shù)的擁有者。

這一點(diǎn)很重要!這一點(diǎn)很重要!這一點(diǎn)很重要!

這也是一道常見(jiàn)的面試題，如下代碼：

1. <script type="text/javascript"> 
2. 　　var number = 1; 
3. 　　var obj = { 
4. 　　 number: 2, 
5. 　　showNumber: function(){ 
6. 　　this.number = 3; 
7. 　　(function(){  
8. 　　console.log(this.number); 
9. 　　})(); 
10. 　　console.log(this.number); 
11. 　　} 
12. 　　}; 
13. 　　obj.showNumber(); 
14. </script> 

由于showNumber方法的擁有者是obj，所以this.number=3; this 指向的就是 obj 的屬性 number。

同理，第二個(gè) console.log 打印的也是屬性 number。

為什么第二點(diǎn)說(shuō)一般情況下this都是指向函數(shù)的擁有者，因?yàn)橛刑厥馇闆r。函數(shù)自執(zhí)行就是特殊情況，在函數(shù)自執(zhí)行里，this 指向的是：window。所以第一個(gè) console.log 打印的是 window 的屬性 number。

所以要加一點(diǎn)：

3. 在函數(shù)自執(zhí)行里，this 指向的是 window 對(duì)象。

擴(kuò)展，關(guān)于this，還有一個(gè)地方比較讓人模糊的是在 dom 事件里，通常有如下3種情況：

如下：

1. 使用標(biāo)簽屬性注冊(cè)事件，此時(shí)this 指向的是 window 對(duì)象。

1. <input id="test" type="button" value="按鈕" onClick="test()"/> 
2. function test(){alert(this)} 

2. 對(duì)于1，要讓 this 指向 input，可以將 this 作為參數(shù)傳遞。

3. 使用 addEventListener 等注冊(cè)。此時(shí)this 也是指向 input。

1. document.getElementById("test").addEventListener("click",test); 

在面向?qū)ο缶幊陶Z(yǔ)言中，對(duì)于this關(guān)鍵字我們是非常熟悉的。比如C++、C#和Java等都提供了這個(gè)關(guān)鍵字，雖然在開(kāi)始學(xué)習(xí)的時(shí)候覺(jué)得比較難，但只要理解了，用起來(lái)是非常方便和意義確定的。JavaScript也提供了這個(gè)this關(guān)鍵字，不過(guò)用起來(lái)就比經(jīng)典OO語(yǔ)言中要"混亂"的多了。

下面就來(lái)看看，在JavaScript中各種this的使用方法有什么混亂之處?

1、在HTML元素事件屬性中inline方式使用this關(guān)鍵字：

1. // 可以在里面使用this  
2. ">division element  
3. // 可以在里面使用this 
4. ">division element  

我們一般比較常用的方法是在此使用：javascirpt: EventHandler(this)，這樣的形式。不過(guò)這里其實(shí)可以寫(xiě)任何合法的JavaScript語(yǔ)句，要是高興在此定義個(gè)類(lèi)也可以(不過(guò)將會(huì)是個(gè)內(nèi)部類(lèi))。這里的原理是腳本引擎生成了一個(gè)div實(shí)例對(duì)象的匿名成員方法，而onclick指向這個(gè)方法。

2、用DOM方式在事件處理函數(shù)中使用this關(guān)鍵字：

1. division element 
2.  
3. var div = document.getElementById('elmtDiv');  
4. div.attachEvent('onclick', EventHandler);  
5.  
6. function EventHandler()  
7. {  
8. // 在此使用this  
9. }  
10.  
11. // -->  
12.  
13. division element 
14.  
15. var div = document.getElementById('elmtDiv'); 
16. div.attachEvent('onclick', EventHandler); 
17.  
18. function EventHandler() 
19. { 
20. // 在此使用this 
21. } 
22.  
23. // --> 

這時(shí)的EventHandler()方法中的this關(guān)鍵字，指示的對(duì)象是IE的window對(duì)象。這是因?yàn)镋ventHandler只是一個(gè)普通的函數(shù)，對(duì)于attachEvent后，腳本引擎對(duì)它的調(diào)用和div對(duì)象本身沒(méi)有任何的關(guān)系。同時(shí)你可以再看看EventHandler的caller屬性，它是等于null的。如果我們要在這個(gè)方法中獲得div對(duì)象引用，應(yīng)該使用：this.event.srcElement。

3、用DHTML方式在事件處理函數(shù)中使用this關(guān)鍵字：

1. division element 
2.  
3. lt;mce:script language="javascript"> 
4. var div = document.getElementById('elmtDiv');  
5. div.onclick = function()  
6. {  
7. // 在此使用this  
8. };  
9.  
10. / -->  
11.  
12. division element 
13.  
14. var div = document.getElementById('elmtDiv'); 
15. div.onclick = function() 
16. { 
17. // 在此使用this 
18. }; 
19.  
20. // --> 

這里的this關(guān)鍵字指示的內(nèi)容是div元素對(duì)象實(shí)例，在腳本中使用DHTML方式直接為div.onclick賦值一個(gè)EventHandler的方法，等于為div對(duì)象實(shí)例添加一個(gè)成員方法。這種方式和第一種方法的區(qū)別是，第一種方法是使用HTML方式，而這里是DHTML方式，后者腳本解析引擎不會(huì)再生成匿名方法。

4、類(lèi)定義中使用this關(guān)鍵字：

1. function JSClass()  
2. {  
3. var myName = 'jsclass';  
4. this.m_Name = 'JSClass';  
5. }  
6.  
7. JSClass.prototype.ToString = function()  
8. {  
9. alert(myName + ', ' + this.m_Name);  
10. };  
11.  
12. var jc = new JSClass();  
13. jc.ToString();  
14. function JSClass() 
15. { 
16. var myName = 'jsclass'; 
17. this.m_Name = 'JSClass'; 
18. } 
19.  
20. JSClass.prototype.ToString = function() 
21. { 
22. alert(myName + ', ' + this.m_Name); 
23. }; 
24.  
25. var jc = new JSClass(); 
26. jc.ToString(); 

這是JavaScript模擬類(lèi)定義中對(duì)this的使用，這個(gè)和其它的OO語(yǔ)言中的情況非常的相識(shí)。但是這里要求成員屬性和方法必須使用this關(guān)鍵字來(lái)引用，運(yùn)行上面的程序會(huì)被告知myName未定義。

5、為腳本引擎內(nèi)部對(duì)象添加原形方法中的this關(guān)鍵字：

1. function.prototype.GetName = function()  
2. {  
3. var fnName = this.toString();  
4. fnName = fnName.substr(0, fnName.indexOf('('));  
5. fnName = fnName.replace(/^function/, '');  
6. return fnName.replace(/(^/s+)|(/s+$)/g, '');  
7. }  
8. function foo(){}  
9. alert(foo.GetName());  
10. function.prototype.GetName = function() 
11. { 
12. var fnName = this.toString();  
13. fnName = fnName.substr(0, fnName.indexOf('('));  
14. fnName = fnName.replace(/^function/, '');  
15. return fnName.replace(/(^/s+)|(/s+$)/g, ''); 
16. } 
17. function foo(){} 
18. alert(foo.GetName()); 

這里的this指代的是被添加原形的類(lèi)的實(shí)例，和4中類(lèi)定義有些相似，沒(méi)有什么太特別的地方。

6、結(jié)合2&4，說(shuō)一個(gè)比較迷惑的this關(guān)鍵字使用：

1. view plaincopy to clipboardprint? 
2. function JSClass()  
3. {  
4. this.m_Text = 'division element';  
5. this.m_Element = document.createElement('DIV');  
6. this.m_Element.innerHTML = this.m_Text;  
7.  
8. this.m_Element.attachEvent('onclick', this.ToString);  
9. }  
10.  
11. JSClass.prototype.Render = function()  
12. {  
13. document.body.appendChild(this.m_Element);  
14. }  
15.  
16. JSClass.prototype.ToString = function()  
17. {  
18. alert(this.m_Text);  
19. };  
20.  
21. var jc = new JSClass();  
22. jc.Render();  
23. jc.ToString();  
24. function JSClass() 
25. { 
26. this.m_Text = 'division element'; 
27. this.m_Element = document.createElement('DIV'); 
28. this.m_Element.innerHTML = this.m_Text; 
29.  
30. this.m_Element.attachEvent('onclick', this.ToString); 
31. } 
32.  
33. JSClass.prototype.Render = function() 
34. { 
35. document.body.appendChild(this.m_Element); 
36. }  
37.  
38. JSClass.prototype.ToString = function() 
39. { 
40. alert(this.m_Text); 
41. }; 
42.  
43. var jc = new JSClass(); 
44. jc.Render();  
45. jc.ToString(); 

我就說(shuō)說(shuō)結(jié)果，頁(yè)面運(yùn)行后會(huì)顯示："division element"，確定后點(diǎn)擊文字"division element"，將會(huì)顯示："undefined"。

7、CSS的expression表達(dá)式中使用this關(guān)鍵字：

1. height: expression(this.parentElement.height);">  
2. division element  
3.  
4. height: expression(this.parentElement.height);"> 
5. division element 

這里的this看作和1中的一樣就可以了，它也是指代div元素對(duì)象實(shí)例本身。

8、函數(shù)中的內(nèi)部函數(shù)中使用this關(guān)鍵字：

1. view plaincopy to clipboardprint? 
2. function OuterFoo()  
3. {  
4. this.Name = 'Outer Name';  
5.  
6. function InnerFoo()  
7. {  
8. var Name = 'Inner Name';  
9. alert(Name + ', ' + this.Name);  
10. }  
11. return InnerFoo;  
12. }  
13. OuterFoo()();  
14. function OuterFoo() 
15. { 
16. this.Name = 'Outer Name'; 
17.  
18. function InnerFoo() 
19. { 
20. var Name = 'Inner Name';  
21. alert(Name + ', ' + this.Name); 
22. } 
23. return InnerFoo; 
24. } 
25. OuterFoo()(); 

運(yùn)行結(jié)果顯示是："Inner Name, Outer Name"。按我們?cè)?中的講解，這里的結(jié)果如果是"Inner Name, undefined"似乎更合理些吧?但是正確的結(jié)果確實(shí)是前者，這是由于JavaScript變量作用域的問(wèn)題決定的，詳細(xì)了解推薦參看"原來(lái)JScript中的關(guān)鍵字'var'還是有文章的"一文及回復(fù)。

歸納起來(lái)，JavaScript中的this用法有以下3種（詳細(xì)用法參原文）：

1.在HTML元素事件屬性 或 CSS的expression表達(dá)式 中inline方式使用this關(guān)鍵字——對(duì)應(yīng)原文的1、7

2.在事件處理函數(shù)中使用this關(guān)鍵字——對(duì)應(yīng)原文的2、3

其中可分為兩種方式

(1)DOM方式——此種方式的結(jié)果是this指向窗口(window)對(duì)象

(2)DHTML方式——此種方式的結(jié)果是this指向div元素對(duì)象實(shí)例

3.在類(lèi)定義中使用this關(guān)鍵字并在其 內(nèi)部函數(shù) 或 成員函數(shù)(主要是prototype產(chǎn)生)中使用——對(duì)應(yīng)原文的4、5、8

需要說(shuō)明的是，在函數(shù)也是個(gè)對(duì)象，因此需要區(qū)分 變量定義 和 成員變量定義，如下：

1. view plaincopy to clipboardprint? 
2.  
3. var variableName; //變量定義  
4. //作用域：函數(shù)定義范圍內(nèi)  
5. //使用方法：直接使用variableName  
6. this.varName; //成員變量定義  
7. //作用域：函數(shù)對(duì)象定義范圍內(nèi)及其成員函數(shù)中  
8. //使用方法：this.varName  
9. var variableName; //變量定義 
10. //作用域：函數(shù)定義范圍內(nèi) 
11. //使用方法：直接使用variableName 
12. this.varName; //成員變量定義 
13. //作用域：函數(shù)對(duì)象定義范圍內(nèi)及其成員函數(shù)中 
14. //使用方法：this.varName 

以上歸納出的三類(lèi)this的使用方法中，第一種比較容易理解，這里對(duì)原文中第6點(diǎn)提到的程序進(jìn)行了測(cè)試和改進(jìn)如下，以說(shuō)明上述后兩種使用方法：

1. view plaincopy to clipboardprint? 
2.  
3. function JSClass()  
4. {  
5. var varText = "func variable!"; //函數(shù)中的普通變量  
6. this.m_Text = 'func member!'; //函數(shù)類(lèi)的成員變量  
7. this.m_Element = document.createElement('DIV'); //成員變量，創(chuàng)建一個(gè)div對(duì)象  
8. this.m_Element.innerHTML = varText; //使用函數(shù)的普通變量  
9. this.m_Element.attachEvent('onclick', this.ToString); //給這個(gè)對(duì)象的事件連上處理函數(shù)  
10. this.newElement = document.createElement('DIV');  
11. this.newElement.innerHTML = "new element";  
12. this.newElement.m_Text = "new element text!"; //給創(chuàng)建的對(duì)象建個(gè)成員  
13. this.newElement.onclick = function()  
14. {  
15. alert(this.m_Text); //指向div對(duì)象的成員  
16. };  
17. }  
18.  
19. JSClass.prototype.Render = function()  
20. {  
21. document.body.appendChild(this.m_Element); //把div對(duì)象掛在窗口上  
22. document.body.appendChild(this.newElement);  
23. }  
24.  
25. JSClass.prototype.ToString = function()  
26. {  
27. alert(this.m_Text); //指向窗口（window）對(duì)象  
28. };  
29.  
30. function initialize(){  
31. var jc = new JSClass();  
32. jc.Render();  
33. jc.ToString(); //里面的this指向JSClass類(lèi)的實(shí)例，里面有m_Text成員  
34. }  
35.  
36. // -->  
37.  
38. initialize();  
39.  
40. // -->  
41.  
42. function JSClass() 
43. { 
44. var varText = "func variable!"; //函數(shù)中的普通變量 
45. this.m_Text = 'func member!'; //函數(shù)類(lèi)的成員變量 
46. this.m_Element = document.createElement('DIV'); //成員變量，創(chuàng)建一個(gè)div對(duì)象 
47. this.m_Element.innerHTML = varText; //使用函數(shù)的普通變量 
48. this.m_Element.attachEvent('onclick', this.ToString); //給這個(gè)對(duì)象的事件連上處理函數(shù) 
49. this.newElement = document.createElement('DIV'); 
50. this.newElement.innerHTML = "new element";  
51. this.newElement.m_Text = "new element text!"; //給創(chuàng)建的對(duì)象建個(gè)成員 
52. this.newElement.onclick = function() 
53. { 
54. alert(this.m_Text); //指向div對(duì)象的成員 
55. }; 
56. } 
57.  
58. JSClass.prototype.Render = function() 
59. { 
60. document.body.appendChild(this.m_Element); //把div對(duì)象掛在窗口上 
61. document.body.appendChild(this.newElement); 
62. }  
63.  
64. JSClass.prototype.ToString = function() 
65. { 
66. alert(this.m_Text); //指向窗口（window）對(duì)象 
67. }; 
68.  
69. function initialize(){ 
70. var jc = new JSClass(); 
71. jc.Render();  
72. jc.ToString(); //里面的this指向JSClass類(lèi)的實(shí)例，里面有m_Text成員 
73. } 
74.  
75. // --> 
76.  
77. initialize(); 
78.  
79. // --> 

上面的代碼執(zhí)行結(jié)果是：

頁(yè)面加載時(shí)，彈出對(duì)話框，輸出func member!

頁(yè)面上顯示

1. func variable! 
2. new element 

單擊func variable時(shí)，彈出對(duì)話框，顯示undefined

——因?yàn)檫@時(shí)toString函數(shù)里的this指針指向window

單擊new element時(shí)，彈出對(duì)話框顯示new element text!

——因?yàn)檫@時(shí)toString函數(shù)里的this指針指向div元素，而該元素已經(jīng)定義了m_Text成員(this.newElement.m_Text = "new element text!")