原型和继承
在 JavaScript 中，原型 (Prototype) 和继承 (Inheritance) 是构建复杂应用程序的核心概念，它们允许对象共享属性和方法，从而实现高效的代码复用。可以把每个对象想象成房子中的一个房间，原型就是房间的设计图纸，而继承就像新房间继承了设计图的结构，但可以加入自己的装饰和功能。
在个人作品集网站中，可以使用原型创建统一的页面组件，例如作品卡片和导航栏，并通过继承添加不同类型的交互效果。在博客或新闻网站中，文章和作者对象可以通过原型共享公共方法，同时允许不同文章类型继承并扩展功能。对于电商平台，产品对象及其子类（如数字商品、实物商品）可以共享价格、库存等属性，同时增加特定属性和方法。在社交平台中，用户对象和帖子对象可以通过继承组织功能，例如点赞、评论和分享。
完成本教程后，读者将学会如何创建原型链，理解原型继承机制，并应用于实际项目。通过这些知识，你可以像组织图书馆或装修房间一样，有条不紊地构建可扩展、高性能的应用程序，同时减少重复代码，提高维护效率。
基础示例
javascript// Basic example demonstrating prototype
function Article(title, author) {
this.title = title; // Article title
this.author = author; // Author name
}
Article.prototype.summary = function() {
return `${this.title} by ${this.author}`; // Method shared by all instances
};
const newsArticle = new Article("Latest Updates", "Site Editor");
console.log(newsArticle.summary());在上述示例中，我们首先定义了一个构造函数 Article，它接收 title 和 author 两个参数。使用 this.title = title 和 this.author = author，为每个新创建的对象添加属性。
接着，我们通过 Article.prototype.summary 添加了一个方法 summary，这样所有由 Article 创建的对象都可以共享该方法，而不是在每个对象中重复定义。这里体现了原型 (Prototype) 的概念：对象会沿着原型链 (Prototype Chain) 查找属性和方法。
最后，我们使用 new Article(...) 创建了一个新闻文章对象 newsArticle。调用 newsArticle.summary() 时，JavaScript 会先在 newsArticle 对象本身查找 summary 方法，如果没有找到，则沿着原型链到 Article.prototype 中寻找。这种机制使得代码复用更加高效，同时在实际项目中，比如博客或新闻网站，允许你快速创建多个共享功能的文章对象，而无需复制方法代码，就像在房屋设计中复用相同的结构图纸。
实用示例
javascript// Practical example for e-commerce products
function Product(name, price) {
this.name = name; // Product name
this.price = price; // Product price
}
Product.prototype.showInfo = function() {
return `${this.name}: $${this.price}`; // Shared method
};
// Inherit for digital products
function DigitalProduct(name, price, sizeMB) {
Product.call(this, name, price); // Call parent constructor
this.sizeMB = sizeMB; // Additional property
}
DigitalProduct.prototype = Object.create(Product.prototype); // Link prototype
DigitalProduct.prototype.constructor = DigitalProduct; // Correct constructor reference
const ebook = new DigitalProduct("E-Book", 15, 5);
console.log(ebook.showInfo() + `, Size: ${ebook.sizeMB} MB`);在实用示例中，我们首先创建 Product 构造函数，代表一般商品，并在其原型上添加 showInfo 方法，使所有商品对象共享该方法。
随后，我们定义 DigitalProduct 构造函数，表示数字商品。通过 Product.call(this, name, price) 调用父构造函数，我们确保 DigitalProduct 对象继承了 name 和 price 属性。接着，使用 Object.create(Product.prototype) 将 DigitalProduct 的原型指向 Product 的原型，从而继承方法。最后，调整 DigitalProduct.prototype.constructor 为 DigitalProduct，以保持构造函数引用正确。
通过这种方式，数字商品对象 ebook 可以访问 Product.prototype 中的 showInfo 方法，同时拥有自己独特的 sizeMB 属性。该模式在电商平台、博客或社交平台中广泛应用，可实现代码复用、减少冗余，并保持对象结构清晰，就像在图书馆中给不同书籍分配类别，但共享通用目录和规则。
最佳实践与常见错误：
- 使用现代语法：推荐使用 Object.create 或 ES6 class 来实现继承，而非直接修改原型。
- 错误处理：访问属性或方法前确保对象存在，防止 undefined 错误。
- 性能优化：将方法放在原型上，而不是构造函数中，减少内存占用。
-
注释与文档：为构造函数和方法添加注释，有助于团队协作和维护。
常见错误： -
忘记修改子类 constructor，导致引用错误。
- 直接修改父类原型，可能意外影响所有子类对象。
- 忘记调用父构造函数，导致子类对象缺少必要属性。
- 在构造函数中重复创建方法，增加内存消耗。
调试建议：
- 使用 console.log 检查对象属性和原型链。
- 在小型环境中测试原型继承逻辑，再应用到大型项目。
- 避免重复定义方法，使用原型共享。
📊 快速参考
| Property/Method | Description | Example |
|---|---|---|
| prototype | 对象的原型属性 | Article.prototype.summary |
| constructor | 指向对象的构造函数 | newsArticle.constructor |
| Object.create | 创建带有指定原型的新对象 | Object.create(Product.prototype) |
| call | 调用父构造函数 | Product.call(this, name, price) |
| new | 使用构造函数创建新对象 | new Article("Title", "Author") |
| showInfo | 显示商品信息的方法 | ebook.showInfo() |
总结与下一步：
通过本教程，读者掌握了原型和继承的核心概念及应用方法，理解了原型链机制和构造函数调用的重要性。你可以使用这些知识在个人作品集、博客、新闻网站、电商或社交平台中创建高效、可扩展的对象结构。
此外，原型和继承概念与 HTML DOM 操作和后端数据交互紧密相关，例如共享组件方法、统一数据处理逻辑和提高性能。下一步可以学习 ES6 class、Mixins、以及高级设计模式，进一步优化继承结构和对象管理。实践建议：在真实项目中持续使用原型和继承模式，观察内存和性能表现，同时结合调试工具深入理解对象的行为。
🧠 测试您的知识
测试您的知识
通过实际问题测试您对这个主题的理解。
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部