您的位置： 首页 >日志>前端技术>详细内容

前端技术

javascript中的this关键字

来源：本站原创 发布时间：2011-06-29 21:18:22 浏览次数： 次 【字体：小 大】

 

查了好多有关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. "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.   

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

JavaScript代码
  1. "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.   

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

JavaScript代码
  1. "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.   

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

JavaScript代码
  1. "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.   

在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>  
×

用户登录