图解js中的Object.create方法「附代码实例」

1. Object.create方法的介绍

Object.create() 是JavaScript中用来生成一个新对象的方法。Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。因此，可以通过委托方式基于一个对象创建一个新的对象。

    let obj1 = {
      a: 1,
      b: 2
    };
    let obj2 = Object.create(obj1);
    console.log(obj2.a); // 1

通过 Object.create()方法，我们可以简单地定义一个新对象，其原型为现有对象 obj1。当我们访问 obj2 的属性 a 时，因为 obj2 并没有属性 a，JavaScript 引擎会自动向 obj2 的原型对象 obj1 中寻找相应的属性 a，并返回其值 1。

2. Object.create方法的语法

Object.create的语法为：

    Object.create(proto, [propertiesObject])

其中proto是新创建对象的原型对象，propertiesObject是可选的，用于定义新对象的属性。

2.1 Object.create方法的proto参数

proto参数为Object.create()创建的新对象的原型对象。原型对象可以是对象（也可以是null），新创建对象将拥有原型对象的所有属性和方法。如果没有提供任何参数，则默认proto为null。

将现有对象作为原型对象创建一个新对象：

    let obj1 = {
      a: 1,
      b: 2
    };
    let obj2 = Object.create(obj1);
    console.log(obj2.a); // 1

如果未提供原型，则新对象的原型为null：

    let obj = Object.create(null);
    console.log(obj.toString); // undefined

上述代码中，我们创建了一个新对象 obj，它的原型为 null，由于原型为 null，它的任何属性都不会继承，包括 toString() 方法。

2.2 Object.create方法的propertiesObject参数

propertiesObject是一个可选的参数，它允许我们进一步定义新对象的属性。propertiesObject 是一个包含一个或多个属性描述符的 JavaScript 对象。每个属性描述符都是包含以下键值的对象：

value：属性值。默认为 undefined。

writable：是否可写，如果为 true 则属性可以被赋值运算符改变。默认为 false。

enumerable：是否可枚举，如果为 true 则属性可以被枚举。默认为 false。

configurable：是否可配置，如果为 true，则属性可以被删除，可以修改它的特性。默认为 false。

通过以下代码，我们可以定义一个新对象 obj2，并在其中定义属性 name 和 value：

    let obj = Object.create(null, {
      name: {
        value: "John",
        writable: true,
        enumerable: true,
        configurable: true
      },
      value: {
        value: "Doe",
        writable: true,
        enumerable: true,
        configurable: true
      }
    });

在上述代码中，我们创建了一个名为 name 的属性和一个名为 value 的属性。当我们遍历 obj 实例时，将看到这些属性：

    for (let prop in obj) {
      console.log(prop + ': ' + obj[prop]);
    }
    // name: John
    // value: Doe

3. Object.create方法的实例

3.1 Object.create方法实现继承

Object.create() 方法可以非常简单地实现继承。我们可以使用它基于父类创建一个新的类，新类 继承了父类的所有属性和方法。

请看以下实现 ES6 类继承的例子：

    class Animal {
      constructor(name) {
        this.name = name;
      }
      speak() {
        console.log(this.name + ' makes a noise.');
      }
    }
    class Dog extends Animal {
      constructor(name, breed) {
        super(name);
        this.breed = breed;
      }
      bark() {
        console.log('Woof!');
      }
    }
    const d = new Dog('Jack', 'Golden Retriever');
    console.log(d.name); // Jack
    console.log(d.breed); // Golden Retriever
    d.speak(); // Jack makes a noise.
    d.bark(); // Woof!

在上述代码中，我们定义了一个超类 Animal 和一个子类 Dog。通过使用 extends 关键字，我们建立了一个继承关系。我们可以通过使用 super() 方法从超类中继承特定的方法和属性。

3.2 Object.create方法实现原型式继承

原型式继承是基于已有的对象来创建新对象，新对象的原型即为所基于的对象，继承了它的所有属性和方法。

Object.create() 方法可以让我们非常轻松地实现原型式继承，毕竟它的本质就是依靠原型实现的。

    let Person = {
      name: "Tom",
      age: 29,
      sayName() {
        console.log("My name is " + this.name);
      }
    };
    let Employee = Object.create(Person, {
      jobTitle: {
        value: "Developer"
      }
    });
    console.log(Employee.name);       // Tom
    console.log(Employee.jobTitle);  // Developer
    Employee.sayName();             // My name is Tom

在上述代码中，我们定义了一个 Person 对象，它包含了 name、age 和 sayName() 三个属性。然后，我们使用 Object.create() 方法创建了一个新对象 Employee，它继承了 Person 对象。在 Employee 对象中，我们还添加了一个 jobTitle 属性。

因为 Employee 是由 Person 继承而来的，我们可以通过调用 Employee 对象的 sayName() 方法来访问 Person 对象的方法。

4. 总结

Object.create() 是一个功能强大的方法，可以让我们轻松地创建新对象，继承特定的超类对象、原型对象或构造函数对象。它可以让我们的代码更灵活、更可读、更易于维护。