这也是今天写东西是遇到的一个问题,导致我联想起了函数重载的问题。
在javascript中是没有函数重载机制的,对于用惯了java开发的同学可能就表示吃惊了,我屮艸芔茻,函数
没有重载?那怎么搞?!!
从我今天遇到的问题说起吧,还是那个list页面,看过之前刚写的博客的可能知道,我在list页面写了search(order)
函数来执行查询跳转,但是这个页面很特殊,因为导航栏上面也是有一个搜索功能框的,我将那个功能框的搜索
函数设定为search(),接下来好玩的事情发生了:
我从主页面的导航搜索(两个查询参数from和to)进入到结果页(list页面),然后再次点击list页面上面的导航搜索
这时候,跳转的路径多了好多查询参数,这绝壁是执行了list页面的搜索啊,没有执行导航搜索函数search(),并且
地址栏上面 order=undefined,这就更加确定是执行了搜索页的搜索函数(因为只有这个函数才会在路径中拼order参
数),然后一看函数名:一个叫search(order),一个叫search();好像明白了点什么。
下班回家,写了个页面测试(刚刚写的):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div onclick="say('tt');" style="200px;height:200px;border:1px solid;">用户可以看到的</div> <script> function say(word){ alert(word); }; function say(){ alert("hello world"); }; </script> </body> </html>
点击,弹出“hello world”,函数申明换个顺序亦或是调用函数的时候去除函参,都只会执行最后一个函数名为
search()的函数,而不会管到底有没有形参,至此可以说明,javascript是没有函数重载的机制的。
那么这里为什么要说一下js函数的伪重载呢?
1.通过arguments实现的js函数重载
function f(){ var len= arguments.length; if(2 == len){ var length = arguments[0]; var width = arguments[1]; f2(length,width); }else{ var length = arguments[0]; f1(length); } } function f1(length){ alert("高为:"+length); } function f2(length,width){ alert("高为:"+length+",宽为:"+width); }
代码简单明了,不必多言。
2.JQuery之父John Resig写的《secrets of the JavaScript ninja》中js重载实现方法
网上的这个例子有一节代码看半天没看明白,毕竟明天要上班,准备睡觉了,但是!被这个问题困扰着一直睡
不着,于是爬起来去翻JS高程,一年多之前我还很懵懂的时候看了1/3,现在一些细节性的东西全部忘光了。
在我的再三思索和测试下,终于把这种重载的实现原理搞懂了!!!贴一下我的理解:
function addMethod(object, name, fn) { var old = object[name]; object[name] = function() { if(fn.length === arguments.length) { return fn.apply(this, arguments); } else if(typeof old === "function") { return old.apply(this, arguments); } } }
这个函数是为一个对象添加重载方法的。首先来看添加的第一个重载方法(先申明一个对象供后续的重载方法
操作数据):
var people = { values: ["Dean Edwards", "Alex Russell", "Dean Tom"] };
①无参数的重载方法
addMethod(people, "find", function() { return this.values; });
我们来看看这个函数的执行过程:
var old = people["find"]; people["find"] = function(){ if(function(){return this.values;}.length === arguments.length){ return function(){return this.values;}.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); } }
②一个参数的重载方法
addMethod(people, "find", function(firstName) { var ret = []; for(var i = 0; i < this.values.length; i++) { if(this.values[i].indexOf(firstName) === 0) { ret.push(this.values[i]); } } return ret; });
第三个参数的函数体过长,就不全写了
var old = people["find"]; people["find"] = function(){ if(firstName.length === arguments.length){ return firstName.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); } }
③n个参数的情况,就不介绍了~~
④执行的时候
这里我们分两种情况:执行两个参数的,执行一个参数的;
其实这里重载方法一直写下来,people的find属性到最后还是只有一个的,就是最后那一个,只不过,不知道你
注意到没,每次定义重载方法的时候,都会先将原本的方法拿到并赋值给一个变量old,然后存在else里返回,注
意,此处我用了“存”这个字眼,个人感觉这个做法实在是太绝妙了,如此嵌套有效地避免了多次定义属性值导致
的重载方法覆盖的问题。
按照上面的添加方法顺序,最后的people的find属性应该是这样的(多次添加以此类推):
people["find"] = function(){ if(firstName.length === arguments.length){ return firstName.apply(this,arguments); }else if(typeof function(){ if(function(){return this.values;}.length === arguments.length){ return function(){return this.values;}.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); } } === "function"){ return function(){ if(function(){return this.values;}.length === arguments.length){ return function(){return this.values;}.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); } }.apply(this, arguments); } }
如果执行 people.find("Dean") ,注意这个 arguments.length = 1,和firstName.length(函数支持输入的参数数量,很明显是1)
相等,于是执行第一个if条件里的内容,将参数 "Dean" 作为firstName函数的函参执行函数,也就是第二个重载方法;
如果执行 people.find(),注意这个 arguments.length = 0,就进行else的判断,很显然else判断成立,返回
function(){ if(function(){return this.values;}.length === arguments.length){ return function(){return this.values;}.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); } }.apply(this, arguments);
该语句将arguments作为参数执行函数,我们继续看这个函数:
if(function(){return this.values;}.length === arguments.length){ return function(){return this.values;}.apply(this,arguments); }else if(typeof old === "function"){ return old.apply(this, arguments); }
这个函数又进行一次判断,这次判断,很显然if条件成立(这个arguments是一直贯穿整个过程的),于是最终执行:
return this.values;
这个this指向谁?当然是最开始的people咯,于是当无参数时,最终返回people.values!!!
我认为这种方法处理重载,最大的亮点就是刚才说到的 var old = people["find"];以及将它放在else里面执行!