歡迎您光臨本站 註冊首頁

JavaScript函數重載操作實例淺析

←手機掃碼閱讀     f2h0b53ohn @ 2020-05-02 , reply:0

本文實例講述了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"]



[f2h0b53ohn ] JavaScript函數重載操作實例淺析已經有192次圍觀

http://coctec.com/docs/javascript/show-post-232541.html