jquery.proxy的四种使用场景的实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery.proxy的四种使用场景的实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2200字，纯文字阅读大概需要4分钟。

内容图文

先给一段HTML，后面会用来测试：

<p><button id=”test”>Test</button></p>

<p id=”log”></p>

1，jquery.proxy(function, context);

使用context作为function运行上下文（即this）

2，jQuery.proxy(function, context [, additionalArguments]);

传递参数给function

使用场景：click时，执行function，在给定的context里，同时传递两个参数，如果需要event，则可以作为function第三个参数。

注意：function执行的环境如果不适用proxy，则context会是当前点击对象，现在指定了其他的上下文，已经跟当前点击对象没有一点关系了。

 var me = {
   /* I'm a dog */
   type: "dog",
   
   /* Note that event comes *after* one and two */
   test: function(one, two, event) {
     $("#log")
       /* `one` 是第一个附加参数，与对象`you`对应 */
       .append( "<h3>Hello " + one.type + ":</h3>" )
       /* `two` 是第二个附加参数，与对象`they`对应 */
       .append( "and they are " + two.type + ".<br>" )
       /* `this` 是上下文，与普通对象`me`对应 */
       .append( "I am a " + this.type + ", " )
  
       
       /* 事件类型是点击"click" */
       .append( "Thanks for " + event.type + "ing " )
       /* `event.target`是被点击元素，类型是按钮button */
       .append( "the " + event.target.type + "." );
   }
 };
  
 var you  = { type: "cat" };
 var they = { type: "fish" };
  
 
 /* 一共4个参数：第一个是function，第二个是context，第三、四是参数 */
 var proxy = $.proxy( me.test, me, you, they );
 
 $("#test").on( "click", proxy );
 /* 运行结果：
 Hello cat:
 and they are fish.
 I am a dog, Thanks for clicking the submit.
 */

在这种情况下，click仅仅相当于一个触发按钮，触发后执行的函数，跟click一点关系都没有了。

3，jQuery.proxy(context, name);

使用场景：context是一个PlainObject，name是其方法。在click时执行，但test函数执行的上下文是obj，不是$(“#test”)

 var obj = {
     name: "John",
     test: function() {
         console.log(this);
         $("#log").append( this.name );
         $("#test").off("click", obj.test);
     }
 };
 $("#test").on( "click", jQuery.proxy( obj, "test" ) );//在click时执行，但又
不是click的上下文

结果分析：在绑定点击事件后，第一次执行时，就把该绑定去除了。

去除之后，button上已经没有点击事件，所以再点击按钮，也不会有任何反应了。

4，jQuery.proxy(context, name [, additionalArguments]);

一个疑问：

请教大家一个问题，

jQuery.proxy(context, function, params);

与

function.call(context,params);

以上就是jquery.proxy的四种使用场景的实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jquery.proxy的四种使用场景的实例详解全部内容，希望文章能够帮你解决jquery.proxy的四种使用场景的实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端