当前位置: 代码迷 >> 综合 >> jQuery.proxy()的用法(解决函数this转移问题)
  详细解决方案

jQuery.proxy()的用法(解决函数this转移问题)

热度:98   发布时间:2023-12-23 14:24:22.0
<!--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);
}

 

  相关解决方案