JavaScript 原型与原型链踩坑笔记：深入理解继承机制

JavaScript 原型与原型链踩坑笔记：深入理解继承机制

在 JavaScript 中，原型（prototype）和原型链（prototype chain）是理解继承机制的关键概念。本文将深入剖析 JavaScript 原型和原型链，帮助您理解 JavaScript 中的继承机制。我们将通过示例代码和生动的解释，为您揭开 JavaScript 继承的奥秘，让您轻松掌握 JavaScript 原型和原型链的知识。

原型

原型是一个对象，它是用来创建其他对象的模板。当您使用 new 运算符创建对象时，JavaScript 会创建一个新的对象，并将该对象的原型设置为创建它的函数的原型。

例如，以下代码创建了一个名为 Car 的函数：

function Car() {
  this.make = "Toyota";
  this.model = "Camry";
}

Car 函数的原型是一个对象，它包含两个属性：make 和 model。

当您使用 new 运算符创建 Car 对象时，JavaScript 会创建一个新的对象，并将该对象的原型设置为 Car 函数的原型。

例如，以下代码创建了一个名为 car 的 Car 对象：

var car = new Car();

car 对象的原型是 Car 函数的原型，因此 car 对象具有 make 和 model 属性。

原型链

原型链是一系列对象，它们通过 prototype 属性连接起来。每个对象都有一个 prototype 属性，该属性指向其原型。

当您访问对象的属性或方法时，JavaScript 会首先在该对象中查找该属性或方法。如果没有找到，JavaScript 会在该对象的原型中查找。如果在该对象的原型中也没有找到，JavaScript 会继续在该对象的原型链中查找，直到找到该属性或方法或到达原型链的末尾。

例如，以下代码访问 car 对象的 make 属性：

console.log(car.make);

JavaScript 会首先在 car 对象中查找 make 属性。由于 car 对象具有 make 属性，因此 JavaScript 会将 Toyota 输出到控制台。

继承

在 JavaScript 中，继承是指一个对象从另一个对象中获取属性和方法的能力。在 JavaScript 中，继承是通过原型链实现的。

当您创建对象时，该对象会从其原型继承属性和方法。例如，car 对象从 Car 函数的原型继承 make 和 model 属性。

您可以通过修改对象的原型来修改从该对象继承的属性和方法。例如，以下代码修改 Car 函数的原型，将 make 属性的值改为 "Honda"：

Car.prototype.make = "Honda";

现在，所有从 Car 函数创建的对象都会继承 make 属性的值为 "Honda"。

踩坑笔记

在使用 JavaScript 原型和原型链时，需要注意以下几点：

• 原型只有函数对象才有，即使被实例化了，也只会继承原型里的属性。
• 原型的属性可以进行增删改查的操作，但是不同的修改方式可能一不小心让你掉进陷阱。
• 修改原型属性可能会影响所有从该原型继承的子对象，因此在修改原型属性时需要谨慎。

结语

通过本文，您应该已经对 JavaScript 原型和原型链有了深入的了解。如果您想进一步学习 JavaScript 继承，您可以查阅相关书籍或在线资源。