用 JavaScript 面向对象编程实现优雅继承，提高代码复用率！

前端

2024-01-11 19:58:48

JavaScript 面向对象编程与继承

JavaScript 是一种强大的编程语言，提供了丰富的特性来构建复杂的应用程序。其中，面向对象编程（OOP）是一种重要的编程范式，它允许您将数据和行为组织成对象，从而提高代码的可读性、可维护性和可复用性。

在 JavaScript 中，可以使用原型链（prototype chain）来实现对象继承。原型链是一种将对象链接在一起的机制，它允许子对象继承父对象的属性和方法。

理解原型链

在 JavaScript 中，每个对象都有一个内部属性 _prototype _，它指向该对象的原型对象。原型对象是另一个对象，它包含了一组属性和方法，这些属性和方法可以被子对象继承。

当您创建一个新的对象时，它将自动获得一个原型对象。该原型对象就是创建该对象的构造函数的原型属性。

例如，如果您使用构造函数 Person 创建了一个新对象 person，那么 person 的原型对象就是 Person.prototype。

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

const person = new Person('John');

console.log(person.prototype); // Person.prototype

原型链上的属性和方法的访问

子对象可以通过原型链访问父对象上的属性和方法。

例如，如果 Person 对象具有一个 getName 方法，那么 person 对象可以使用该方法来获取其名称。

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

  this.getName = function() {
    return this.name;
  };
}

const person = new Person('John');

console.log(person.getName()); // John

通过原型链实现继承

原型链可以用于实现对象继承。

为了实现对象继承，您需要创建一个子构造函数，该子构造函数的原型对象指向父构造函数的原型对象。

例如，以下代码演示了如何使用原型链实现继承：

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

function Student(name, major) {
  Person.call(this, name);

  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student('John', 'Computer Science');

console.log(student.name); // John
console.log(student.major); // Computer Science