1、首先先看一下,jQuery的proxy的官方文档中的解释
函数名称 | 返回值/类型 |
jQuery.proxy(function,context) | Function |
其中:
proxy(function,context),中的参数说明如下:
(1)、function:
类型:Function
说明:The function whose context will be changed.(这句话的含义为:作用于上下文(context)的方法,会使得上下文发生变化---(其实这句话是一句废话,一个方法作用于某个东西,必然会使该“东西”发生变化))。
(2)、context。
类型:PlainObject
说明:The object to which the context (this
) of the function should be set.
//-“The object”是指context。所以本句话的意思是指:参数context就是方法(function)的上下文(this)。
2、举例说明
这个例子是jQuery官网的上的例子,在这里
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.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. */ /*如果不使用proxy方法,‘this’关键字将会是事件对象的target。*/ var element = event.target; $(element).css("background-color", "red"); /* With proxy, `this` refers to the me object encapsulating */ /* this function. */ /*若使用了proxy,则上下文中的this,将会是‘me’*/ $("#log").append( "Hello " + this.type + "<br>" ); $("#test").off("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>
通过这个例子,就可以知道:this关键词一般是指event.target,即事件的对象。但是通过proxy方法,可以改变this关键字所指的事件对象。这也就是context参数的含义。
通过function,作用于context,使其context发生改变。
在《Learning jQuery(third Edition)》中附录C中,对proxy的定义为:
创建(返回)一个在指定上下文中执行的新方法
个人理解:
在这个句话中:
指定上下文:是指:proxy中的context参数。
执行:是指proxy中的function参数。
所以proxy方法的目的是直接指定上下文,然后定义的function作用于该上下文(this)
3、proxy使用目的
举例说明:
代码-1
$('#myElement').click(function() { // In this function, "this" is our DOM element. $(this).addClass('aNewClass'); });在代码-1中,点击myElement,则该元素(myElement)将会添加aNewClass样式类。
$('#myElement').click(function() { setTimeout(function() { // 将会出问题,this将不是我们想要的element。 $(this).addClass('aNewClass'); }, 1000); });但是这样使用,就会出现问题。文中的‘this’,不是ID为myElement元素,而是window。
$('#myElement').click(function() { // ------------------v--------give $.proxy our function, setTimeout($.proxy(function() { $(this).addClass('aNewClass'); // Now "this" is again our element }, this), 1000); // ---^--------------and tell it that we want our DOM element to be the // value of "this" in the function });
3、参考资料
1、关于proxy的一些博客是不错的。
2、stackoverflow中的问答:
3、一个不错的讲解proxy的视频。(是英文的)
4、jQuery中proxy的源代码(呵呵,没看,仅仅是贴在这了)
01 /* jQuery 源码之 proxy: 02 使用 apply 形式, 执行回调函数. 03 */ 04 jQuery.proxy = function( fn, proxy, thisObject ) { 05 if ( arguments.length === 2 ) { 06 // jQuery.proxy(context, name); 07 if ( typeof proxy === "string" ) { 08 thisObject = fn; 09 fn = thisObject[ proxy ]; 10 proxy = undefined; 11 12 /* 转化结果: 13 thisObject -> context 14 fn -> name 15 proxy -> undefined 16 */ 17 } 18 // jQuery.proxy(name, context); 19 else if ( proxy && !jQuery.isFunction( proxy ) ) { 20 thisObject = proxy; 21 proxy = undefined; 22 } 23 } 24 if ( !proxy && fn ) { 25 /* 使用 proxy 保证 函数执行时, context 为指定值 */ 26 proxy = function() { 27 return fn.apply( thisObject || this, arguments ); 28 }; 29 } 30 // Set the guid of unique handler to the same of original handler, so it can be removed 31 if ( fn ) { 32 proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; 33 } 34 // So proxy can be declared as an argument 35 return proxy; 36 }
【最后】:不足之处,请批评与指正,多谢!
相关推荐
NET库的集合,用于通信,理解和模拟“梦幻之星”在线蓝色爆炸。 这些可用于构建仿真的PSOBB服务器或仿真的PSOBB客户端。 该项目以社区中许多人完成的17年反向工程工作,Sodaboy的代理, 以及之一为。 特别感谢Soly...
深入理解JavaProxy机制.doc
深入理解Java Proxy机制.doc
如果你前面4篇文章都没落下,那我想你一定会有兴趣看完下面所有的代码,并且会对proxy的实现和class字节码有更深刻的理解 当然,如果你看到源码就非常头疼也没有关系,可以跳过这部分源码直接看最后的验证部分
9.4 其他工具函数—$.proxy() /302 9.5 综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测/305 9.5.1 需求分析/305 9.5.2 效果界面/305 9.5.3 功能实现/306 9.5.4 代码分析/309 9.6 本章小结/...
js代码-Proxy理解
动态代理的代码例子,很好的入门案例。 理解SPRING的代理机制
到工厂方法到抽象工厂,这几种都带有“工厂”的模式,总是容易叫人迷糊,我仔细研究了下,然后用简单的例子做类比,列出了自己的通俗理解和比较,大部分是自己的体会,感觉理的比较清楚,末尾提了下Proxy模式。
JavaScript中的Proxy对象 Js中Proxy对象 Proxy对象用于定义基本操作的自定义行为,例如属性查找... 描述 Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过
超轻量型 Http proxy Server,用来学习非常不错,实现GET/POST 的 Web 处理,可以帮助我们真正理解服务器程序的本质。
2.7 Proxy模式.........................................................................................................................70 3 行为模式.......................................................
简单来说可以理解为 Kube-proxy + CNI 网络实现。Cilium 位于容器编排系统和Linux Kernel 之间,向上可以通过编排平台为容器进行网络以及相应的安全配置,向下可以通过在 Linux 内核挂载 eBPF 程序,来控制容器网络...
ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传,但类似 Proxy 这样的特性却很少见到有开发者在使用,一方面在于浏览器的兼容性,另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用...
深入理解计算机系统,http代理服务器的多线程实现,功能不是很完善
据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 “拦截”,当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该...
现在说说我对这些程序代码的理解,说实话,才开始听张老师讲的时候,我感觉很模糊的,但是当我真正理解了之后,觉得这些程序写的真是太好了。象以后我门在学习JAVA 的时候,一定要对每个知识点要慢慢的消化吃透,切...
Js中Proxy对象 Proxy对象用于定义基本...Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改。这
1. mysql-proxy (GA) 2. mysql router(待完善) 3. Mycat 7. 要理解为什么分库分表 8. 要理解如何分库分表 9. 什么时候选择垂直分库、什么时候选择水平分表 10. 要明白分库分表中会存在的问题 11. Mycat(录播) ...
Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理。 // config/index.js 文件 ...这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口