this的用法

1、Js中this具體的用法總結以下

 

1. 全局變量和全局函數附屬於全局對象(window)，所以使用」var」或」this」兩種方法定義全局變量是等效的。

2. 執行上下文和做用域不一樣。執行上下文在運行時肯定，隨時可能改變，而做用域則在定義時肯定，永遠不會變。

3. 若是當前執行的是一個對象的方法，則執行上下文就是這個方法所附屬的對象。

4. 若是當前是一個建立對象的過程或者執行一個對象的方法，則執行上下文就是這個正在被建立的對象。

5. 若是一個方法在執行時沒有明確指定附屬對象，則這個方法的上下文爲全局對象。

6. 使用call和apply能夠改變對象的執行上下文。

 

2、Js中this具體的用法介紹

 

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

 

HTML 代碼    複製

 <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關鍵字

 

JScript 代碼    複製

 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關鍵字

 

JScript 代碼    複製

 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關鍵字使用

 

JScript 代碼    複製

 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關鍵字

 

HTML 代碼    複製

<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關鍵字

 

JScript 代碼    複製

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變量做用域的問題決定的

說了這麼多JavaScript中this的用法，其實this最根本的特性仍是和OO語言中的定義相吻合的。之因此有這麼多看似混亂的使用方式，是由於JavaScript語言(解釋器和語言自己的內容)自己在實現上是遵循OO的(Object-based)，連它的全部數據類型都是對象，也有Object這樣一個super Object。可是這個語言在運行上(runtime)，就沒有遵循完備的OO特色，因此就出現了this的指代混亂。