Javascript中關鍵字this的介紹與實例

在javascript中關鍵字this是一個很難掌握的概念。它在不同的情況下指代不同的對象。下面就來看看，在JavaScript中各種this的使用方法有什么不同之處？

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

<div onclick="method(this)">element</div>

這里的this代表觸發onclick時間的Dom對象。

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

<div id="elmtDiv">element</div>
<script language="javascript">
var div = document.getElementById('elmtDiv'); 
 div.onclick = function() 
{ 
// 在此使用this 
}; 
</script>

這里this指代的對象和上面一樣。

3、函數中的this

函數中的this代表調用函數的對象。

 function print(message) 
{ 
this.alert(message); 
} 
print("this is window");

例如上面這個函數print的定義也可以寫成。window.print = function(){}.調用print(),實際上是調用window對象上的方法print。所以print中的this代表window對象。還有類似的情況是在構造函數中定義的方法：

 function MyClass(name) 
{ 
this.name = name; 
this.toString = function(){ 
return this.name; 
} 
} 
var my = new MyClass('myclass'); 
alert(my.toString());

This指向的是調用此方法的對象my。

4、在類的構造函數中使用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未定義。有關構造函數的相關內容：Javascript(js)使用function定義構造函數有詳細的介紹。

5、為腳本引擎內部對象添加原形方法中的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指代的是被添加原形的類的實例。

6、函數調用中的this

在將函數作為一個對象的方法調用時，如：

 function print() 
{ 
alert(this.toString()); 
} 
print.apply('this is first argument'); 
print.call('this is first argument');

在Function.apply和Function.call中的第一個參數就是函數中this的對象。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈