js函数的伪重载
这也是今天写东西是遇到的一个问题，导致我联想起了函数重载的问题。
在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="width: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( == len){
var length = arguments[];
var width = arguments[];
f2(length,width);
}else{
var length = arguments[];
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 = ; i < this.values.length; i++) {
if(this.values[i].indexOf(firstName) === ) {
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里面执行！
js函数的伪重载的更多相关文章
- 原生js函数的伪重载
一.我们在学习java的时候,其中方法有一个比较的重要的特性重载,根据传入的参数的个数来执行不同的方法,而方法其根据签名来判断,而JavaScript却不能根据方法的签名来进行重载,只能通过参数的个数 ...
- __call PHP伪重载方法
为了避免当调用的方法不存在时产生错误,可以使用 __call() 方法来避免.该方法在调用的方法不存在时会自动调用,程序仍会继续执行下去 该方法有两个参数,第一个参数 $function_name 会 ...
- 如何实现JS函数的重载
javascript不能支持函数的重载,如下: function f(length) { alert("高为:"+length); } function f(length,widt ...
- 3.3 js函数
1.函数语法: 函数声明的方式:function 函数名(参数1,参数2-){//函数体;}函数调用:函数名(参数1,参数2-); 函数内不一定都指定返回值. 如果需要指定返回值,可用 return ...
- Js函数function基础理解
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...
- func_get_arg、func_get_args、func_num_args实现PHP伪重载
今天在看书的时候,发现书上有这么一条:函数重载的替代方法——伪重载 确实,在PHP中没有函数重载这个概念,让很多时候我们无法进行一些处理,甚至有时候不得不在函数后面定义好N个参数在看到了func_ge ...
- js函数动态传参
js函数体内可以通过arguments对象来接收传递进来的参数,利用这一对象属性可以动态传参. function box() { return arguments[0]+' | '+arguments ...
- paip.编程语言方法重载实现的原理及python,php,js中实现方法重载
paip.编程语言方法重载实现的原理及python,php,js中实现方法重载 有些语言,在方法的重载上,形式上不支持函数重载,但可以通过模拟实现.. 主要原理:根据参数个数进行重载,或者使用默认值 ...
- api日常总结：前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
随机推荐
- 北京电子科技学院（BESTI）实验报告2
北京电子科技学院(BESTI)实验报告2 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名)郑凯杰 .周恩德 学号:(按贡献大小排名)20145314 .20145217 ...
- 20144303 《Java程序设计》第一周学习总结
20144303 <Java程序设计>第一周学习总结 教材学习内容总结 下载.安装.调试了JDK. JavaSE是各语言个应用平台的基础,分为四个主要的部分:JVE,JRE,JDK,和ja ...
- 使用tcpdump 对nginx的access.log 非400的ip进行自动抓包
#抓取nginx access日志不是 400 的行,找出该ip ,并且启动抓包 #该脚本的执行要放在 crond 里面或者 while循环里面 ################## #网卡名称 ne ...
- LeetCode——3Sum
1. Question Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? ...
- input[type="file"]的样式以及文件名的显示
如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...
- org.springframework.dao.DuplicateKeyException: a different object with the same identifier value was
在使用hibernate框架里面的:saveOrUpdate报错: 意思就是另一个对象的id(id同值)已经被session关联了. 原因分析: 在第1步中中通过titleList.get(0)获取一 ...
- asp.net core开发注意事项
1.类库的创建尽量选择.net standard. 如果选择.net core 则.net framework不能调用该类库, .net core和.net framework都可以调用.net st ...
- Template、ItemsPanel、ItemContainerStyle、ItemTemplate （部分内容有待验证）
以下摘自“CSDN”的某人博客,部分内容有待验证,需注意“辨别学之....” 1.Template是指控件的样式 在WPF中所有继承自contentcontrol类的控件都含有此属性,(继承自Fram ...
- Apache 配置SSL网站
1. 申请证书 现在可以在阿里云或七牛上申请免费的证书,这里以阿里云为例 进入阿里云证书申请界面 https://www.aliyun.com/product/cas ...
- 性能测试TPS目标值确定-二八原则
在性能测试中通常使用二八原则来量化业务需求. 二八原则:指80%的业务量在20%的时间里完成. TPS(QPS)=并发数/响应时间 例:如某个公司1000个员工,在周五下午3点-5点有90%的员工登陆 ...