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- ...
随机推荐
- COGS 293.[NOI2000] 单词查找树
★ 输入文件:trie.in 输出文件:trie.out 简单对比 时间限制:1 s 内存限制:128 MB 在进行文法分析的时候,通常需要检测一个单词是否在我们的单词列表里.为了提高 ...
- db2 xml 转 table
版本:DB2 Version 9.1 1.创建测试表,初始化数据 create table emp (doc XML); INSERT INTO EMP VALUES ('<dept bldg= ...
- Commons Configuration之二基本特性和AbstractConfiguration
Configuration接口定义一大堆方法.一切从头开始实现这些方法非常困难.因为AbstractConfiguration类存在.该类在Commons Configuration中充当大多数Con ...
- ng2 quickstart
1.下载 git clone https://github.com/angular/quickstart.git quickstart-angular 2.安装模块 npm install 3.启动 ...
- PyTorch源码解读之torchvision.transforms（转）
原文地址:https://blog.csdn.net/u014380165/article/details/79167753 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- POJ2159 ancient cipher - 思维题
2017-08-31 20:11:39 writer:pprp 一开始说好这个是个水题,就按照水题的想法来看,唉~ 最后还是懵逼了,感觉太复杂了,一开始想要排序两串字符,然后移动之类的,但是看了看 好 ...
- Dancing Links DLX
Dancing Links DLX Dancing Links 用来解精准覆盖问题. 精准覆盖问题有两种版本. 精准覆盖 : 给一个01矩阵,如何选出若干行,使得每列都有且仅有一个1. 可以求最少行数 ...
- c++之迭代器失效
1.首先从一到题目开始谈说起迭代器失效.有时我们很自然并且自信地 用下面方法删除vector元素: #include <iostream>#include <stdio.h># ...
- mysql 索引相关问题
mysql中key .primary key .unique key 与index区别 https://blog.csdn.net/nanamasuda/article/details/5254317 ...
- 手机端页面自适应解决方案—rem布局（进阶版，附源码示例）
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...