JS 原型与原型链的终极攻略

2023-03-26 09:04:17

JavaScript 的基石：原型和原型链

在 JavaScript 的世界中，原型和原型链是至关重要的概念，它们赋予了 JavaScript 其动态性和灵活性。就像人类家族的祖先一样，原型为对象提供了共享的特性和行为，而原型链则让它们可以访问这些特性和行为。理解这两个概念对于掌握 JavaScript 编程至关重要。

什么是原型？

原型是一个对象，它为其他对象提供了一套共享的属性和方法。就像一个家族的祖先，原型为其后代提供了共有的特征和行为。每个对象都有一个原型，这个原型可以是另一个对象或 null。当一个对象访问一个它不具有的属性或方法时，JavaScript 会自动沿着原型链向上查找，直到找到具有该属性或方法的对象。

原型通过消除代码重复性，使 JavaScript 编程更加简洁且易于维护。你可以将共享的属性和方法放在原型的构造函数中，然后让所有的对象都继承这个原型。这种方法不仅节省了代码空间，而且便于将来对代码进行维护和更新。

什么是原型链？

原型链是指从一个对象到其原型，再到其原型的原型，以此类推，形成的一条链。原型链的作用是让对象可以访问到其原型中的属性和方法。

例如，我们有一个 Person 对象，它具有 name 和 age 两个属性。现在，我们想创建一个 Student 对象，它除了具有 name 和 age 属性外，还具有一个 grade 属性。我们可以通过让 Student 对象继承 Person 对象的原型来实现。这样，Student 对象就可以访问 Person 对象中的 name 和 age 属性，以及自己的 grade 属性。

原型链上的查找过程

当一个对象访问一个它不具有的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到具有该属性或方法的对象。

查找过程如下：

首先，JavaScript 会在对象本身中查找该属性或方法。
如果在对象本身中找不到，JavaScript 会在对象的原型中查找。
如果在对象的原型中找不到，JavaScript 会在对象的原型的原型中查找，以此类推。
如果一直找到原型链的顶端（即 null），JavaScript 就会返回 undefined。

如何使用原型和原型链

在 JavaScript 中，可以使用原型和原型链来实现继承。继承是指一个对象可以从另一个对象中获取属性和方法。

实现继承有两种方式：

基于原型（Prototype-based）： 使用 Object.create() 方法或原型委托（prototype delegation）来实现继承。
基于类（Class-based）： 使用 class 来定义类，然后使用 extends 关键字来实现继承。

在 JavaScript 中，更常用基于原型的继承方式，因为它更加灵活和强大。

示例：

// Person 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Student 构造函数
function Student(name, age, grade) {
  // 继承 Person 原型
  Person.call(this, name, age);
  this.grade = grade;
}

// 设置 Student 的原型为 Person.prototype
Student.prototype = Object.create(Person.prototype);

// 创建一个 Student 对象
const student = new Student('John', 20, 'A');

// 访问 Student 对象的属性
console.log(student.name); // John
console.log(student.age); // 20
console.log(student.grade); // A