jQuery.proxy()
接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文语境。
jQuery.proxy(function ,context)
- function类型: Function()。将要改变上下文语境的函数。
- context类型: PlainObject。函数的上下文语境(
this
)会被设置成这个 object 对象。
jQuery.proxy(function ,context[,additionalArguments])
- function类型: Function()将要改变上下文语境的函数。
- context类型: PlainObject。函数的上下文语境会被设置成这个 object 对象。
- additionalArguments类型: Anything。任何数目的参数传递给
function
参数的函数引用。
jQuery.proxy(context,name)
- context类型: PlainObject。函数的上下文语境会被设置成这个 object 对象。
- name类型: String。将要改变上下文语境的函数名(这个函数必须是前一个参数
context
对象的属性)。
jQuery.proxy(context,name[,additionalArguments])
- context类型: PlainObject。函数的上下文语境会被设置成这个 object 对象。
- name类型: String。将要改变上下文语境的函数名(这个函数必须是前一个参数
context
对象的属性)。 - additionalArguments类型: Anything。任何数目的参数传递给
name
参数中命名的函数。
这个方法通常在向一个元素上附加事件处理函数时,上下文语境实际是指向另一个对象的情况下使用。另外,jQuery 能够确保即使你绑定的函数是经过jQuery.proxy()
处理过的函数,你依然可以用原先的函数来正确地取消绑定。
要知道,jQuery的事件绑定子系统为每一个事件处理函数分配一个唯一的ID 用于对其进行跟踪,这样的话,当需要解除绑定特定的事件处理时,系统就知道该解除绑定哪个事件处理函数了。jQuery.proxy()
参数中的 function 会被事件子系统当成一个单独的函数,即使是当它用于绑定不同的上下文时。为了避免错误的解除绑定事件,可以在绑定或解除绑定时,使用一个唯一的事件命令空间(例如,"click.myproxy1"
),这样比在解除绑定时仅指定被代理函数要好。
从jQuery 1.6开始,任意数量的附加参数可以提供给$.proxy()
,并且它们将被传递给那些上下文将被改变的函数。
从jQuery 1.9开始,当context
为null
或undefined
,代理函数将通过this
对象被调用。(注:也就是相当于context
为this
对象)。允许$.proxy()
应用一个函数的部分参数,而不改变上下文。
例子
修改使用参数为"function, context"的jQuery.proxy()方法绑定的点击事件的上下文语境。并且在第一次点击事件执行后,解除原先的绑定。
<!DOCTYPE html> <html> <head> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p><button type="button" id="test">Test</button></p> <div id="log"></div> <script>var me = { type: "zombie", test:function (event) { /* Without proxy, `this` would refer to the event target */ /* use event.target to reference that element. */var element = event.target; $(element).css("background-color", "red"); /* With proxy, `this` refers to the me object encapsulating */ /* this function. */ $("#log").append( "Hello " +this .type + "<br>" ); $("#test").unbind("click",this .test); } };var you = { type: "person", test:function (event) { $("#log").append(this .type + " " ); } }; /* execute you.test() in the context of the `you` object */ /* no matter where it is called */ /* i.e. the `this` keyword will refer to `you` */var youClick = $.proxy( you.test, you ); /* attach click handlers to #test */ $("#test") /* this === "zombie"; handler unbound after first click */ .on( "click", $.proxy( me.test, me ) ) /* this === "person" */ .on( "click", youClick ) /* this === "zombie" */ .on( "click", $.proxy( you.test, me ) ) /* this === "<button> element" */ .on( "click", you.test ); </script> </body> </html>
通过调用参数为"context, function name"的jQuery.proxy()方法,强制修改函数的上下文语境。并且在第一次点击事件执行后,解除绑定。
<!DOCTYPE html> <html> <head> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p><button id="test">Test</button></p> <p id="log"></p> <script>var obj = { name: "John", test:function () { $("#log").append(this .name ); $("#test").off("click", obj.test); } }; $("#test").on( "click", jQuery.proxy( obj, "test" ) ); </script> </body> </html>
更改绑定点击处理程序函数的上下文。
<!DOCTYPE html> <html> <head> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script> </head> <body> <p><button type="button" id="test">Test</button></p> <div id="log"></div> <script>var me = { /* I'm a dog */ type: "dog", /* Note that event comes *after* one and two */ test:function (one, two, event) { $("#log") /* `one` maps to `you`, the 1st additional */ /* argument in the $.proxy function call */ .append( "<h3>Hello " + one.type + ":</h3>" ) /* the `this` keyword refers to `me` */ /*(the 2nd, context, argument of $.proxy) */ .append( "I am a " +this .type + ", " ) /* `two` maps to `they`, the 2nd additional */ /* argument in the $.proxy function call */ .append( "and they are " + two.type + ".<br>" ) /* the event type is "click" */ .append( "Thanks for " + event.type + "ing " ) /* the clicked element is `event.target`, */ /* and its type is "button" */ .append( "the " + event.target.type + "." ); } };var you = { type: "cat" };var they = { type: "fish" }; /* Set up handler to execute me.test() in the context */ /* of `me`, with `you` and `they` as additional arguments */var proxy = $.proxy( me.test, me, you, they ); $("#test") .on( "click", proxy ); </script> </body> </html>