您的位置:首页> 日志> 前端技术 正文
DTOP

javascript中的this关键字

灵落七七 | 2011年06月29日 | 函数一个对象调用代码

>>收藏本文 已有 0条评论

 

查了好多有关this的资料,this是Javascript语言的一个关键字。

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

JavaScript代码
  1. function test(){  
  2.     this.x = 1;  
  3.   }  

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

情况一:纯粹的函数调用

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

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

JavaScript代码
  1. function test(){  
  2.     this.x = 1;  
  3.     alert(this.x);  
  4.   }  
  5.   test(); // 1  

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

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

JavaScript代码
  1. function test(){  
  2.   alert(this.x);  
  3. }  
  4. var o = {};  
  5. o.x = 1;  
  6. o.m = test;  
  7. o.m(); // 1  

情况三 作为构造函数调用

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

JavaScript代码
  1. function test(){  
  2.     this.x = 1;  
  3.   }  
  4.   var o = new test();  
  5.   alert(o.x); // 1  

情况四 apply调用

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

JavaScript代码
  1. var x = 0;  
  2.   function test(){  
  3.     alert(this.x);  
  4.   }  
  5.   var o={};  
  6.   o.x = 1;  
  7.   o.m = test;  
  8.   o.m.apply(); //0  

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

如果把最后一行代码修改为:o.m.apply(o); //1

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

 

更多理解this的几个例子

如果是一个全局的function,则this相当于window对象,在function里定义的各种属性或者方法可以在function外部访问到,前提是这个function需要被调用。

JavaScript代码
  1. <script type="text/javascript">  
  2.         //在function中使用this  
  3.         function a() {  
  4.             if (this == window) {  
  5.                 alert("this == window");  
  6.                 this.fieldA = "I'm a field";  
  7.                 this.methodA = function() {  
  8.                     alert("I'm a function ");  
  9.                 }  
  10.             }  
  11.         }  
  12.   
  13.         a();    //如果不调用a方法,则里面定义的属性会取不到  
  14.         alert(window.fieldA);  
  15.         methodA();       
  16. </script>  

如果使用new的方式去实例化一个对象,则this不等于window对象,this指向function a的实例:

JavaScript代码
  1. <script type="text/javascript">  
  2.         //在function中使用this  
  3.         function a() {  
  4.             if (this == window) {  
  5.                 alert("this == window");  
  6.                 this.fieldA = "I'm a field";  
  7.                 this.methodA = function() {  
  8.                     alert("I'm a function ");  
  9.                 }  
  10.             }  
  11.         }  
  12.   
  13.         a();    //如果不调用a方法,则里面定义的属性会取不到  
  14.         alert(window.fieldA);  
  15.         methodA();       
  16. </script>  

使用prototype扩展方法可以使用this获取到源对象的实例,私有字段无法通过原型链获取:

JavaScript代码
  1. <script type="text/javascript">  
  2.         //在function中使用this之三  
  3.         function a() {  
  4.             this.fieldA = "I'm a field";  
  5.             var privateFieldA = "I'm a var";  
  6.         }  
  7.           
  8.         a.prototype.ExtendMethod = function(str) {  
  9.             alert(str + " : " + this.fieldA);  
  10.             alert(privateFieldA);   //出错  
  11.         };  
  12.         var b = new a();  
  13.         b.ExtendMethod("From prototype");    
  14. </script>  

不管是直接引用function,还是实例化一个function,其返回的闭包函数里的this都是指向window。

JavaScript代码
  1. <script type="text/javascript">  
  2.         //在function中使用this之四  
  3.         function a() {  
  4.             alert(this == window);  
  5.             var that = this;  
  6.             var func = function() {  
  7.                 alert(this == window);  
  8.                 alert(that);  
  9.             };  
  10.             return func;  
  11.         }  
  12.           
  13.         var b = a();  
  14.         b();  
  15.         var c = new a();  
  16.         c();  
  17. </script>  

在HTML中使用this,一般代表该元素本身:

XML/HTML代码
  1. <div onclick="test(this)" id="div">Click Me</div>  
  2.     <script type="text/javascript">  
  3.         function test(obj) {  
  4.             alert(obj);  
  5.         }  
  6.     </script>  
  7. 在IE和火狐(Chrome)下注册事件,this分别指向window和元素本身:  
  8. <div id="div">Click Me</div>  
  9.     <script type="text/javascript">        
  10.         var div = document.getElementById("div");  
  11.         if (div.attachEvent) {  
  12.             div.attachEvent("onclick", function() {  
  13.                 alert(this == window);  
  14.                 var e = event;   
  15.                 alert(e.srcElement == this);  
  16.             });  
  17.         }  
  18.         if (div.addEventListener) {  
  19.             div.addEventListener("click", function(e) {  
  20.             alert(this == window);  
  21.             ee = e;   
  22.             alert(e.target == this);  
  23.             }, false);  
  24.         }  
  25.     </script>