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

this關鍵字在c++，java中都提供了這個關鍵字，在剛開始學習時覺得有難度，但是只要理解了，用起來就方便多了，下面通過本篇文章給大家詳解js里this關鍵字的理解。

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

接下來你談談我對它的理解，也作為一個筆記，方便以后參閱。有不對的地方，歡迎指出批評。

1. 不像C#，this一定是指向當前對象。

js的this指向是不確定的，也就是說是可以動態改變的。call/apply 就是用于改變this指向的函數，這樣設計可以讓代碼更加靈活，復用性更高。

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

這一點很重要!這一點很重要!這一點很重要!

這也是一道常見的面試題，如下代碼：

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。

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

為什么第二點說一般情況下this都是指向函數的擁有者，因為有特殊情況。函數自執行就是特殊情況，在函數自執行里，this 指向的是：window。所以第一個 console.log 打印的是 window 的屬性 number。

所以要加一點：

3. 在函數自執行里，this 指向的是 window 對象。

擴展，關于this，還有一個地方比較讓人模糊的是在 dom 事件里，通常有如下3種情況：

如下：

1. 使用標簽屬性注冊事件，此時this 指向的是 window 對象。

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

2. 對于1，要讓 this 指向 input，可以將 this 作為參數傳遞。

3. 使用 addEventListener 等注冊。此時this 也是指向 input。

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

在面向對象編程語言中，對于this關鍵字我們是非常熟悉的。比如C++、C#和Java等都提供了這個關鍵字，雖然在開始學習的時候覺得比較難，但只要理解了，用起來是非常方便和意義確定的。JavaScript也提供了這個this關鍵字，不過用起來就比經典OO語言中要"混亂"的多了。

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

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

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

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

2、用DOM方式在事件處理函數中使用this關鍵字：

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. // --> 

這時的EventHandler()方法中的this關鍵字，指示的對象是IE的window對象。這是因為EventHandler只是一個普通的函數，對于attachEvent后，腳本引擎對它的調用和div對象本身沒有任何的關系。同時你可以再看看EventHandler的caller屬性，它是等于null的。如果我們要在這個方法中獲得div對象引用，應該使用：this.event.srcElement。

3、用DHTML方式在事件處理函數中使用this關鍵字：

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關鍵字指示的內容是div元素對象實例，在腳本中使用DHTML方式直接為div.onclick賦值一個EventHandler的方法，等于為div對象實例添加一個成員方法。這種方式和第一種方法的區別是，第一種方法是使用HTML方式，而這里是DHTML方式，后者腳本解析引擎不會再生成匿名方法。

4、類定義中使用this關鍵字：

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模擬類定義中對this的使用，這個和其它的OO語言中的情況非常的相識。但是這里要求成員屬性和方法必須使用this關鍵字來引用，運行上面的程序會被告知myName未定義。

5、為腳本引擎內部對象添加原形方法中的this關鍵字：

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指代的是被添加原形的類的實例，和4中類定義有些相似，沒有什么太特別的地方。

6、結合2&4，說一個比較迷惑的this關鍵字使用：

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(); 

我就說說結果，頁面運行后會顯示："division element"，確定后點擊文字"division element"，將會顯示："undefined"。

7、CSS的expression表達式中使用this關鍵字：

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

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

8、函數中的內部函數中使用this關鍵字：

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()(); 

運行結果顯示是："Inner Name, Outer Name"。按我們在2中的講解，這里的結果如果是"Inner Name, undefined"似乎更合理些吧?但是正確的結果確實是前者，這是由于JavaScript變量作用域的問題決定的，詳細了解推薦參看"原來JScript中的關鍵字'var'還是有文章的"一文及回復。

歸納起來，JavaScript中的this用法有以下3種（詳細用法參原文）：

1.在HTML元素事件屬性 或 CSS的expression表達式 中inline方式使用this關鍵字——對應原文的1、7

2.在事件處理函數中使用this關鍵字——對應原文的2、3

其中可分為兩種方式

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

(2)DHTML方式——此種方式的結果是this指向div元素對象實例

3.在類定義中使用this關鍵字并在其 內部函數 或 成員函數(主要是prototype產生)中使用——對應原文的4、5、8

需要說明的是，在函數也是個對象，因此需要區分 變量定義 和 成員變量定義，如下：

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

以上歸納出的三類this的使用方法中，第一種比較容易理解，這里對原文中第6點提到的程序進行了測試和改進如下，以說明上述后兩種使用方法：

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

上面的代碼執行結果是：

頁面加載時，彈出對話框，輸出func member!

頁面上顯示

1. func variable! 
2. new element 

單擊func variable時，彈出對話框，顯示undefined

——因為這時toString函數里的this指針指向window

單擊new element時，彈出對話框顯示new element text!

——因為這時toString函數里的this指針指向div元素，而該元素已經定義了m_Text成員(this.newElement.m_Text = "new element text!")