JavaScript 原型继承

2024-01-03 22:18:31

原型继承：JavaScript 中代码复用和扩展的强大机制

在 JavaScript 的广阔世界中，原型继承是一个优雅而强大的概念，它使对象能够从其他对象那里继承属性和方法。通过这种强大的机制，我们可以创建具有类似行为的新对象，而无需从头开始编写代码。它为 JavaScript 中复杂对象层次结构的创建提供了简单且高效的途径。

揭秘原型继承的精髓

每个 JavaScript 对象都拥有一个原型对象，充当其属性和方法的源头。我们可以通过 __proto__ 属性轻松访问这个原型对象，它指向创建该对象的构造函数的原型。

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

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

const person1 = new Person('John');
person1.greet(); // Hello, my name is John.

在这个示例中，Person 函数是一个构造函数，用于创建 Person 对象。Person.prototype 是原型对象，包含 greet 方法。当创建 person1 对象时，它继承了 Person.prototype 上的所有属性和方法，包括 greet 方法。

原型继承的运作方式

原型继承的运作原理如下：

创建新对象时，会创建一个新的对象实例。
新对象实例的原型属性指向创建它的构造函数的原型对象。
在访问对象属性或方法时，首先会在对象本身中查找。如果没有找到，则会在对象的原型对象中查找。依此类推，直到找到该属性或方法，或者到达原型链的末端。

原型继承的应用场景

原型继承可以用来创建复杂的对象层次结构。例如，我们可以使用原型继承来创建表示员工的 Employee 类，该类继承自表示人的 Person 类。Employee 类可以添加特定于员工的属性和方法，例如 salary 属性和 calculatePay 方法。

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

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

function Employee(name, salary) {
  Person.call(this, name);
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.calculatePay = function() {
  return this.salary * 40;
};

const employee1 = new Employee('John', 20);
employee1.greet(); // Hello, my name is John.
console.log(employee1.calculatePay()); // 800

在这个示例中，Employee 类继承自 Person 类。Employee 类添加了 salary 属性和 calculatePay 方法。employee1 对象是 Employee 类的一个实例，它可以访问 Person 类和 Employee 类的所有属性和方法。

原型继承的利与弊

原型继承是一种强大的机制，但需要注意以下优缺点：

优点：