原生javascript實現(xiàn)extend

Steve_Wang_ 發(fā)布于2019-08-22 16:12 / 3400人閱讀

摘要：使用會遍歷所有的可枚舉屬性，包括原型。所以需要判斷一下，是否是對象自身的屬性，而不是繼承于原型的。注意，會跳過那些值為或的源對象。

代碼

var obj1 = {"a": "obj2","b":"2"};
var obj2 = {name: "obj3"};
function extend() {
    var length = arguments.length;
    var target = arguments[0] || {};
    if (typeof target!="object" && typeof target != "function") {
        target = {};
    }
    if (length == 1) {
        target = this;
        i--;
    }
    for (var i = 1; i < length; i++) { 
        var source = arguments[i]; 
        for (var key in source) { 
            // 使用for in會遍歷數(shù)組所有的可枚舉屬性，包括原型。
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    }
    return target; 
}
console.log(extend(obj1,obj2));

extend 要實現(xiàn)的是給任意對象擴展

分析一下

在extend()函數(shù)中沒有寫死參數(shù)，是為了更好的擴展性，永遠也不知道需要擴展的對象有幾個。
而是通過arguments來獲取傳進來的參數(shù)。

arguments對象不是一個 Array 。它類似于Array，但除了length屬性和索引元素之外沒有任何Array屬性。

// 可以轉(zhuǎn)換為數(shù)組 ES2015
const args = Array.from(arguments);

console.log(typeof arguments); // "object"

target

target是傳進來的第一個參數(shù)，也就是需要擴展的對象。

var target = arguments[0] || {}; // 如果沒有傳參，則設(shè)為一個空對象

// 進行這一步判斷是為了保證代碼的可執(zhí)行性，如果傳進來的是個數(shù)字、布爾值，則設(shè)為一個空對象
if (typeof target!="object" && typeof target != "function") {
    target = {};
}

循環(huán)遍歷賦值

for (var i = 1; i < length; i++) { 
    var source = arguments[i]; 
    for (var key in source) { 
        // 使用for in會遍歷數(shù)組所有的可枚舉屬性，包括原型。
        if (Object.prototype.hasOwnProperty.call(source, key)) { 
            target[key] = source[key]; 
        } 
    } 
}

這一步就是將擴展源里的屬性、方法循環(huán)遍歷賦值到擴展項中。

如果擴展項和擴展源中有相同的屬性、方法，后面的會覆蓋前面的。 這個思想也是插件開發(fā)中，實現(xiàn)用戶配置覆蓋默認設(shè)置的實現(xiàn)思想。

hasOwnProperty

為什么需要使用hasOwnProperty，這跟for in有密切關(guān)系。

使用for in會遍歷所有的可枚舉屬性，包括原型。

所以需要判斷一下，是否是對象自身的屬性，而不是繼承于原型的。

那為什么不直接使用source.hasOwnProperty(source[key])呢？

JavaScript 并沒有保護 hasOwnProperty 屬性名，因此某個對象是有可能存在使用這個屬性名的屬性，使用外部的 hasOwnProperty 獲得正確的結(jié)果是需要的：

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: "Here be dragons"
};

foo.hasOwnProperty("bar"); // 始終返回 false

// 如果擔(dān)心這種情況，可以直接使用原型鏈上真正的 hasOwnProperty 方法
({}).hasOwnProperty.call(foo, "bar"); // true

// 也可以使用 Object 原型上的 hasOwnProperty 屬性
Object.prototype.hasOwnProperty.call(foo, "bar"); // true

call apply

上面用到的call和apply，就在這里記錄一下。

1.每個函數(shù)都包含兩個非繼承而來的方法：call()方法和apply()方法。
2.相同點：這兩個方法的作用是一樣的。
都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對象的值，以擴充函數(shù)賴以運行的作用域。
一般來說，this總是指向調(diào)用某個方法的對象，但是使用call()和apply()方法時，就會改變this的指向。
3.不同點：接收參數(shù)的方式不同。

apply()方法接收兩個參數(shù)，一個是函數(shù)運行的作用域（this），另一個是參數(shù)數(shù)組。

語法：apply([thisObj [,argArray] ]);，調(diào)用一個對象的一個方法，2另一個對象替換當(dāng)前對象。
說明：如果argArray不是一個有效數(shù)組或不是arguments對象，那么將導(dǎo)致一個TypeError，如果沒有提供argArray和thisObj任何一個參數(shù)，那么Global對象將用作thisObj。

call()方法第一個參數(shù)和apply()方法的一樣，但是傳遞給函數(shù)的參數(shù)必須列舉出來。

語法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，應(yīng)用某一對象的一個方法，用另一個對象替換當(dāng)前對象。
說明： call方法可以用來代替另一個對象調(diào)用一個方法，call方法可以將一個函數(shù)的對象上下文從初始的上下文改變?yōu)閠hisObj指定的新對象，如果沒有提供thisObj參數(shù)，那么Global對象被用于thisObj。

// call
    window.name = "FinGet";
    document.name = "FinGet1";

    var boy = {name: "FinGet2" };
    function showName(){
        console.log(this.name);
    }

    showName.call();         //FinGet (默認傳遞參數(shù))  this 是指向window
    showName.call(window);   //FinGet
    showName.call(document); //FinGet1
    showName.call(this);     //FinGet
    showName.call(boy);       //FinGet2

    var Pet = {
        words : "hello",
        speak : function (say) {
            console.log(say + ""+ this.words)
        }
    }
    Pet.speak("Speak"); // 結(jié)果：Speakhello

    var Dog = {
        words:"Wang"
    }

    //將this的指向改變成了Dog
    Pet.speak.call(Dog, "Speak"); //結(jié)果： SpeakWang

可以將上面代碼中的call換成apply，也是可以執(zhí)行的。

Object.assign

Object.assign(target, ...sources)

target 目標(biāo)對象

sources 源對象

如果目標(biāo)對象中的屬性具有相同的鍵，則屬性將被源中的屬性覆蓋。后來的源的屬性將類似地覆蓋早先的屬性。
注意，Object.assign 會跳過那些值為 null 或 undefined 的源對象。

var obj1 = {a:"1",b:"2"};
var obj2 = {c:"3",d:"4"};
Object.assign(obj1,obj2); // Object {a: "1", b: "2", c: "3", d: "4"}

obj1 也改變
Object {a: "1", b: "2", c: "3", d: "4"}

obj2
Object {c: "3", d: "4"}

更多相關(guān)Object.assign可以查看官網(wǎng)。