Javascript的关键字this详解
在javascript中关键字this是一个很难掌握的概念。它在不同的情况下指代不同的对象。下面就来看看,在JavaScript中各种this的使用方法有什么不同之处?
1、在HTML元素事件属性中inline方式使用this关键字:
<div onclick="method(this)">element</div>
这里的this代表触发onclick时间的Dom对象。
2、在事件处理函数中使用this关键字:
1 <div id="elmtDiv">element</div>
2 <script language="javascript">
3 var div = document.getElementById('elmtDiv');
4 div.onclick = function()
5 {
6 // 在此使用this
7 };
8 </script>
2 <script language="javascript">
3 var div = document.getElementById('elmtDiv');
4 div.onclick = function()
5 {
6 // 在此使用this
7 };
8 </script>
这里this指代的对象和上面一样。
3、函数中的this
函数中的this代表调用函数的对象。
1 function print(message)
2 {
3 this.alert(message);
4 }
5
6 print("this is window");
2 {
3 this.alert(message);
4 }
5
6 print("this is window");
例如上面这个函数print的定义也可以写成。window.print = function(){}.调用print(),实际上是调用window对象上的方法print。所以print中的this代表window对象。还有类似的情况是在构造函数中定义的方法:
1 function MyClass(name)
2 {
3 this.name = name;
4 this.toString = function(){
5 return this.name;
6 }
7 }
8
9 var my = new MyClass('myclass');
10 alert(my.toString());
2 {
3 this.name = name;
4 this.toString = function(){
5 return this.name;
6 }
7 }
8
9 var my = new MyClass('myclass');
10 alert(my.toString());
this指向的是调用此方法的对象my。
4、在类的构造函数中使用this
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function JSClass()
{
var myName = 'jsclass';
this.m_Name = 'JSClass';
}
JSClass.prototype.ToString = function()
{
alert(myName + ', ' + this.m_Name);
};
var jc = new JSClass();
jc.ToString();
{
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关键字
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());
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());
这里的this指代的是被添加原形的类的实例。
6、函数调用中的this
在将函数作为一个对象的方法调用时,如:
1 function print()
2 {
3 alert(this.toString());
4 }
5
6 print.apply('this is first argument');
7 print.call('this is first argument');
2 {
3 alert(this.toString());
4 }
5
6 print.apply('this is first argument');
7 print.call('this is first argument');
在Function.apply和Function.call中的第一个参数就是函数中this的对象。