聊聊 JS 中的 Object.create

实话说，之前不知道还有这么个玩意。偶然间看手写 new 源码，才算和它第一次认识。
Object.create() 官方解释：方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

let person = {
    isMan: false,
    printIntroduction: function() {
        console.log(`我的名字叫 ${this.name}。我是 ${this.isMan ? '男人' : '女人'}`);
    }
};

let zhangsan = Object.create(person);

zhangsan.name = '张三'; 
zhangsan.isMan = true; 
zhangsan.printIntroduction(); // "`我的名字叫 张三。我是男人"

其实 Object.create() 有两个参数：Object.create(proto, [propertiesObject])

proto : 必须，表示新建对象的原型对象。
即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。
该参数可以是null， 对象， 函数的 prototype 属性
注意：创建空的对象时需传null , 否则会抛出 TypeError 异常

propertiesObject: 可选，添加到新创建对象的可枚举属性。
( 即其自身的属性，而不是原型链上的枚举属性 ) 对象的属性描述符以及相应的属性名称。
这些属性对应Object.defineProperties()的第二个参数。

与 普通方式 创建对象 不同点

1. 创建对象的方式不同
   new Object() 通过构造函数来创建对象，添加的属性是在 自身实例下。
   Object.create() 是 ES6 创建对象的另一种方式，可以理解为继承一个对象，添加的属性是在 原型下。

// new Object() 方式创建
var a = {  bg: 'red' }
var b = new Object(a)
console.log(b) // {bg: "red"}
console.log(b.__proto__) // {}
console.log(b.bg) // red

// Object.create() 方式创建
var a = { bg: 'red' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {bg: "red"}
console.log(b.bg) // red

提示：Object.create() 方法创建对象时，属性是在原型下面的，虽可以直接访问 b.bg，
但这个值不是吧 b 自身的，是它通过原型链 proto 来访问到 b 的值。

2. 创建对象属性的性质不同

// 创建一个以另一个空对象为原型，且拥有一个属性 p 的对象
let obj = Object.create({}, { p: { value: 42 } })
console.log( obj ); // { p: 42 };
// 省略了的属性特性默认为 false，所以属性 p 是不可写、不可枚举、不可配置的:
obj .p = 24
console.log( obj .p ); // 42
// for 没有输出
for (var prop in obj ) {
   console.log(prop)
}
delete obj .p // false
console.log( obj ); // { p: 42 } 即删除失败

提示：
Object.create() 用第二个参数来创建非空对象的属性描述符默认是为 false
构造函数或字面量 方法创建的对象属性的描述符默认 为true

let obj = Object.create({}, { p: { value: 42 } });
Object.getOwnPropertyDescriptor(obj, 'p');
==> { value: 42, writable: false, enumerable: false, configurable: false }

let newObj = new Object(null);
newObj.p = 42;
Object.getOwnPropertyDescriptor(newObj,'p')
==> { value: 42, writable: true, enumerable: true, configurable: true }

3. 创建空对象时不同
   当用 Object.create() 方法创建空对象时，对象是没有原型属性的
   当用 构造函数或字面量 方法创建空对象时，对象时有原型属性的，即有 _proto_

let obj = Object.create(null)
console.dir(obj)

image.png

 let obj = new Object(null)
console.dir(obj)

image.png