JavaScript中this关键字使用方法详解


Posted in Javascript onMarch 08, 2007

在面向对象编程语言中,对于this关键字我们是非常熟悉的。比如C++、C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的。JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了。

    下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处?

    1、在HTML元素事件属性中inline方式使用this关键字: 

 <div onclick="
 // 可以在里面使用this

 ">division element</div>

    我们一般比较常用的方法是在此使用:javascirpt: EventHandler(this),这样的形式。不过这里其实可以写任何合法的JavaScript语句,要是高兴在此定义个类也可以(不过将会是个内部类)。这里的原理是脚本引擎生成了一个div实例对象的匿名成员方法,而onclick指向这个方法。

    2、用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。

    3、用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方式,后者脚本解析引擎不会再生成匿名方法。

    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未定义。

    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指代的是被添加原形的类的实例,和4中类定义有些相似,没有什么太特别的地方。

    6、结合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"。

    7、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元素对象实例本身。

    8、函数中的内部函数中使用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变量作用域的问题决定的,详细了解推荐参看"原来JScript中的关键字'var'还是有文章的"一文及回复。

    说了这么多JavaScript中this的用法,其实this最根本的特性还是和OO语言中的定义相吻合的。之所以有这么多看似混乱的使用方式,是因为JavaScript语言(解释器和语言本身的内容)本身在实现上是遵循OO的(Object-based),连它的所有数据类型都是对象,也有Object这样一个super Object。但是这个语言在运行上(runtime),就没有遵循完备的OO特点,所以就出现了this的指代混乱。

    JavaScript里还有什么地方有this的使用呢?我暂时能想到的就这些了,欢迎讨论补充。

Javascript 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 #Javascript
在JavaScript中使用inline函数的问题
Mar 08 #Javascript
JS类中定义原型方法的两种实现的区别
Mar 08 #Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 #Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 #Javascript
翻译整理的jQuery使用查询手册
Mar 07 #Javascript
用window.location.href实现刷新另个框架页面
Mar 07 #Javascript
You might like
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python实现文件的分割与合并
2019/08/29 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
介绍下Lucene建立索引的过程
2016/03/02 面试题
美工的岗位职责
2013/11/14 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
关于安全的演讲稿
2014/05/09 职场文书
质量承诺书格式
2014/05/20 职场文书
材料员岗位职责范本
2015/04/11 职场文书
故意杀人案辩护词
2015/05/21 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python