代码改变世界

Javascript基础复习 - jQuery Proxy函数

2013-12-25 14:42  朱峰(Peter.zhu)  阅读(477)  评论(0)  编辑  收藏  举报

API 文档 http://api.jquery.com/jQuery.proxy/ 

jQuery.proxy(function,obj)

jquery1.4新增，返回一个新函数，并且这个函数始终保持了特定的作用域。

当有事件处理函数要附加到元素上，但他们的作用域实际是指向另一个对象时，这个方法最有用了。此外，最妙的是，jQuery能够确保即便你绑定的函数是经过jQuery.proxy()处理过的函数，你依然可以传递原先的函数来准确无误地取消绑定。请参考下面的例子。

这个函数还有另一种用法，jQuery.proxy( scope, name
)。第一个参数是要设定的作用域对象。第二个参数是将要设置作用域的函数名（必须是第一个作用域对象的一个属性）。

看起来有点call/apply的意思是不是？

示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="Chrome">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Title</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
	
        $(function () {
		
			var obj = {
			  name: "John",
			  test: function() {
				alert( this.name );
				$("#test").unbind("click", obj.test);
			  }
			};
			 
			//$("#test").click( jQuery.proxy( obj, "test" ) );
			 
			// 以下代码跟上面那句是等价的:
			//$("#test").click( jQuery.proxy( obj.test, obj ) );
			 
			// 可以与单独执行下面这句做个比较。
			$("#test").click( obj.test );
			
		});
    </script>
	
</head>
<body>
	<div id="test">Click Here!</div>
</body>
</html>