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);
}