图解 ES5 继承：入门篇 - Prototype 深度解析

ES5 中的继承是一种强大的机制，它允许我们创建新对象，并从现有对象继承属性和方法。这使得我们能够在编写代码时重用现有代码，提高开发效率。

ES5 中有两种主要类型的继承：原型继承和构造函数继承。原型继承是通过 proto 属性实现的，而构造函数继承是通过 constructor 属性实现的。

原型继承

原型继承是一种通过设置对象的 proto 属性来实现继承的方式。当我们创建一个新对象时，这个对象的 proto 属性会被自动设置为其构造函数的 prototype 属性。这意味着新对象将继承构造函数 prototype 属性上定义的所有属性和方法。

例如，以下代码演示了如何使用原型继承创建新对象：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}!`);
};

const person1 = new Person('John Doe');

person1.sayHello(); // 输出 "Hello, my name is John Doe!"

在上面的代码中，Person 是一个构造函数，它定义了一个属性 name 和一个方法 sayHello。当我们使用 new 创建一个新的 Person 对象时，这个对象的 proto 属性会被自动设置为 Person.prototype。这意味着 person1 对象将继承 Person.prototype 上定义的属性和方法，包括 name 和 sayHello。

构造函数继承

构造函数继承是一种通过调用父构造函数来实现继承的方式。当我们创建一个新对象时，我们可以使用 call() 或 apply() 方法来调用父构造函数。这使得新对象将继承父构造函数的所有属性和方法。

例如，以下代码演示了如何使用构造函数继承创建新对象：

function Person(name) {
  this.name = name;
}

function Student(name, school) {
  Person.call(this, name); // 调用父构造函数
  this.school = school;
}

const student1 = new Student('Jane Doe', 'Harvard University');

console.log(student1.name); // 输出 "Jane Doe"
console.log(student1.school); // 输出 "Harvard University"

在上面的代码中，Person 是一个父构造函数，它定义了一个属性 name。Student 是一个子构造函数，它继承了 Person 构造函数的所有属性和方法。当我们创建一个新的 Student 对象时，我们使用 Person.call(this, name) 来调用父构造函数，这使得 student1 对象将继承 Person.prototype 上定义的属性和方法，包括 name。

proto、proto 和 constructor 的区别

proto、proto 和 constructor 是三个经常与 ES5 继承混淆的概念。下面是它们的详细解释：

• proto ：proto 是一个属性，它指向对象的原型对象。例如，person1.proto === Person.prototype。
• proto ：proto 也是一个属性，它指向对象的原型对象。然而，proto 是一个私有属性，我们不能直接访问它。
• constructor ：constructor 是一个属性，它指向创建对象的构造函数。例如，person1.constructor === Person。

结语

以上就是 ES5 继承机制的详细介绍 - 上篇。我们重点介绍了 Prototype 原型继承，并深入探讨了 proto、proto 和 constructor 的区别。在下一篇中，我们将继续探讨构造函数继承以及 ES6 中的继承。