<!--DOM结构-->
<div id="test" style="width:100px;height:100px">Click Here!</div>
在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个,例如:
test.onclick = function(){
setTimeout(function(){
// 这个this指向的是settimeout函数内部,而非之前的html元素
this.style.background = 'red';//报错,window没有这样子的属性
},1000);
}
这个时候我们有第一种解决办法:(可以将他储存起来),当然也可以用js原生的call和apply区改变,但是这里不用,请看另一种解决办法
//解决办法1
test.onclick = function(){
//用that变量把this储存起来
var that = this;
setTimeout(function(){
that.style.background = 'red';//报错,window没有这样子的属性
},1000);
}
第二种解决办法
下面两种类型
jQuery.proxy( function, context ) /**function:将要被改变作用域的函数 ** context:一个object,那个函数的作用域会被设置到这个object上来。 **/ jQuery.proxy( context, name ) /**context:一个object,那个函数的作用域会被设置到这个object上来。 **name:改变上下文中的函数名(这个函数必须是前一个参数 'context' 对象的属性) **/
//解决办法2
test.onclick = function(){
setTimeout($.proxy(function(){
this.style.background = 'red';//报错,window没有这样子的属性
},this),1000);
}