this是Javascript语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,

  function test(){

    this.x = 1;

  }

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

下面分四种情况,详细讨论this的用法。

情况一:纯粹的函数调用

这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global。

请看下面这段代码,它的运行结果是1。

  function test(){

    this.x = 1;

    alert(this.x);

  }

  test(); // 1

为了证明this就是全局对象,我对代码做一些改变:

  var x = 1;

  function test(){

    alert(this.x);

  }

  test();  // 1

运行结果还是1。再变一下:

  var x = 1;

  function test(){

    this.x = 0;

  }

  test();

  alert(x); //0

情况二:作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

  function test(){

    alert(this.x);

  }

  var o = {};

  o.x = 1;

  o.m = test;

  o.m(); // 1

情况三 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

  function test(){

    this.x = 1;

  }

  var o = new test();

  alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变:

  var x = 2;

  function test(){

    this.x = 1;

  }

  var o = new test();

  alert(x); //2

运行结果为2,表明全局变量x的值根本没变。

情况四 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

  var x = 0;

  function test(){

    alert(this.x);

  }

  var o={};

  o.x = 1;

  o.m = test;

  o.m.apply(); //0

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为

  o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

(完)

 

另外介绍:

 


javascript 中this 的用法:

1.<div

onclick="// 可以在里面使用this">division

element</div> this 指向div2.    <div id="elmtDiv">division

element</div>

       <script

language="javascript">

        var div =

document.getElementById('elmtDiv');

        div.attachEvent('onclick',

EventHandler);  //attachEvent把div的onclick事件和一个方法绑定

         function EventHandler()

       

{

         // 在此使用this

          }

       

</script>在此this
指向window对象,若要引用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
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关键字使用:



view plain​​copy to clipboard​​print​​?


  1. function JSClass()
  2. {
  3. this.m_Text = 'division element';
  4. this.m_Element = document.createElement('DIV');
  5. this.m_Element.innerHTML = this.m_Text;

  6. this.m_Element.attachEvent('onclick', this.ToString);
  7. }

  8. JSClass.prototype.Render = function()
  9. {
  10. document.body.appendChild(this.m_Element);
  11. }

  12. JSClass.prototype.ToString = function()
  13. {
  14. alert(this.m_Text);
  15. };

  16. var jc = new JSClass();
  17. jc.Render();
  18. jc.ToString();


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




  1. <table width="100" height="100">
  2. <tr>
  3. <td>
  4. <div style="width: expression(this.parentElement.width);
  5. height: expression(this.parentElement.height);">
  6. division element</div>
  7. </td>
  8. </tr>
  9. </table>


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



view plain​​copy to clipboard​​print​​?


  1. function OuterFoo()
  2. {
  3. this.Name = 'Outer Name';

  4. function InnerFoo()
  5. {
  6. var Name = 'Inner Name';
  7. alert(Name + ', ' + this.Name);
  8. }
  9. return InnerFoo;
  10. }
  11. OuterFoo()();


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:void(0)​

--


 


    归纳起来,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

javascript 中this 的用法:



1.<div

onclick="// 可以在里面使用this">division

element</div> this 指向div2.    <div id="elmtDiv">division

element</div>

       <script

language="javascript">

        var div =

document.getElementById('elmtDiv');

        div.attachEvent('onclick',

EventHandler);  //attachEvent把div的onclick事件和一个方法绑定

         function EventHandler()

       

{

         // 在此使用this

          }

       

</script>在此this
指向window对象,若要引用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
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中类定义有些相似,没有什么太特别的地方。