Object.create() API 理解

The Object.create() method creates a new object using an existing object as the prototype of the newly created object.

简单来讲，就是创建一个新的对象，而且使用第一个参数作为新对象__proto__的值。

语法

Object.create(proto: {}, propertiesObject: {}): {}

• proto参数

  新创建对象__proto__的值，是一个对象或者null。

• propertiesObject参数

  与Object.defineProperties(obj, props)的第二个参数一致。 表示要定义其可枚举属性或修改的属性描述符的对象。

  {
      属性1: {
          value: 1,
          描述符2: 值2,
      },
      ...
  }
  

  其中描述符包括以下几种：

  • configurable 为true时才能修改此属性的描述符（也就是这几个配置）
  • enumerable 为true时该属性才会出现在对象的枚举属性中
  • value 该属性的值
  • writable 为true时才能修改此属性的value
  • get 访问该属性时会调用此函数
  • set 属性值被修改时会调用此函数

• 返回值是一个新对象，带着指定的原型对象和属性。

实践

最简单的用法：

可以看到obj是一个空对象。
它的__proto__是我们传入的{a:1}。
原型链顶端是Object的原型属性。

const obj = Object.create({ a: 1 });

// obj
// {}
// __proto__:
// a: 1
// __proto__:
// constructor: ƒ Object()
// hasOwnProperty: ƒ hasOwnProperty()
// isPrototypeOf: ƒ isPrototypeOf()
// propertyIsEnumerable: ƒ propertyIsEnumerable()
// toLocaleString: ƒ toLocaleString()
// toString: ƒ toString()
// valueOf: ƒ valueOf()
// __defineGetter__: ƒ __defineGetter__()
// __defineSetter__: ƒ __defineSetter__()
// __lookupGetter__: ƒ __lookupGetter__()
// __lookupSetter__: ƒ __lookupSetter__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

假如我们用传统的声明对象方式：

可以看到obj2是{a:1}。
它的__proto__是是Object的原型属性。

const obj2 = {a: 1};

// obj2
// {a: 1}
// a: 1
// __proto__:
// constructor: ƒ Object()
// ...
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

Object的原型属性如下：

Object.prototype

// constructor: ƒ Object()
// hasOwnProperty: ƒ hasOwnProperty()
// isPrototypeOf: ƒ isPrototypeOf()
// propertyIsEnumerable: ƒ propertyIsEnumerable()
// toLocaleString: ƒ toLocaleString()
// toString: ƒ toString()
// valueOf: ƒ valueOf()
// __defineGetter__: ƒ __defineGetter__()
// __defineSetter__: ƒ __defineSetter__()
// __lookupGetter__: ƒ __lookupGetter__()
// __lookupSetter__: ƒ __lookupSetter__()
// get __proto__: ƒ __proto__()
// set __proto__: ƒ __proto__()

所以Object.create()方式创建对象就相当于

// const obj2 = {a: 1};
// 等同于
const obj2 = Object.create(Object.prototype, {
    a: {
        writable: true,
        configurable: true,
        value: 1,
        enumerable: true,
    }
});

创建一个原型为null的空对象

可以看到obj3没有任何属性。

const obj3 = Object.create(null);

// {}
// No properties

The End. Last updated by Jimmy Gu, 11:50am, Jan 2021.