js中的this

  js中this出现的频率是很高的，有时候会弄不清楚this到底指的是谁，所以这里对this做一个更详细的了解。

  一般情况下，this变量所引用的对象是判断所在函数是当做哪个对象的方法调用的，则该对象就是this所引用的对象，即谁调用则指谁。

var obj={};

obj.x=100;

obj.y=function(){alert(this.x);};

obj.y();//弹出100

这里的obj.y()，函数是作为obj对象的方法调用的，因此函数体内的this指向的是obj对象，所以会弹出100。

 var checkThis=function(){

alert(this.x);

};

var x="this is a property of window";

var obj={};

obj.x=100;

obj.y=function(){alert(this.x);};

var obj2=obj.y;

obj.y();//弹出100

checkThis();//弹出'this is a property of window'

obj2();//弹出'this is a property of window'

obj.y()中调用函数的对象是obj对象，checkThis()中调用函数的对象是window对象。obj2()中调用函数的对象是window对象。在js的变量作用于中，规定"全局变量都是window对象的属性"。在obj2()中，可以写成 var obj2=function(){alert(this.x)},与checkThis的定义是一样的。

 

this.x和apply()、call()

通过call和apply可以重新定义函数的执行环境，即this的指向。

call()

function changeStyle(type,value){

  this.style[type]=value;

}

var one=document.getElementById('one');

changeStyle.call(one,'fontSize','100px');//正确

changeStyle('fontSize','300px');//出现错误，此时changeStyle中this引用的是window对象，但window对象并没有style属性。

 

apply()

function changeStyle(type,value){

  this.style[tyjjpe]=value;

}

var one=document.getElementById('one');

changeStyle.apply(one,['fontSize','100px']);//正确

changeStyle('fontSize','300px');//出现错误，同上。

 

有时候this是没有意义的，如：

var obj={

  x:100,

  y:function(){

    setTimeout(function(){alert(this.x);},2000);//在这里，调用setTimeout的是window对象，因此，this指向的是window，会弹出undefine。

}

};

obj.y();

 

var obj={

  x:100;

  y:function(){

   var that=this;

   setTimeout(function(){alert(that.x);},2000);//此时that指向的是obj对象。弹出正确。

 }

};

obj.y();  //弹出100

 

在事件监听中使用this

var one=document.getElementById('one');

one.onclick=function(){

  alert(this.innerHTML); //this指向的是one元素

};

 

总结：this指向的是包含this指针的上层对象。

普通函数，全局变量情况下：全局对象window

对象的方法：该对象

构造函数：新构造的对象

 

博文参考：http://www.108js.com/article/article1/10006.html?id=18