其实,this的取值,分四种情况。我们来挨个看一下。

 
在此再强调一遍一个非常重要的知识点:在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。
 
情况1:构造函数
 
所谓构造函数就是用来new对象的函数。其实严格来说,所有的函数都可以new一个对象,但是有些函数的定义是为了new一个对象,而有些函数则不是。另外注意,构造函数的函数名第一个字母大写(规则约定)。例如:Object、Array、Function等。
 
JavaScript代码
  1. function Foo(){  
  2.     this.name="刘新修";  
  3.     this.year=1986;  
  4.     console.log(this); //Foo {name: "刘新修", year: 1986}  
  5. }  
  6. var f1=new Foo();  
  7. console.log(f1.name); //刘新修  
  8. console.log(f1.year); //1986  
注意,以上仅限new Foo()的情况,即Foo函数作为构造函数的情况。如果直接调用Foo函数,而不是new Foo(),情况就大不一样了, 那就是普通函数调用了:
 
JavaScript代码
  1. function Foo(){  
  2.     this.name="刘新修";  
  3.     this.year=1986;  
  4.     console.log(this); //Window {top: Window, location: Location, document: document, window: Window, external: Object…}  
  5. }  
  6. Foo();  
这种情况下this就是window,个人总结:this就是就近原则,谁近就是谁,不然就是window,另外有关于闭包的两个demo同时也便于大家理解this 代码如下:
 
****************************************************************************************************************
代码片段一:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     return function(){  
  6.       return this.name;  
  7.     };  
  8.   }  
  9. };  
  10. alert(object.getNameFunc()()); //返回The Window  
代码片段二:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     var that=this;  
  6.     return function(){  
  7.       return that.name;  
  8.     };  
  9.   }  
  10. };  
  11. //alert(object.getNameFunc()()); //返回My Object 注:因为var that=this; 声明的为私有变量  
  12. console.log((object.getNameFunc()())); //返回My Object 注:因为var that=this; 声明的为私有变量  
**********************************************************************************************************************
 
情况2:函数作为对象的一个属性
 
如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象。
JavaScript代码
  1. var obj={  
  2.     x:10,  
  3.     fn:function(){  
  4.         console.log(this);   //object {fu:function,x:10}  
  5.         console.log(this.x); //10  
  6.     }  
  7. };  
  8. obj.fn();  
以上代码中,fn不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。
注意,如果fn函数不作为obj的一个属性被调用,会是什么结果呢?
 
 
JavaScript代码
  1. var obj={  
  2.     x:10,  
  3.     fn:function(){  
  4.         console.log(this);   //Window {top: Window, location: Location, document: document, window: Window, external: Object…}  
  5.         console.log(this.x); //如果this是window那this.x 自然就是 undefined  
  6.     }  
  7. };  
  8. var fn1=obj.fn;  
  9. fn1();  
情况3:函数用call或者apply调用
 
当一个函数被call和apply调用时,this的值就取传入的对象的值。至于call和apply如何使用,不会的朋友可以去查查其他资料,本系列教程不做讲解。
 
JavaScript代码
  1. var obj={  
  2.     x:10  
  3. };  
  4. var fn=function(){  
  5.     console.log(this);   //Object {x: 10}  
  6.     console.log(this.x); //10  
  7. };  
  8. fn.call(obj);  
情况4:全局 & 调用普通函数
 
在全局环境下,this永远是window,这个应该没有非议。
 
JavaScript代码
  1. console.log(this===window); //true  
普通函数在调用时,其中的this全部都指向window 如下:
 
JavaScript代码
  1. var x=10;  
  2. var fn=function(){  
  3.     console.log(this);   //window  
  4.     console.log(this.x); //10  
  5. };  
  6. fn();  
以上代码很好理解,如果函数里套子函数this仍然指向window 如下:
 
JavaScript代码
  1. var x=10;  
  2. var obj={  
  3.     x:10,  
  4.     fn:function(){  
  5.         function f(){  
  6.             console.log(this);   //window  
  7.             console.log(this.x); //10  
  8.         };  
  9.         f();  
  10.     }  
  11. };  
  12. obj.fn();  
除非用局部变量 var that=this; 重新定义this 这时候的that 变量只能在函数内部调用,如下:
 
JavaScript代码
  1. var name="The Window";  
  2. var object={  
  3.   name:"My Object",  
  4.   getNameFunc:function(){  
  5.     var that=this;  
  6.     console.log(that);      //Object {name: "My Object"}  
  7.     console.log(this.name); //My Object  
  8.   }  
  9. };  
  10. object.getNameFunc();  
 
H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1607)