jQuery源码分析之proxy函数
来源:互联网 发布:系统网络结构设计 编辑:程序博客网 时间:2024/05/19 01:29
测试代码1:
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ var objMyInfo={name:"xx",sex:"male",showEvent:function(){ alert(this); alert("this->"+this.value); } }//$("#button1").bind("click",objMyInfo.showEvent);//这时候打印[object HTMLButtonElement]和"this->先谢谢"//proxy函数如果没有绑定第二个参数context,那么这里面的context就是window,也就是函数里面的this指向了window对象!//var proxy=$.proxy(objMyInfo.showEvent)// proxy();//打印[object Window]和"this->undefined"//1,2表示要额外传入showEvent函数的参数,在里面通过arguments对象访问,同时也会把objMyInfo作为this传入该函数//所以length是3,this指向objMyInfo对象 var to=$.proxy(objMyInfo.showEvent,objMyInfo,1,2);$("#button1").bind("click",to);});</script></head><body><button id="button1" value="先谢谢">点击测试</button></body></html>测试代码2:下面我们把jQuery源码中间的proxy函数一部分提出来作为函数调用来测试一下如果第二个参数是字符串的情况:
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script></head><body><p id="p">在我后面添加</p><script type="text/javascript"> function proxy(fn,context) {//第二个参数是string也就是执行环境,temp=objPerson("test");//context=objPerson,fn=temp也就是说这时候的fn就是第一个参数的一个函数属性 if ( typeof context === "string" ) {tmp = fn[ context ];context = fn;fn = tmp;}alert("context->"+context.name+"fn->"+fn);}//proxy函数结束var objPerson = {name: "John Doe",age: 32,test: function(){alert("xxx");//我作为context对象objPerson的函数属性 } } proxy(objPerson,"test");//打印"John Doe"和function(){alert("xxx")}</script></body></html>note:如果第二个参数是string类型,那么结果就是绑定的函数是第一个对象的相应属性的函数,而这个相应属性的名字由第二个字符串指定!
测试代码3:
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ var objMyInfo={name:"xx",sex:"male",showEvent:function(){ alert(arguments.length); } } var to=$.proxy(objMyInfo.showEvent,objMyInfo,1,2);//在返回proxy函数之前首先把多余的1,2参数保存下来,这样就形成了一个闭包,下次调用proxy时候可以访问!to(3,4,5);//打印5,也就是参数个数是5了!这里的3,4,5就是上面的arguments参数!,所以在showEvent函数里面的参数个数是5! alert(to.guid);//每个函数都有一个guid。这里打印1});</script></head><body><button id="button1" value="先谢谢">点击测试</button></body></html>
proxy函数源码分析:
proxy: function( fn, context ) {var args, proxy, tmp;//这是上面提到的第二个参数是string字符串的情况if ( typeof context === "string" ) { tmp = fn[ context ]; context = fn; fn = tmp;}// Quick check to determine if target is callable, in the spec// this throws a TypeError, but we will just return undefined.//如果第一个参数不是函数,那么直接返回undefined//因为如果不是函数,但是我们把它当作函数调用,直接返回TypeError异常if ( !jQuery.isFunction( fn ) ) {return undefined;}// Simulated bind//获取传递进来的第三个以及以后的参数args = slice.call( arguments, 2 );//对proxy函数进行重新赋值,设置为一个新的函数//fn函数里面的this指向的就是context或者this!默认是当前函数,也就是如果不传递context,那么就是当前函数proxy = function() {return fn.apply( context || this, args.concat( slice.call( arguments ) ) );};// Set the guid of unique handler to the same of original handler, so it can be removedproxy.guid = fn.guid = fn.guid || jQuery.guid++;return proxy;}
0 0
- jQuery源码分析之proxy函数
- jQuery源码分析之jQuery.makeArray函数
- 源码分析之jQuery.merge函数
- jQuery源码分析之$.inArray()函数
- jQuery源码分析之$.index函数
- jQuery源码分析之$.map函数
- jQuery源码分析之contains函数
- jQuery源码分析之globalEval函数
- jQuery源码之init函数的分析
- kubernetes之kube-proxy源码分析
- jquery源码分析之扩展函数 extend, $.extend
- jQuery源码分析之$.grep()函数四问
- jQuery源码分析之appendTo,prependTo,insertBefore,insertAfter,replaceWith函数
- jQuery源码分析之ajaxConverter与ajaxHandleResponse函数
- jQuery源码分析-each函数
- jQuery源码分析-extend函数
- Proxy源码分析
- kube-proxy源码分析
- Mac OS X 下的JDK路径
- OpenGL3.0教程 第一课:新建一个窗口
- 程序平台系统开发修复
- java的23种模式
- Save as PDF/X-3/4/5 error with pdflib
- jQuery源码分析之proxy函数
- 数学之美番外篇:平凡而又神奇的贝叶斯方法
- 【Android】上周问题记录
- OpenGL3.0教程 第二课: 画第一个三角形
- Light oj 1205 - Palindromic Numbers(数位dp)
- C# 连接数据库
- OpenGL3.0教程 第三课: 矩阵
- Redis 宕机之后 启动失败 启动不了 原因之一 aof 文件出错 以及持久化介绍
- FastJson解析