JavaScript中的this用法详解(续)

2016-07-12

    上篇中介绍了JavaScript中this关键字的各种用法,已经相当想尽,只是有些凌乱,另外第6点中的代码如何解释也是个问题,俺研究了半天,就在此做个补充和总结吧~

    归纳起来,JavaScript中的this用法有以下3种(详细用法参原文):
    1.在HTML元素事件属性 或 CSS的expression表达式 中inline方式使用this关键字——对应原文的1、7
    2.在事件处理函数中使用this关键字——对应原文的2、3
      其中可分为两种方式
      (1)DOM方式——此种方式的结果是this指向窗口(window)对象
      (2)DHTML方式——此种方式的结果是this指向div元素对象实例
    3.在类定义中使用this关键字并在其 内部函数 或 成员函数(主要是prototype产生)中使用——对应原文的4、5、8
      需要说明的是,在函数也是个对象,因此需要区分 变量定义 和 成员变量定义,如下:
<textarea cols="50" rows="15" name="code" class="javascript">var variableName; //变量定义 //作用域:函数定义范围内 //使用方法:直接使用variableName this.varName; //成员变量定义 //作用域:函数对象定义范围内及其成员函数中 //使用方法:this.varName</textarea>

 以上归纳出的三类this的使用方法中,第一种比较容易理解,这里对原文中第6点提到的程序进行了测试和改进如下,以说明上述后两种使用方法:

<textarea cols="50" rows="15" name="code" class="javascript">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Test "this"&lt;/title&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- function JSClass() { var varText = "func variable!"; //函数中的普通变量 this.m_Text = 'func member!'; //函数类的成员变量 this.m_Element = document.createElement('DIV'); //成员变量,创建一个div对象 this.m_Element.innerHTML = varText; //使用函数的普通变量 this.m_Element.attachEvent('onclick', this.ToString); //给这个对象的事件连上处理函数 this.newElement = document.createElement('DIV'); this.newElement.innerHTML = "new element"; this.newElement.m_Text = "new element text!"; //给创建的对象建个成员 this.newElement.onclick = function() { alert(this.m_Text); //指向div对象的成员 }; } JSClass.prototype.Render = function() { document.body.appendChild(this.m_Element); //把div对象挂在窗口上 document.body.appendChild(this.newElement); } JSClass.prototype.ToString = function() { alert(this.m_Text); //指向窗口(window)对象 }; function initialize(){ var jc = new JSClass(); jc.Render(); jc.ToString(); //里面的this指向JSClass类的实例,里面有m_Text成员 } // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body&gt; &lt;mce:script type="text/javascript"&gt;&lt;!-- initialize(); // --&gt;&lt;/mce:script&gt; &lt;/body&gt; &lt;/html&gt; </textarea>
上面的代码执行结果是:
页面加载时,弹出对话框,输出func member!
页面上显示
  func variable!
  new element
单击func variable时,弹出对话框,显示undefined
  ——因为这时toString函数里的this指针指向window
单击new element时,弹出对话框显示new element text!
  ——因为这时toString函数里的this指针指向div元素,而该元素已经定义了m_Text成员(this.newElement.m_Text = "new element text!")

注:此代码及执行结果已在Opera及各IE内核的浏览器中测试通过,但不支持Firefox,应该是因为其中用到了没有定义的变量