JavaScript 實(shí)現(xiàn) extend

Nekron 發(fā)布于2019-08-19 14:38 / 1688人閱讀

摘要：最近在寫移動端的項(xiàng)目，目前還沒有引用任何庫，所以很多的方法都要自己寫。是沒有這個原生方法的，今日得閑，就自己實(shí)現(xiàn)一個吧。文檔中描述的原型是它的含義是將合并到中，并返回合并過的。

最近在寫移動端的項(xiàng)目，目前還沒有引用任何庫，所以很多的方法都要自己寫。

用慣了jQuery，當(dāng)函數(shù)參數(shù)是對象的時候，定義默認(rèn)參數(shù)的時候會寫一個defaultOptions對象，然后通過jQuery.extend將實(shí)參擴(kuò)展到defaultOptions對象上。JavaScript是沒有extend這個原生方法的，今日得閑，就自己實(shí)現(xiàn)一個吧。

先想想這個函數(shù)需要做什么。jQuery extend文檔中描述的jQuery.extend原型是
jQuery.extend( target [, object1 ] [, objectN ] )

它的含義是將object1、object2...合并到target中，并返回合并過的target。這里面有兩個點(diǎn)需要注意一下。

合并是從后到前的；

target的值是被修改了的；

是深拷貝的（若是參數(shù)對象中有屬性是對象，也是會遞歸合并的）；

其實(shí)若不想原始數(shù)據(jù)被更改也很簡單，只要第一個參數(shù)傳空對象就好了。

那，直接上代嗎吧：

void function(global){
    var extend,
        _extend,
        _isObject;

    _isObject = function(o){
        return Object.prototype.toString.call(o) === "[object Object]";
    }

    _extend = function self(destination, source){
        for (var property in source) {
            if (source.hasOwnProperty(property)) {

                // 若sourc[property]是對象，則遞歸
                if (_isObject(source[property])) {

                    // 若destination沒有property，賦值空對象
                    if (!destination.hasOwnProperty(property)) {
                        destination[property] = {};
                    };

                    // 對destination[property]不是對象，賦值空對象
                    if (!_isObject(destination[property])) {
                        destination[property] = {};
                    };

                    // 遞歸
                    self(destination[property], source[property]);
                } else {
                    destination[property] = source[property];
                };
            }
        }
    }

    extend = function(){
        var arr = arguments,
            result = {},
            i;

        if (!arr.length) return {};

        for (i = 0; i < arr.length; i++) {
            if (_isObject(arr[i])) {
                _extend(result, arr[i])
            };
        }

        arr[0] = result;
        return result;
    }

    global.extend = extend;
}(window)

這樣似乎可以了。但是貌似有一個小問題，我們這里是按照參數(shù)順序從左到右依次執(zhí)行的，但是其實(shí)若是最后一個參數(shù)有的屬性，前面的參數(shù)上的該屬性都不需要再擴(kuò)展了。其實(shí)前面的所有參數(shù)都是將自己身上有的屬性而最后一個參數(shù)沒有的屬性補(bǔ)到最后一個參數(shù)上。既如此，是不是從參數(shù)列表的右側(cè)開始擴(kuò)展更好一些。

修改以后的代碼：

void function(global){
    var extend,
        _extend,
        _isObject;

    _isObject = function(o){
        return Object.prototype.toString.call(o) === "[object Object]";
    }

    _extend = function self(destination, source) {
        var property;
        for (property in destination) {
            if (destination.hasOwnProperty(property)) {

                // 若destination[property]和sourc[property]都是對象，則遞歸
                if (_isObject(destination[property]) && _isObject(source[property])) {
                    self(destination[property], source[property]);
                };

                // 若sourc[property]已存在，則跳過
                if (source.hasOwnProperty(property)) {
                    continue;
                } else {
                    source[property] = destination[property];
                }
            }
        }
    }

    extend = function(){
        var arr = arguments,
            result = {},
            i;

        if (!arr.length) return {};

        for (i = arr.length - 1; i >= 0; i--) {
            if (_isObject(arr[i])) {
                _extend(arr[i], result);
            };
        }

        arr[0] = result;
        return result;
    }

    global.extend = extend;
}(window)

寫代碼總是那么有意思！這里面可以看到，只要result身上有的屬性，都不需要再賦值了，嘿嘿。

當(dāng)然，目前水平有限，這段代碼肯定也還有著優(yōu)化空間，若看官有任何建議，還請不吝賜教。