<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>$.proxy()的使用</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="button" value="测试" id="myBtn" name="我的按钮"/>
<script type="text/javascript">
// 定义一个对象，含有属性name和一个sayHello的方法
var hbk = {
name:"huangbaokang",
sayHello:function(){
alert("hello "+this.name);
}
}
//$("#myBtn").click(hbk.sayHello);// hello 我的按钮
// 如果想输出hbk对象的name
//$("#myBtn").click($.proxy(hbk.sayHello,hbk)); // hello huangbaokang
// 另外一种用法
$("#myBtn").click($.proxy(hbk,"sayHello")); // hello huangbaokang
</script>
</body>
</html>
$.proxy()方法主要是修改this指针的指向。
他有两种使用方法。
$.proxy(a,b)
第一种:a是一个function函数,b是这个函数的对象所有者.
第二种:a是一个对象,b是一个字符串,是a的属性名.
从源码中也可以看到。
案列1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>$.proxy()的使用</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="panel" style="display: none;">
<button>关闭</button>
</div>
<script type="text/javascript">
/*$("#panel").fadeIn(function(){
$("#panel button").click(function(){
$(this).fadeOut(); // 这种方式panel并没有设置display:none
});
});*/
$("#panel").fadeIn(function () {
$("#panel button").click($.proxy(function () {
$(this).fadeOut();
}, this));
});
</script>
</body>
</html>
案例2：
//正常的this使用
$('#Haorooms').click(function() {
// 这个this是我们所期望的，当前元素的this.
$(this).addClass('aNewClass');
});
//并非所期望的this
$('#Haorooms').click(function() {
setTimeout(function() {
// 这个this指向的是settimeout函数内部，而非之前的html元素
$(this).addClass('aNewClass');
}, 1000);
});
这时候怎么办呢，通常的一种做法是这样的：
$('#Haorooms').click(function() {
var that = this; //设置一个变量，指向这个需要的this
setTimeout(function() {
// 这个this指向的是settimeout函数内部，而非之前的html元素
$(that).addClass('aNewClass');
}, 1000);
});
也可以使用jquery为我们提供的proxy方法
$('#Haorooms').click(function() {
setTimeout($.proxy(function() {
$(this).addClass('aNewClass');
}, this), 1000);
});