前端面试利器：一目了然搞定原型、原型链和继承

2023-10-12 11:51:21

作为前端开发工程师，在面试过程中，掌握原型、原型链和继承的概念至关重要。本文将深入浅出地讲解这些概念，并提供一张图示，让您在面试中脱颖而出。

原型：对象的蓝图

原型是一个对象，它定义了另一个对象（称为实例）的结构和行为。当创建一个实例时，它将从原型中继承属性和方法。原型通过 prototype 属性访问，例如：

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

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

const john = new Person("John Doe");
john.greet(); // 输出: Hello, my name is John Doe!

原型链：继承的桥梁

原型链是一个对象到其原型的链接序列。当一个对象访问一个不存在的属性或方法时，它会沿着原型链向上查找，直到找到该属性或方法。例如：

const dog = {
  name: "Buddy",
  bark() {
    console.log("Woof!");
  }
};

// 继承 dog 的原型链
const goldenRetriever = Object.create(dog);
goldenRetriever.color = "Golden";

// 通过原型链访问 bark() 方法
goldenRetriever.bark(); // 输出: Woof!

继承：代码重用的力量

继承允许您从一个类（称为基类或超类）创建新类（称为派生类或子类），同时继承基类的属性和方法。这有助于代码重用和减少重复。在 JavaScript 中，使用 extends 实现继承：

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用基类的构造函数
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} is barking!`);
  }
}

const buddy = new Dog("Buddy", "Golden Retriever");
buddy.eat(); // 输出: Buddy is eating.
buddy.bark(); // 输出: Buddy is barking!