电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > javascript > 正文
在Javascript中使用this关键字有什么作用
在Javascript中使用this关键字有什么作用
2010-2-1 13:41:55  文/网络收集   出处:电脑软硬件应用网   

在很多开发语言中都可以使用this这个关键字,那么在js中使用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>

 

这里this指代的对象和上面一样。

 

3、函数中的this

函数中的this代表调用函数的对象。

1 function print(message)
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());

 

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关键字

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());    

这里的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');

在Function.apply和Function.call中的第一个参数就是函数中this的对象。

好,介绍完毕,希望你同样学到东西。

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    js或jquery获取网页控件的offset值的…
    验证JS中Object和Function的关系的代…
    不支持ASP的空间能用JS吗?
    关于20个Ajax关键问题的疑问及解答
    extjs重新设置按钮button的text的方…
    58项经典的JS代码
    使用JS自动切换背景音乐的方法
    一些常用正则表达式语法参考(数字、…
    JavaScript框架的实用函数
    推荐一些实用JS测试和验证工具给大家
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号