1. 程式人生 > >利用原型對原始物件的方法進行擴充套件(javascript面試題)

利用原型對原始物件的方法進行擴充套件(javascript面試題)

來源: 這是一個很常見的javascript面試題目。

通常喜歡出的題目是: 對String物件定義一個重複n次數的方法。或者是對Array物件擴充套件一個求和的方法。

下面我就以擴充套件Array的求和方法作為例子。有興趣的同學可以自己寫寫第一個題目。

分析:由於擴充套件原始物件的方法,我們就必須在原型鏈(prototype)上面新增方法了。如果你不懂什麼是原型,那就先去看我的部落格面向物件。(暫時還沒有寫,嘻嘻!)

Array.prototype.sum = function() {
    var result = 0;  //此處必須要賦值一個0,不能為空,否則會返回NaN
    for
(var i = 0; i < this[length]; i++){ reslut += this[i]; //這裡需要注意的是arguments已經不能使用了,要用this。 } }

寫到這裡,我們可以隨便宣告一個數組去求和!

let test = [1,2,34,5,6];
console.log(test.sum());   

至此!擴充套件的sum方法就算完成了!到此就結束了?

其實不然,試想如果我們的數組裡面出現了字串,怎麼辦?如同這樣:

let test = [1,2,'str',34,5,6];
console.log(test.sum());    // 輸出:3str3456

顯然結果並不是我們想要的!我們應該過濾掉陣列中的字串。(當然具體看需求,比如字元就拼接,數值就相加)

擴充套件版:

Array.prototype.sum = function() {
    var result = 0;
    for(var i =0; i<this.length;i++){
        if(typeof this[i] === 'number'){
            result += this[i];
        }else{
            console.log('Tips: ['+ this[i] + '] isn\'t Number!'
); } } return result; }

至此!算是結束了?其實還有一處問題。
試問: 如果原型鏈上面的sum已經被呼叫,那該怎麼辦?
比如這樣:

Array.prototype.sum = function(){
    return 'The sum was already occupied!'
}
//如果在求和之前已經定義過了sum函式。我們再次定義!
Array.prototype.sum = function(){
    var result = 0;
    for(var i =0; i<this.length;i++){
        if(typeof this[i] === 'number'){
            result += this[i];
        }else{
            console.log('Tips: ['+ this[i] + '] isn\'t Number!');
        }
    }
    return result;
}

let test = [1,2,34,5,6];
console.log(test.sum());  // 48 

此時,是可以正常求和。但是已經與之前定義的sum方法衝突。無法得到第一個sum()方法的return 的值了!

為了解決相容的問題,我們利用一個 “||”。雖然不能解決相容問題!但是我們就可以知道sum方法名是否被使用了。後期做出改變。

Array.prototype.sum = Array.prototype.sum || function(argument){
    var result = 0;
    for(var i =0; i<this.length;i++){
        if(typeof this[i] === 'number'){
            result += this[i];
        }else{
            console.log('Tips: ['+ this[i] + '] isn\'t Number!');
        }
    }
    return result;
}

至此,一個原始物件的方法擴充套件就到這裡了! 如發現不妥之處,請留言指正!

附上: string物件的repeatify()

String.prototype.repeatify = String.prototype.repeatify || function(n){
    var str = '';
    for (var i = 0; i < n; i++) {
        str += this;
    }
    return str;
}

let str = 'test';
console.log(str.repeatify(3));  //testtesttest