（轉）es6中object.create()和object.assign()

今天學習javascript面向對象，在學習Obejct方法時了解到create方法，偶像想起之前使用的assign方法，順帶查找一番，感覺這篇博客講解詳細，遂轉載。

先簡單提一下裝飾器函數，許多面向對象的語言都有修飾器（Decorator）函數，用來修改類的行為。目前，es6中有個提案將這項功能，引入了 ECMAScript。而在ts中則完全支持裝飾器。這段時間看ng2看得到我頭大。

Object.assing(target,…sources)

參考自微軟的開發者社區。

用途：將來自一個或多個源對象中的值復制到一個目標對象。

語法：Object.assign(target, …sources );

參數：   target，  必需。可枚舉屬性復制到的對象。

            …sources， 必需。從其中復制可枚舉屬性的對象。

異常：  如果存在分配錯誤，此函數將引發 TypeError，這將終止復制操作。如果目標屬性不可寫，則將引發 TypeError。

備注： null 或 undefined 源被視為空對象一樣對待，不會對目標對象產生任何影響。

/*合並對象*/

例1，

var first = { name: "Bob" };
var last = { lastName: "Smith" };

var person = Object.assign(first, last);
console.log(person);/*{ name: 'Bob', lastName: 'Smith' }*/

/*克隆對象*/
例2，

var obj = { person: "Bob Smith"};
var clone = Object.assign({}, obj);
console.log(obj);/*{ person: 'Bob Smith' }*/

這里探究備注內容，"null 或 undefined 源被視為空對象一樣對待，不會對目標對象產生任何影響。"

var test=null;
var test1=Object.assign({},test);
console.log(test1);/*{}*/

var test2=undefined;
var test4=Object.assign({},test2);
console.log(test4);/*{}*/

通過以上可以看出，test1和test4依然空對象，印證了備注里面的內容。

 

Object.create(prototype,descriptors)

用途：創建一個具有指定原型且可選擇性地包含指定屬性的對象。

參數：prototype       必需。  要用作原型的對象。  可以為 null。

          descriptors     可選。  包含一個或多個屬性描述符的 JavaScript 對象。

“數據屬性”是可獲取且可設置值的屬性。  數據屬性描述符包含 value 特性，以及 writable、enumerable 和 configurable 特性。  如果未指定最后三個特性，則它們默認為 false。  只要檢索或設置該值，“訪問器屬性”就會調用用戶提供的函數。  訪問器屬性描述符包含 set 特性和/或 get 特性。

返回值： 一個具有指定的內部原型且包含指定的屬性（如果有）的新對象。

 

異常：   如果滿足下列任一條件，則將引發 TypeError 異常：

• prototype 參數不是對象且不為 null。
• descriptors 參數中的描述符具有 value 或 writable 特性，並具有 get 或 set 特性。
• descriptors 參數中的描述符具有不為函數的 get 或 set 特性。

備注：若要停止原型鏈，可以使用采用了 null prototype 參數的函數。  所創建的對象將沒有原型。

創建使用null原型的對象並添加兩個可枚舉的屬性。

例1，

var newObj = Object.create(null, {
            size: {
                value: "large",
                enumerable: true
            },
            shape: {
                value: "round",
                enumerable: true
            }
        });

document.write(newObj.size + "<br/>");/*large*/
document.write(newObj.shape + "<br/>");/*round*/
document.write(Object.getPrototypeOf(newObj));/*null*/



創建一個具有與 Object 對象相同的內部原型的對象。 該對象具有與使用對象文本創建的對象相同的原型。 Object.getPrototypeOf 函數可獲取原始對象的原型。 若要獲取對象的屬性描述符，可以使用Object.getOwnPropertyDescriptor 函數  例2，

var firstLine = { x: undefined, y: undefined };

var secondLine = Object.create(Object.prototype, {
        x: {
                value: undefined, 
                writable: true, 
                configurable: true, 
                enumerable: true
            },
            y: {
                value: undefined, 
                writable: true, 
                configurable: true, 
                enumerable: true
            }
});

document.write("first line prototype = " + Object.getPrototypeOf(firstLine));/*first line prototype = [object Object])*/
document.write("<br/>");
document.write("second line prototype = " + Object.getPrototypeOf(secondLine));/*first line prototype = [object Object]*/


創建一個具有與 Shape 對象相同的內部原型的對象。
例3，

// Create the shape object.
var Shape = { twoDimensional: true, color: undefined, hasLineSegments: undefined };

var Square = Object.create(Object.getPrototypeOf(Shape)); 

要區分數據屬性還是訪問器屬性。
以下是那數據屬性作為例子說明，配合訪問器屬性的Object.create()用法暫時還木有搞定。
例4，

var Shape = { twoDimensional: true, color: undefined, hasLineSegments: undefined };

var Square = Object.create(Object.getPrototypeOf(Shape),{xiaoming:{
   value:"hello,world",
   writable:true,

}});
Square.xiaoming="xiaohua";
console.log(Square.xiaoming);/*xiaohua8*/
如果默認writable、enumerable、configurable都是false。

原文出處： http://www.onlyfordream.cn/2018/03/19/es6%E4%B8%ADobject-create%E5%92%8Cobject-assign/