返回

JS原型和原型链：十分钟快速掌握！

前端

概览：JS 原型和原型链

JavaScript 原型是一个对象，用于为一组对象提供共享的属性和方法。原型链则是从一个对象到其原型对象的链接。它允许对象访问其原型及其原型一直到最顶层的原型对象（通常是Object对象）的所有属性和方法。

原型的作用

原型有许多重要作用，其中包括：

  • 代码复用：原型允许对象共享属性和方法，从而减少重复代码。
  • 继承：原型允许对象从其原型继承属性和方法，从而实现继承。
  • 多态性：原型允许对象具有不同的行为，具体取决于它们的原型。

原型链的查找顺序

当一个对象访问一个属性或方法时，JavaScript 会按照以下顺序查找：

  1. 该对象本身
  2. 该对象的原型
  3. 该原型的原型
  4. ...一直到最顶层的原型对象（通常是Object对象）

如果在查找过程中找到了该属性或方法，则立即返回；否则，返回undefined。

实际应用

让我们通过一个例子来说明原型的作用。假设我们有一个名为Person的构造函数，用于创建表示人物的对象：

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

我们可以使用此构造函数来创建两个对象：

const person1 = new Person("John", 30);
const person2 = new Person("Mary", 25);

现在，让我们为Person构造函数的原型添加一个sayHello方法：

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

现在，person1和person2都可以访问sayHello方法，即使我们没有明确地将该方法添加到它们。这是因为它们继承了该方法，因为Person.prototype是它们的原型。

person1.sayHello(); // Output: Hello, my name is John and I am 30 years old.
person2.sayHello(); // Output: Hello, my name is Mary and I am 25 years old.

总结

原型和原型链是JavaScript中非常重要的概念。它们使代码复用、继承和多态性成为可能。通过理解这些概念，您可以编写更强大和更灵活的JavaScript代码。