javascript this詳解 面向對象

在面向對象編程語言中，對於this關鍵字咱們是很是熟悉的。好比C++、C#和Java等都提供了這個關鍵字

 

 

雖然在開始學習的時候以爲比較難，但只要理解了，用起來是很是方便和意義肯定的。JavaScript也提供了這個this關鍵字，不過用起來就比經典OO語言中要"混亂"的多了。
下面就來看看，在JavaScript中各類this的使用方法有什麼混亂之處？ 
一、在HTML元素事件屬性中inline方式使用this關鍵字： 
<div onclick=" 
// 能夠在裏面使用this 
">division element</div> 
咱們通常比較經常使用的方法是在此使用：javascirpt: EventHandler(this)，這樣的形式。不過這裏其實能夠寫任何合法的JavaScript語句，要是高興在此定義個類也能夠(不過將會是個內部類)。這裏的原理是腳本引擎生成了一個div實例對象的匿名成員方法，而onclick指向這個方法。 
二、用DOM方式在事件處理函數中使用this關鍵字： 
<div id="elmtDiv">division element</div> 
<script language="javascript"> 
var div = document.getElementById('elmtDiv'); 
div.attachEvent('onclick', EventHandler); 
function EventHandler() 
{ 
// 在此使用this 
} 
</script> 
這時的EventHandler()方法中的this關鍵字，指示的對象是IE的window對象。這是由於EventHandler只是一個普通的函數，對於attachEvent後，腳本引擎對它的調用和div對象自己沒有任何的關係。同時你能夠再看看EventHandler的caller屬性，它是等於null的。若是咱們要在這個方法中得到div對象引用，應該使用：this.event.srcElement。 
三、用DHTML方式在事件處理函數中使用this關鍵字： 
<div id="elmtDiv">division element</div> 
<script language="javascript"> 
var div = document.getElementById('elmtDiv'); 
div.onclick = function() 
{ 
// 在此使用this 
}; 
</script> 
這裏的this關鍵字指示的內容是div元素對象實例，在腳本中使用DHTML方式直接爲div.onclick賦值一個EventHandler的方法，等於爲div對象實例添加一個成員方法。這種方式和第一種方法的區別是，第一種方法是使用HTML方式，而這裏是DHTML方式，後者腳本解析引擎不會再生成匿名方法。 
四、類定義中使用this關鍵字： 
function JSClass() 
{ 
var myName = 'jsclass'; 
this.m_Name = 'JSClass'; 
} 
JSClass.prototype.ToString = function() 
{ 
alert(myName + ', ' + this.m_Name); 
}; 
var jc = new JSClass(); 
jc.ToString(); 
這是JavaScript模擬類定義中對this的使用，這個和其它的OO語言中的狀況很是的相識。可是這裏要求成員屬性和方法必須使用this關鍵字來引用，運行上面的程序會被告知myName未定義。 
五、爲腳本引擎內部對象添加原形方法中的this關鍵字： 
Function.prototype.GetName = function() 
{ 
var fnName = this.toString(); 
fnName = fnName.substr(0, fnName.indexOf('(')); 
fnName = fnName.replace(/^function/, ''); 
return fnName.replace(/(^\s+)|(\s+$)/g, ''); 
} 
function foo(){} 
alert(foo.GetName()); 
這裏的this指代的是被添加原形的類的實例，和4中類定義有些類似，沒有什麼太特別的地方。 
六、結合2&4，說一個比較迷惑的this關鍵字使用： 
function JSClass() 
{ 
this.m_Text = 'division element'; 
this.m_Element = document.createElement('DIV'); 
this.m_Element.innerHTML = this.m_Text; 
this.m_Element.attachEvent('onclick', this.ToString); 
} 
JSClass.prototype.Render = function() 
{ 
document.body.appendChild(this.m_Element); 
} 
JSClass.prototype.ToString = function() 
{ 
alert(this.m_Text); 
}; 
var jc = new JSClass(); 
jc.Render(); 
jc.ToString(); 
我就說說結果，頁面運行後會顯示："division element"，肯定後點擊文字"division element"，將會顯示："undefined"。 
七、CSS的expression表達式中使用this關鍵字： 
<table width="100" height="100"> 
<tr> 
<td> 
<div style="width: expression(this.parentElement.width); 
height: expression(this.parentElement.height);"> 
division element</div> 
</td> 
</tr> 
</table> 
這裏的this看做和1中的同樣就能夠了，它也是指代div元素對象實例自己。 
八、函數中的內部函數中使用this關鍵字： function OuterFoo()  {  this.Name = 'Outer Name';  function InnerFoo()  {  var Name = 'Inner Name';  alert(Name + ', ' + this.Name);  }  return InnerFoo;  }  OuterFoo()();  運行結果顯示是："Inner Name, Outer Name"。按咱們在2中的講解，這裏的結果若是是"Inner Name, undefined"彷佛更合理些吧？可是正確的結果確實是前者，這是因爲JavaScript變量做用域的問題決定的