概念
重載是指函數或者方法有相同的名稱，但是參數個數或類型不相同的情形，這樣的同名不同參的函數或者方法之間，互相稱之爲重載函數或方法。
我們知道，JavaScript函數可以隨意傳遞任意數量、任意類型的參數，那麼它有沒有重載呢？
答案是有的，下面我們通過3種方法來實現JavaScript的函數重載。
實現
0. 目標
我們有一個people對象
var people = {
values: ['Dean Edwards', 'Sam Stephenson', 'Alex Russell', 'Dean Tom']
};
複製代碼想要實現一個find方法，不傳參數的時候，輸出所有名字，只傳1個參數的時候，輸出所有fristName和參數相同的名字，傳2個參數的時候，輸出所有firstName和lastName和2個參數分別相同的名字。
people.find(); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
people.find('Dean'); // ["Dean Edwards", "Dean Tom"]
people.find('Dean', 'Edwards'); // ["Dean Edwards"]
複製代碼1. 利用arguments和switch實現重載
people.find = function () {
switch (arguments.length) {
case 0:
return this.values;
case 1:
return this.values.filter((value) => {
var firstName = arguments[0];
return value.indexOf(firstName) !== -1 ? true : false;
});
case 2:
return this.values.filter((value) => {
var fullName = `${arguments[0]} ${arguments[1]}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
}
};
console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards')); // ["Dean Edwards"]
複製代碼這種方式大家肯定都能看懂，就不多說啦。
2. 利用arguments和閉包實現重載
function addMethod (object, name, fn) {
// 把前一次添加的方法存在一個臨時變量old中
var old = object[name];
// 重寫object[name]方法
object[name] = function () {
if (fn.length === arguments.length) {
// 如果調用object[name]方法時，如果實參和形參個數一致，則直接調用
return fn.apply(this, arguments);
} else if (typeof old === 'function') {
// 如果實參形參不一致，判斷old是否是函數，如果是，就調用old
return old.apply(this, arguments);
}
};
}
addMethod(people, 'find', function() {
return this.values;
});
addMethod(people, 'find', function(firstName) {
return this.values.filter((value) => {
return value.indexOf(firstName) !== -1 ? true : false;
});
});
addMethod(people, 'find', function(firstName, lastName) {
return this.values.filter((value) => {
var fullName = `${firstName} ${lastName}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
});
console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(people.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(people.find('Dean', 'Edwards')); // ["Dean Edwards"]
複製代碼這裏addMethod(object, name, fn)方法是核心。我們着重分析一下爲什麼這裏會有閉包，可以保存上一個註冊的函數。
function addMethod (object, name, fn) {
// object, name, fn是傳入的3個參數
var old = object[name];
object[name] = function () {
// 這裏對old和fn進行了引用
if (fn.length === arguments.length) {
return fn.apply(this, arguments);
} else if (typeof old === 'function') {
return old.apply(this, arguments);
}
};
}
複製代碼object是另外一個引用對象，它的一個方法中引用了old和fn，所以對於addMethod來說，它的局部變量在addMethod函數執行完後，仍然被另外的變量所引用，導致它的執行環境無法銷燬，所以產生了閉包。
因此，每次調用addMethod，都會有一個執行環境保存着當時的old和fn，所以在調用people.find()的時候可以找到當時注入的fn，實現函數重載。
3. 利用Proxy和arguments實現重載
var proxy = new Proxy(people, {
get: function (target, key, receiver) {
if (key === 'find') {
return function () {
switch (arguments.length) {
case 0:
return this.values;
case 1:
return this.values.filter((value) => {
var firstName = arguments[0];
return value.indexOf(firstName) !== -1 ? true : false;
});
case 2:
return this.values.filter((value) => {
var fullName = `${arguments[0]} ${arguments[1]}`;
return value.indexOf(fullName) !== -1 ? true : false;
});
}
};
}
return Reflect.get(target , key , receiver);
},
set: function (target, key, value, receiver) {
return Reflect.set(target, key, value, receiver);
}
});
console.log(proxy.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
console.log(proxy.find('Dean')); // ["Dean Edwards", "Dean Tom"]
console.log(proxy.find('Dean', 'Edwards')); // ["Dean Edwards"]
複製代碼這樣寫其實感覺有點畫蛇添足了，就當成是另外一種思路吧。
總結
JavaScript可以實現函數重載，主要有兩種思想：
- 利用arguments類數組來判斷接收參數的個數
- 利用閉包保存以前註冊進來的同名函數