javaScript中this的用法

最新推荐文章于 2024-12-02 11:51:47 发布

原创最新推荐文章于 2024-12-02 11:51:47 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

本文详细解析了JavaScript中this关键字的三种使用场景：作为对象方法调用、作为构造函数调用及作为全局对象调用，并提供了具体的示例代码。

一、this作为对象方法调用：

var a=5;
  var obj={
    a:3,
    b:function(){alert (this.a);}   
  }
  obj.b();//结果为3

自定义的obj对象，包含a属性，一个b的方法，b方法中的this，指obj这个对象。

但是这个对象是指上级对象，例：

 var a=5;
  var obj={
    a:3,
    b:{a:6,
         c:function(){alert(this.a);
         }  
      }
  }
  obj.b.c();//6

这里的this指向的对象是mul,mul有一个属性width，一个方法：mulsec。
那么如果this要指向obj这个对象，怎么做呢？

var a=5;
  var obj={
    a:3,
    b:{a:6,
         c:function(){alert(this.a);
         }  
      }
  }
  obj.b.c.call(obj);//3
  obj.b.c.apply(obj);//3

引申：
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

在这里：call方法将mul对象替换为obj对象，调用mul中的方法。

var a=5;
  var obj={
    a:3,
    b:{a:6,
         c:function(){alert(this.a);
         }  
      }
  }
  obj.b.c.call();//5
  obj.b.c.apply();//5.call 和apply类似

如果call为空，默认调用的是全局对象。

apply调用：和call类似

*（待填坑：apply call的应用）
(待填的坑：函数对象本质
参考文章:http://blog.youkuaiyun.com/manaduona123/article/details/5942975 )*

二、this作为构造函数调用

　function test(){
　　　　this.x = 1;
　　}//构造函数test
　　var o = new test();//实例化test，构造一个对象o
　　alert(o.x); // 1

这里this是指通过构造函数生成的对象o。

三、作为全局对象

var a=this;
console.log(a.isNaN());/*true;a作为全局对象，调用全局函数isNaN()*/
var x="test";
console.log(a.x);/*"test".如果在JavaScript程序中创建了全局变量，那么这个全局变量会成为全局对象中的一个属性。*/

对于JavaScript程序中的this，如果this不属于任何function，那么这个this就指代JS全局对象；如果是浏览器端运行的JS程序，那么这个this就指代window全局对象。

w3cschool建议不适用这种调用方法，

“因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用
parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript
代码中声明的所有变量都将成为全局对象的属性。”

另一个例子：

　var x = 1;
　　function test(){
　　　　alert(this.x);
　　}
　　test();//1；这里的this也是指全局对象，还不太明白。

*（待填的坑：全局对象。
http://blog.youkuaiyun.com/zyz511919766/article/details/7276089
http://www.jb51.net/article/59283.htm）*