Javascript的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关键字使用：

view plaincopy to clipboardprint?

  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 plaincopy to clipboardprint?

  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'还是有文章的"一文及回复。

来源：http://blog.csdn.net/xiaoyuemian/article/details/3842184

--

 

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

时间： 2024-12-23 04:41:02

Javascript的this用法总结的相关文章

javascript原型模式用法实例详解

  本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了 原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

javascript中attachEvent用法

  这篇文章主要介绍了javascript中attachEvent用法,实例分析了javascript中事件绑定的相关技巧,需要的朋友可以参考下 本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? ? 1 2 3 obj.onclick=method1 obj.onclick=method2 obj

深入浅出分析javaScript中this用法

  这篇文章主要介绍了javaScript中this用法,实例分析了javascript中this的用途与相关的使用技巧,需要的朋友可以参考下 本文实例讲述了javaScript中this用法.分享给大家供大家参考.具体分析如下: 之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解.我后来也是看了许多别人写的文章,才理解过来的.现在把别人写的东西搬过来,怕以后忘记. 总得来说 this的指向分三种.指向全局window,该对象,构造函数. 结论:在J

Javascript中innerHTML用法实例分析

 这篇文章主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下     本文实例讲述了Javascript中innerHTML用法.分享给大家供大家参考. 具体实现方法如下:   代码如下: <html> <head> <script type="text/javascript"> function t(){ var cont = document.getElemen

javascript中递归函数用法注意点_基础知识

不做详细文字说明了,直接写代码,很明了. <script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1); //return num*arguments.callee(num-1); //指针 //return 2; } } var sum1=sum; alert(sum1(2)); </script> 上面的代码 在执行时很容易出现问题,执行我们介绍一个方法,arguments.c

5分钟理解JavaScript中this用法分享_javascript技巧

前言关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络.本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助.正文1. this用法实例 复制代码 代码如下: window.color = "red"; var o = { color: "blue" }; function sayColor(){     alert

JavaScript lodash常见用法系列小结_javascript技巧

lodash一开始是Underscore.js库的一个fork,因为和其他(Underscore.js的)贡献者意见相左.John-David Dalton的最初目标,是提供更多"一致的跨浏览器行为--,并改善性能".之后,该项目在现有成功的基础之上取得了更大的成果,并于一月份发布了3.0版本. 下面给大家说下javascript lodash知识,具体详情如下所示: 1 _.compact用法 _.compact([0, 1, false, 2, '', 3,'mm']); var

JavaScript事件委托用法分析_javascript技巧

本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

javascript的switch用法注意事项分析_javascript技巧

本文实例分析了javascript的switch用法注意事项.分享给大家供大家参考.具体分析如下: 先来看以下代码: <script> var t_jb51_net = 65; switch (t_jb51_net) { case '65': alert("字符串65.jb51.net"); break; } </script> 你会发现没有弹出对话框,alert没有执行. 原因分析: 这里需要明确的是,switch在判断的时候使用的是全等号"===&

JavaScript中return用法示例_javascript技巧

本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body