原生javascript實(shí)現(xiàn)extend

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

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

代碼

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會(huì)遍歷數(shù)組所有的可枚舉屬性，包括原型。
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    }
    return target; 
}
console.log(extend(obj1,obj2));

extend 要實(shí)現(xiàn)的是給任意對(duì)象擴(kuò)展

分析一下

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

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

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

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

target

target是傳進(jìn)來的第一個(gè)參數(shù)，也就是需要擴(kuò)展的對(duì)象。

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

// 進(jìn)行這一步判斷是為了保證代碼的可執(zhí)行性，如果傳進(jìn)來的是個(gè)數(shù)字、布爾值，則設(shè)為一個(gè)空對(duì)象
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會(huì)遍歷數(shù)組所有的可枚舉屬性，包括原型。
        if (Object.prototype.hasOwnProperty.call(source, key)) { 
            target[key] = source[key]; 
        } 
    } 
}

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

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

hasOwnProperty

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

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

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

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

JavaScript 并沒有保護(hù) hasOwnProperty 屬性名，因此某個(gè)對(duì)象是有可能存在使用這個(gè)屬性名的屬性，使用外部的 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.每個(gè)函數(shù)都包含兩個(gè)非繼承而來的方法：call()方法和apply()方法。
2.相同點(diǎn)：這兩個(gè)方法的作用是一樣的。
都是在特定的作用域中調(diào)用函數(shù)，等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值，以擴(kuò)充函數(shù)賴以運(yùn)行的作用域。
一般來說，this總是指向調(diào)用某個(gè)方法的對(duì)象，但是使用call()和apply()方法時(shí)，就會(huì)改變this的指向。
3.不同點(diǎn)：接收參數(shù)的方式不同。

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

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

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

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

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

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

    showName.call();         //FinGet (默認(rèn)傳遞參數(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)對(duì)象

sources 源對(duì)象

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

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)。

云服務(wù)器 GPU云服務(wù)器原生javascript javascript原生原生js實(shí)現(xiàn) 原生javascript事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94139.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Steve_Wang_

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Postman教程-Pre-request Script和Tests腳本的介紹

閱讀 1074·2021-11-12 10:34
pia云：國慶鉅惠，限量放出！買多久送多久，先到先得！月付20元起，

閱讀 999·2021-09-30 09:56
有關(guān)于css的四種布局

閱讀 676·2019-08-30 15:54
關(guān)于ECharts折線圖非節(jié)點(diǎn)的點(diǎn)擊事件

閱讀 2610·2019-08-30 11:14
iOS safari瀏覽器上overflow: scroll元素?zé)o法滾動(dòng)bug深究

閱讀 1476·2019-08-29 16:44
徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

閱讀 3215·2019-08-29 16:35
談?wù)凧s前端模塊化規(guī)范

閱讀 2500·2019-08-29 16:22
深入理解ES6（三）（字符串的擴(kuò)展）

閱讀 2453·2019-08-29 15:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

原生javascript實(shí)現(xiàn)extend

相關(guān)文章

JavaScript基礎(chǔ): 類與繼承

淺談React事件機(jī)制

淺談React事件機(jī)制

從Vue數(shù)組響應(yīng)化所引發(fā)的思考

JavaScript 工作原理之十五－類和繼承及 Babel 和 TypeScript 代碼轉(zhuǎn)換探秘

發(fā)表評(píng)論

0條評(píng)論

Steve_Wang_

男|高級(jí)講師

TA的文章

Postman教程-Pre-request Script和Tests腳本的介紹

pia云：國慶鉅惠，限量放出！買多久送多久，先到先得！月付20元起，

有關(guān)于css的四種布局

關(guān)于ECharts折線圖非節(jié)點(diǎn)的點(diǎn)擊事件

iOS safari瀏覽器上overflow: scroll元素?zé)o法滾動(dòng)bug深究

徹底搞懂CSS層疊上下文、層疊等級(jí)、層疊順序、z-index

談?wù)凧s前端模塊化規(guī)范

深入理解ES6（三）（字符串的擴(kuò)展）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

原生javascript實(shí)現(xiàn)extend

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！