溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是如何實現JavaScript函數重載，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
上個星期四下午，接到了網易的視頻面試（前端實習生第二輪技術面試）。面了一個多小時，自我感覺面試得很糟糕的，因為問到的很多問題都很難，根本回答不上來。不過那天晚上，還是很驚喜的接到了HR面電話。現在HR面試的結果還沒有出來，聽說要等到下周二才出，所以再好好等幾天哈。
前面說了這多的廢話，現在是時候和伙伴們分享一下面試干貨哈。因為二面問到的內容還挺多的，所以這里就不全部列舉出來了。這里只討論一下函數的重載。
下面是面試時的對話，“面”指面試官，“我”就是我~
面：你能說說JS怎么實現函數的重載嗎？
我：因為JS的參數是可變長度的，是沒有重載的！也是沒必要用重載的！
面：怎么沒必要使用重載？你先告訴什么是重載？
我： 重載就是一組具有相同名字、不同參數列表的函數（方法）。
面：對的，那為什么你還說JS沒有重載，也沒必要使用重載呢？
我當時一臉懵逼了，因為不知道面試官到底是想要考我什么，因為我記得《JS高級程序設計》里是提到過函數是沒有重載的啊（后來查了一下，在第三版的66頁，親們可以自己翻開書本看看），但是現在面試官不同意我的回答啊，就是說在他看來，JS是有重載的，我不能堅持說沒有重載啊。所以我就往重載的概念方向靜靜的思考了片刻，然后想到了使用arguments對象進行判斷。于是：
我：我覺得，如果JS函數需要實現重載的話，可以根據arguments對象的length值進行判斷。
面： 你可以寫個例子出來給我看嗎？
然后，我就在輸入框里面寫了如下的代碼：
function overLoading() {
// 根據arguments.length，對不同的值進行不同的操作
switch(arguments.length) {
case 0:
/*操作1的代碼寫在這里*/
break;
case 1:
/*操作2的代碼寫在這里*/
break;
case 2:
/*操作3的代碼寫在這里*/
//后面還有很多的case......
}
}我把代碼發給了面試官。
面：對，這就是重載的一種實現的方法！不過你能不能想出一個更好的方法呢？
我： 暫時就想到這一種方法了。
好吧，跟面試官的對話就寫這么多了。他說問我能不能想出一個更好的辦法，意味著肯定還有其他我不知道的方法。所以，后來就開始翻書本查找。哈哈，終于在JQuery之父John Resig寫的《secrets of the JavaScript ninja》找到了一個絕佳巧妙的方法！那種方法充分的利用了閉包的特性！
在介紹這個方法之前，我們先來看看外國人名字組成哈，比如，John Resig，John是first-name，Resig是last-name，就相當于我們的姓名由姓和名組成一樣。
我們現在有這樣的一個需求，有一個people對象，里面存著一些人名，如下：
var people = {
values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"]
};我們希望people對象擁有一個find方法，當不傳任何參數時，就會把people.values里面的所有元素返回來；當傳一個參數時,就把first-name跟這個參數匹配的元素返回來；當傳兩個參數時，則把first-name和last-name都匹配的才返回來。因為find方法是根據參數的個數不同而執行不同的操作的，所以，我們希望有一個addMethod方法，能夠如下的為people添加find的重載：
addMethod(people, "find", function() {}); /*不傳參*/
addMethod(people, "find", function(a) {}); /*傳一個*/
addMethod(people, "find", function(a, b) {}); /*傳兩個*/這時候問題來了，這個全局的addMethod方法該怎么實現呢？John Resig的實現方法如下，代碼不長，但是非常的巧妙：
function addMethod(object, name, fn) {
var old = object[name]; //把前一次添加的方法存在一個臨時變量old里面
object[name] = function() { // 重寫了object[name]的方法
// 如果調用object[name]方法時，傳入的參數個數跟預期的一致，則直接調用
if(fn.length === arguments.length) {
return fn.apply(this, arguments);
// 否則，判斷old是否是函數，如果是，就調用old
} else if(typeof old === "function") {
return old.apply(this, arguments);
}
}
}現在，我們一起來分析一個這個addMethod函數，它接收3個參數，第一個為要綁定方法的對象，第二個為綁定的方法名稱，第三個為需要綁定的方法（一個匿名函數）。函數體的的分析已經在注釋里面了。
OK，現在這個addMethod方法已經實現了，我們接下來就實現people.find的重載啦！全部代碼如下：
//addMethod
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方法的重載 */
// 不傳參數時，返回peopld.values里面的所有元素
addMethod(people, "find", function() {
return this.values;
});
// 傳一個參數時，按first-name的匹配進行返回
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;
});
// 傳兩個參數時，返回first-name和last-name都匹配的元素
addMethod(people, "find", function(firstName, lastName) {
var ret = [];
for(var i = 0; i < this.values.length; i++) {
if(this.values[i] === (firstName + " " + lastName)) {
ret.push(this.values[i]);
}
}
return ret;
});
// 測試：
console.log(people.find()); //["Dean Edwards", "Alex Russell", "Dean Tom"]
console.log(people.find("Dean")); //["Dean Edwards", "Dean Tom"]
console.log(people.find("Dean Edwards")); //["Dean Edwards"]看完這篇關于如何實現JavaScript函數重載的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
