輕松學習JavaScript二十九：JavaScript中的this詳解 · Web前端HTML+CSS+JS初級入門

這幾天在看很多的JS的代碼，多次出現this關鍵字，有時候表示不理解，就仔細看了這一方面的知識。在JavaScript語言中，this的定義是：this是包含它的函數作為方法被調用時所屬的對象。說明：這句話有點咬嘴，但一個多余的字也沒有，定義非常準確，我們可以分3部分來理解它： 1，包含它的函數。 2，作為方法被調用時。 3，所屬的對象。隨著函數使用場合的不同，this的值會發生變化。但是有一個總的原則，那就是this指的是，調用函數的那個對象。 this是Javascript語言的一個關鍵字，它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用，比如： ~~~ function to_green(){ this.style.color="green";//this在這里指window對象 } to_green();//函數調用 ~~~ 我們來分析上面的函數：包含this的函數是to_green()，該函數作為方法被調用了。函數所屬的對象是誰，默認情況下是window對象。因此this就是指的window對象了，to_green()方法中執行語句也就變為：window.style.color="green";這讓window對象很上火，因為它并沒有style這么個屬性，所以該語句也就沒什么作用。我們可以再看一個切合實際的例子： ~~~ window.load=function(){ var example=document.getElementById("example"); example.onclick=to_green;//賦值給某對象的事件處理函數 function to_green(){ this.style.color="green";//這里的this代表example這個對象 } } ~~~ 我們再次分析：我們知道通過賦值操作，example對象的onclick事件得到to_green()方法，那么包含this的函數就是onclick事件，那么this就是example引用的html元素對象。因此this的環境可以隨著函數被賦值給不同的對象而改變！趁著上面的例子我們具體實現一下： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS</title> <style type="text/css"> #example { width:100px; height:100px; background-color:red; } </style> <script type="text/javascript"> window.onload=function(){ var example=document.getElementById("example"); example.onclick=to_green; function to_green(){ this.style.backgroundColor="green";//這里的this表示div元素對象 } } </script> </head> <body> <div id="example">點擊變綠</div> </body> </html> ~~~ 點擊前的效果： ![](https://box.kancloud.cn/2016-04-28_572155933f14b.jpg) 點擊后的效果： ![](https://box.kancloud.cn/2016-04-28_5721559358a5b.jpg) 下面分四種情況，詳細討論this的用法。情況一：純粹的函數調用? 這是函數的最通常用法，屬于全局性調用，因此this就代表window對象。請看下面這段代碼，它的運行結果是1。 ~~~ function test(){ 　this.x = 1; 　alert(this.x); } test();//輸出：1 ~~~ 為了證明this就是window對象，可以對代碼做一些改變： ~~~ var x=1;//全局變量 function test(){ 　alert(this.x); } test();//輸出：1 ~~~ 運行結果還是1。再變一下：? ~~~ var x=1;//全局變量 function test(){ 　this.x=0; //全局變量x重新賦值為1 } test();//函數調用 alert(x);//輸出：0 ~~~ 情況二：作為對象方法的調用? 函數還可以作為某個對象的方法調用，這時this就指這個上級對象。 ~~~ function test(){ 　alert(this.x); } var obj={};//定義一個對象 obj.x=1; obj.m=test; obj.m();//輸出：1 ~~~ 由上述的test()作為方法賦值給obj對象，說明this在這里指的是obj。情況三作為構造函數調用? 所謂構造函數，就是通過這個函數生成一個新對象(object)。這時，this就指這個新對象。 ~~~ function test(){ 　this.x=1; } var obj=new test()//定義一個對象 alert(obj.x);//輸出：1 ~~~ 運行結果為1。為了表明這時this不是全局對象，再次對代碼做一些改變： ~~~ var x=2;//全局變量 function test(){ 　this.x=1; } var obj=new test()//定義一個對象 alert(obj.x);//輸出：1 alert(x);//輸出：2，表示全局變量沒有改變 ~~~ 運行結果為2，表明全局變量x的值根本沒變。? 情況四 apply調用? apply()是函數對象的一個方法，它的作用是改變函數的調用對象，它的第一個參數就表示改變后的調用這個函數的對象。因此，this指的就是這第一個參數。? ~~~ var x=0; function test(){ 　alert(this.x); } var obj={};//定義一個對象 obj.x=1; obj.m=test; obj.m.apply();//輸出：0 ~~~ apply()的參數為空時，默認調用全局對象。因此，這時的運行結果為0，證明this指的是全局對象。如果把上面的代碼修改為? ~~~ var x=0; function test(){ 　alert(this.x); } var obj={};//定義一個對象 obj.x=1; obj.m=test; obj.m.apply(obj);//輸出：1 ~~~ 運行結果就變成了1，證明了這時this代表的是obj對象。看完了這些基本也是JS基礎教程里面的詳解，對于一些高級的JS教程里還有更詳細的解釋和實例。如果想要了解更詳細的this機制，可以看下面的三篇文章，自認為現在還是不太了解，在后面的學習需要加強對this的了解。這三篇文章來自CSDN[YvetteLau](http://blog.csdn.net/liuyan19891230?viewmode=list)的博文：一[JavaScript的this詞法](http://blog.csdn.net/liuyan19891230/article/details/50011901) 二[JavaScript的this詞法（二）](http://blog.csdn.net/liuyan19891230/article/details/50034519) 三[JS this詞法（三）](http://blog.csdn.net/liuyan19891230/article/details/50058551) ? ? ? ? ?