碉堡了！ECMAScript 5的Object.create方法

2018-06-16 20:30 更新

一直對ES5處于了解的階段，沒有深入實踐過，最近研究發(fā)現(xiàn)Object.create方法有些缺陷，呵呵。

什么！??！你還不知道這個方法，難道你還停留在上個世紀，騷年是時候?qū)W習ES5了，因為ES6馬上出來的。如果你記不清楚這個方法的語法了，那么我建議你閱讀一下這篇文章。

前言

好了言歸正傳，先來看看Object.create的語法：

Object.create(proto [, propertiesObject ])

期第二個參數(shù)的涉及我很不滿意，其必須為屬性描述符，眾所周知屬性描述符這東西，寫起來有些蹩腳，而且，咱又不寫公共庫，有些特性也用不到，我希望其能接受普通對象，并且接受多個對象，有點類似mixin的意思，所以我擴展了一下create，姑且就放到Object.creates上吧，如果你不贊成這種方法，可以隨意放置。

語法

Object.creates的語法如下：

Object.creates(proto, [object...])

第一個參數(shù)和Object.create的第一個參數(shù)一樣，后面有一個或多個，對象，其可以將后面對象的屬性extend到前面去，是不是有點jq的extend的意思，差不多就是這個意思。

實現(xiàn)

借助Object.getOwnPropertyDescriptor和Object.defineProperty我們可以獲取對象屬性的屬性描述符，然后賦給目標對象，從而實現(xiàn)只傳入對象的目的，具體代碼如下：

Object.creates = function (proto) {
    var obj = Object.create(proto);
    //如果只有一個參數(shù)
    if (arguments.length < 2) return obj;
	
    [].slice.call(arguments, 1).forEach(function (copy) {
        Object.getOwnPropertyNames(copy).forEach(function (prop) {
            Object.defineProperty(obj, prop, Object.getOwnPropertyDescriptor(copy, prop));
        });
    });
    return obj;
}

代碼使用了es5中很多數(shù)組相關(guān)的方法，如果你還不了解，可以看下這篇文章。

實例

下面是一個例子，可以看出比Object.create簡單多了。

Object.creates(Object.prototype, {a: 1, b: 2}, {c: 3}, {a: 4});
// > Object {a: 4, b: 2, c: 3}

從例子中可以看到，后面的對象的屬性，覆蓋了前面對象的屬性，這符合第一直覺。

總結(jié)

其實我開始比較抵制es5的create方法，因為我覺的它很繁瑣，要定義那么多其實不那么常用的東西，所以我寫了這個方法。我覺得它很好用，如果你有什么想法，那在評論里和我一起討論吧。

參考資料

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號