JavaScript Object.create 创建对象与原型详解

Object.create() 的作用

创建一个新对象，使用现有的对象来提供新创建的对象的 __proto__。

语法：Object.create(proto[, propertiesObject])

proto：新创建对象的原型对象。如果 proto 参数不是 null 或非原始包装对象，则抛出一个 TypeError 异常。
propertiesObject：可选。如果没有指定为 undefined，要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties() 的第二个参数。

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

简单示例

var obj1 = Object.create(null);
var obj2 = Object.create(new Object());
var obj3 = Object.create({ a: 1 });

console.log('obj1', obj1);
console.log('obj2', obj2);
console.log('obj3', obj3);

proto 参数不是 null 或非原始包装对象

var obj1 = Object.create(undefined); // TypeError: Object prototype may only be an Object or null: undefined
var obj2 = Object.create(); // TypeError: Object prototype may only be an Object or null: undefined

Object.create() 是如何创建对象的

方法内部定义一个新的空对象 obj
将 obj.__proto__ 的对象指向传入的参数 proto
返回一个新的对象

Object.create() 和 new Object() 的不同

new Object() 方式创建

var obj1 = {
  name: 'fx',
  why: {
    day: 1,
  },
};
var obj2 = new Object(obj1);
obj2.name = 'bfx';
obj2.why = {
  bday: 'b',
};
console.log('obj2:', obj2);
console.log('obj1:', obj1);

Object.create() 方式创建

var obj1 = {
  name: 'fx',
  why: {
    day: 1,
  },
};
var obj2 = Object.create(obj1);
obj2.name = 'bfx';
obj2.why = {
  bday: 'b',
};
console.log('obj2:', obj2);
console.log('obj1:', obj1);

示例

创建一个以另一个空对象为原型,且拥有一个属性 p 的对象

o = Object.create({}, { p: { value: 42 } });

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24;
console.log(o.p); // 42

o.q = 12;
for (var prop in o) {
  console.log(prop);
}
//"q"

delete o.p; // false
delete o.q; // true

创建一个可写的,可枚举的,可配置的属性 p

o2 = Object.create(
  {},
  {
    p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true,
    },
  },
);
// 用 Object.create实现类式继承

// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?', rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

如果你希望能继承到多个对象，则可以使用混入的方式。

function MyClass () {
  SuperClass.call(this);
  OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function () {
  // do a thing
};
Object.assign
会把
OtherSuperClass原型上的函数拷贝到
MyClass原型上，使
MyClass
的所有实例都可用
OtherSuperClass
的方法。

var o;

// 创建一个原型为null的空对象
o = Object.create(null);

o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype);

o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: {
    writable: true,
    configurable: true,
    value: "hello"
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function () { return 10 },
    set: function (value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

function Constructor () {}

o = new Constructor();
// 上面的一句就相当于:
o = Object.create(Constructor.prototype);
// 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码