ES6 中如何使用 Object.create 实现原型继承-JavaScript中文网-JavaScript教程资源分享门户

Object.create() 是 ES6 中一个非常强大的原型继承方法。它给开发者提供了一种更简便、更灵活的方式来实现对象之间的继承关系。在本文中，我们将深入探讨 Object.create() 方法，并通过示例代码演示如何在 ES6 中使用该方法来实现原型继承。

什么是原型继承？

在 JavaScript 中，对象之间通过原型链建立起继承关系。原型继承是指子对象可以从父对象中继承属性和方法。通过原型继承，我们可以实现代码的复用和抽象，从而提升代码的可维护性和扩展性。

使用 Object.create() 实现原型继承

在 ES6 中，我们可以使用 Object.create() 方法来实现原型继承。该方法接收一个参数，该参数即为新对象的原型。它返回一个新的对象，该对象的原型为传入的原型。新对象可以继承原型对象的所有属性和方法。下面是 Object.create() 方法的语法：

Object.create(proto[, propertiesObject])

其中，第一个参数 proto 表示新对象的原型，第二个参数 propertiesObject 是一个可选的参数，表示需要添加到新对象的可枚举属性。

示例代码如下：

// 新建一个对象 objA
const objA = {
  name: "objA",
  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

// 使用 Object.create() 方法为 objA 创建一个子对象 objB
const objB = Object.create(objA);

// 为 objB 添加一个属性 age
objB.age = 18;

// 调用 objB 的 sayName 方法
objB.sayName();

在上面的代码中，我们通过 Object.create() 方法为 objA 创建了一个子对象 objB。objB 继承了 objA 的所有属性和方法。接着，我们为 objB 添加了一个属性 age，并调用了 objB 的 sayName 方法。

深入了解 Object.create()

除了上述示例代码中介绍的基本用法之外，在使用 Object.create() 实现原型继承时，还需要注意以下几点：

1. 使用 null 作为原型

我们可以使用 null 作为原型，创建一个不继承任何属性和方法的空对象。示例代码如下：

const emptyObj = Object.create(null);
console.log(emptyObj.toString); // undefined
console.log(emptyObj.__proto__); // undefined

在上面的代码中，emptyObj 不继承任何属性和方法，甚至没有 toString 方法。

2. 封装 createObj 函数

我们可以封装一个 createObj 函数来更方便地创建继承父对象属性和方法的子对象。示例代码如下：

function createObj(proto, props) {
  const obj = Object.create(proto);
  if (props) {
    Object.defineProperties(obj, props);
  }
  return obj;
}

// 创建一个继承自 objA 的子对象，并添加一个属性 age
const objB = createObj(objA, { age: { value: 18 }});
console.log(objB.age); // 18
objB.sayName();

在上面的代码中，我们封装了一个 createObj 函数，该函数接收一个 proto 参数表示新对象的原型，和一个可选的 props 参数表示需要添加到新对象的可枚举属性。使用该函数可以更方便地创建子对象。

3. 原型链的继承

我们可以使用原型链的方式来实现多级继承。示例代码如下：

// 新建一个对象 objA
const objA = {
  name: "objA",
  sayName() {
    console.log(`My name is ${this.name}`);
  },
  job: {
    name: "software engineer",
    sayJob() {
      console.log(`My job is ${this.name}`);
    }
  }
}

// 为 objA 创建一个子对象 objB，objB 继承自 objA 的 job 属性
const objB = Object.create(objA, {
  age: {
    value: 18
  },
  job: {
    value: Object.create(objA.job, {
      name: {
        value: "product manager"
      }
    })
  }
});

// 调用 objB 的 sayName 和 sayJob 方法
objB.sayName();
objB.job.sayJob();

在上面的代码中，我们为 objA 添加了一个 job 属性，这个属性是一个对象，拥有自己的 sayJob 方法。接着，我们为 objA 创建了一个子对象 objB，objB 继承自 objA 的 job 属性，并将 job 属性的 name 修改为 "product manager"。最后，我们调用了 objB 的 sayName 和 sayJob 方法。

总结

Object.create() 是 ES6 中一个非常强大的原型继承方法。通过 Object.create() 方法，我们可以更简便、更灵活地实现对象之间的继承关系。在实践过程中，我们还需要注意 null 原型、封装 createObj 函数以及使用原型链的方式来实现多级继承等细节。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65af556eadd4f0e0ff8bfcac