Javascript的this用法总结

简介: this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。比如,  function test(){    this.x = 1;  }随着函数使用场合的不同,this的值会发生变化。

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 指向div
2.    <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关键字使用:
  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关键字:
  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中的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
目录
相关文章
|
1月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
1月前
|
JavaScript 前端开发
javascript中的switch用法
javascript中的switch用法
|
3月前
|
JavaScript 前端开发
错综复杂的this:理清你的JavaScript代码中的指向问题
错综复杂的this:理清你的JavaScript代码中的指向问题
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
27天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
JavaScript中的`this`关键字根据执行上下文指向不同对象:全局作用域中指向全局对象(如`window`),普通函数中默认指向全局对象,但作为对象方法时指向该对象。在构造函数中,`this`指向新实例。箭头函数不绑定`this`,而是继承上下文的`this`值。可通过`call`、`apply`、`bind`方法显式改变`this`指向。
9 2
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
|
2月前
|
JavaScript 前端开发
JavaScript中this的指向问题
JavaScript中this的指向问题
|
2月前
|
机器学习/深度学习 JavaScript Python
GEE机器学习——混淆矩阵Classifier.confusionMatrix()和errorMatrix()和exlain()的用法(js和python代码)
GEE机器学习——混淆矩阵Classifier.confusionMatrix()和errorMatrix()和exlain()的用法(js和python代码)
52 0
|
2月前
|
前端开发 JavaScript BI
JavaScript的过滤大师:深度解析Filter用法
JavaScript的过滤大师:深度解析Filter用法
60 0
|
3月前
|
JSON JavaScript 前端开发
深入理解JavaScript对象:从基础到高级用法
深入理解JavaScript对象:从基础到高级用法
61 0