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

<!--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);
}
发布了62 篇原创文章 · 获赞 11 · 访问量 8644

猜你喜欢

转载自blog.csdn.net/qq_38588845/article/details/102617281
今日推荐