JavaScript对象、原型与继承是环环相扣的运行机制，核心在于每个对象有原型、原型也是对象、函数有prototype属性、实例通过__proto__链接构造器的prototype。
JavaScript 中的对象、原型与继承不是孤立概念，而是环环相扣的运行机制。掌握它们的关键，在于理解“每个对象都有原型，原型也是对象，函数对象自带 prototype 属性，实例通过 __proto__ 链接其构造器的 prototype”这一核心链条。下面通过一个贴近真实开发的综合案例——构建可扩展的表单验证器，串联起对象创建、原型链设计、继承实现与方法复用。
一、从字面量到构造函数：封装基础验证逻辑
先定义一个通用验证器的骨架，支持添加规则、执行校验、返回结果：
- 使用构造函数 Validator 创建实例，避免全局污染
- 内部用私有属性 _rules 存储校验规则（如 { required: true, maxLength: 10 }）
- 提供公共方法 addRule(key, fn) 和 validate(value)
代码示例：
function Validator() {
this._rules = {};
}
Validator.prototype.addRule = function(key, validatorFn) {
this._rules[key] = validatorFn;
};
Validator.prototype.validate = function(value) {
const errors = [];
for (const [key, fn] of Object.entries(this._rules)) {
if (!fn(value)) {
errors.push(`${key} 校验失败`);
}
}
return { valid: errors.length === 0, errors };
};
二、利用原型链实现功能复用与轻量继承
现在需要一个更具体的 EmailValidator，它应自动带邮箱格式校验，同时保留父类所有能力。不复制代码，而是让它的原型指向 Validator.prototype：
立即学习“Java免费学习笔记（深入）”；
- 设置 EmailValidator.prototype = Object.create(Validator.prototype)，建立原型链
- 修复构造器指向：EmailValidator.prototype.constructor = EmailValidator
- 在构造函数中调用 Validator.call(this) 初始化父类状态
- 新增专属方法 setDomainWhitelist(domains)，并重写 validate 增强逻辑
这样，new EmailValidator() 既能调用 addRule，也能用 setDomainWhitelist，错误信息还统一由父类结构返回。
三、ES6 class 语法下的等价实现与底层映射
用 class 重写上述逻辑，能更清晰表达继承意图，但本质仍是原型操作：
- class EmailValidator extends Validator 编译/运行时仍会设置原型链和 constructor
- super() 对应 Validator.call(this)，确保父类初始化
- super.addRule(...) 等价于在原型链上查找并调用父类方法
- 可通过 Object.getPrototypeOf(EmailValidator.prototype) === Validator.prototype 验证链路
class 不是新继承模型，只是语法糖——它让开发者聚焦“做什么”，而引擎默默处理“怎么连”。理解这点，才能在调试时看懂 __proto__ 和 prototype 的实际指向。
四、实战中易错点与现代补充方案
真实项目中常踩的坑，往往源于对原型链动态性的误判：
- 修改 Validator.prototype 会影响所有已创建和将创建的实例（包括子类），慎用直接赋值
- instance.__proto__ 是非标准但广泛支持的访问方式；推荐用 Object.getPrototypeOf(instance)
- ES6 引入 Object.setPrototypeOf() 和 Object.create(null) 可创建无原型对象，用于高性能 Map 场景
- 现代替代思路：组合优于继承。例如用 Validator 作为工具对象被注入，而非被继承，更灵活也更易测试
这个表单验证器案例覆盖了对象创建方式（字面量/构造函数/class）、原型链构建（Object.create / extends）、继承实现细节（constructor 修复、super 调用）、以及调试与优化意识。把每一步操作和背后的原型关系画出来，就自然建立起 JS “对象宇宙”的坐标系。
