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- ...
随机推荐
- 20145321 《Java程序设计》第2周学习总结
20145321 <Java程序设计>第2周学习总结 教材学习内容总结 一.类型.变量.运算符 1.类型(基本类型) (1)整数:short(占2字节),int(占4字节),long(占8 ...
- Linux简单编程学习心得
在Linux环境下简单编程学习心得 linux编程过程 在上周的<信息安全设计基础>的课程学习中学习到了在虚拟的linux环境下简单的编程.学习过程中接触到了vim.gcc和gcd在实验楼 ...
- 【读书笔记】《深入浅出nodejs》第五章 内存控制
海量请求+长时间运行 -> 内存控制 -> 一切资源高效循环利用 1. V8的垃圾回收机制与内存限制 在Node中通过JavaScript使用内存时,只能使用部分内存(64位系统下约1.4 ...
- 资源 | TensorFlow推出新工具Seedbank：即刻使用的预训练模型库【转】
本文转载自:http://tech.ifeng.com/a/20180713/45062331_0.shtml 选自TensorFlow 作者:Michael Tyka 机器之心编译 参与:路.王淑婷 ...
- python-高阶函数和闭包
高阶函数:把函数作为参数传入,这样的函数成为高阶函数. 高阶函数,higher-order function Abs()内置函数:绝对值 函数名是什么:指向函数的变量 传入函数 一个函数的参数是否可以 ...
- Hdu 1455
#include <iostream> #include <cstdio> #include <cstdlib> #include <algorithm> ...
- TCP状态切换流程
enum { /* * Description of States: * * TCP_SYN_SENT sent a connection request, waiting for ack * * T ...
- NPM Scripts 2 -- rimraf copyfiles imagemin usemin htmlmin uglifyjs
NPM Scripts Part 2 Objectives and Outcomes In this exercise you will learn to build a distribution f ...
- java高级特性（2）--循序渐进地培养面向对象的思维方式
在我踏入软件行业后,一直苦于没有前辈指点.我常年困惑于两个问题:一是怎样培养面向对象设计的思维能力?二是怎样进行架构设计,有无方法? 因为我做了那么多年项目,却很少看到有漂亮的面向对象思维写出来的代码 ...
- winform无边框窗体点击任务栏最小化
protected override CreateParams CreateParams { get { const int WS_MINIMIZEBOX = 0x00020000; // Winus ...