面向对象编程：类、继承与原型链原理剖析
(5) feilong.org 修订于2026-08-16 08:10:37 js教程面向对象编程的核心概念
面向对象编程（Object-Oriented Programming, OOP）是一种以对象为核心的编程范式，通过封装数据和行为实现模块化开发。JavaScript作为一门动态类型的脚本语言，其面向对象特性基于原型链（Prototype Chain）而非传统的类继承模型。理解类、继承与原型链的关系是掌握JavaScript高级特性的关键。
1. 类的定义与实例化
在ES6中，class关键字提供了更直观的语法糖，但底层仍依赖原型机制。以下示例展示如何通过类创建对象：
|
1 2 3 4 5 6 7 |
class Person { constructor(name) { this.name = name; } greet() { console.log(<pre>Hello, my name is ${this.name} |
);
}
}
const alice = new Person('Alice');
alice.greet(); // 输出: Hello, my name is Alice
底层原理：
-
|
1 |
class Person |
声明了一个构造函数，其原型（Person.prototype）包含默认方法（如greet）。
- 实例alice通过new关键字创建时，会继承Person.prototype上的属性和方法。
2. 继承的实现方式
JavaScript中继承分为两种形式：类继承（ES6语法）与原型链继承（传统方式）。
（1）类继承
通过extends关键字实现继承关系：
|
1 2 3 4 5 6 7 8 |
class Student extends Person { constructor(name, grade) { super(name); // 调用父类构造函数 this.grade = grade; } study() { console.log(<pre>{this.name} is studying in ${this.grade} |
);
}
}
const bob = new Student('Bob', 'Grade 3');
bob.greet(); // 输出: Hello, my name is Bob
bob.study(); // 输出: Bob is studying in Grade 3
关键点：
- super()用于调用父类构造函数，确保继承正确性。
- 子类通过prototype链访问父类方法（如greet）。
（2）原型链继承
传统方式通过修改构造函数的原型实现继承：
|
1 2 3 4 5 6 |
function Animal(name) { this.name = name; } Animal.prototype.speak = function() { console.log(<pre>{this.name} makes a noise. |
);
};
function Dog(name) {
Animal.call(this, name); // 绑定父类构造函数
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const dog = new Dog('Rover');
dog.speak(); // 输出: Rover makes a noise.
核心机制：
- Object.create()创建新对象并设置其原型为Animal.prototype。
- 实例通过原型链查找方法（如speak），实现继承。
3. 原型链的深层解析
JavaScript中所有对象都具有一个隐式的原型属性（proto），形成链式结构：
|
1 |
实例 -> 实例的原型 -> 原型的原型 -> ... -> Object.prototype -> null |
（1）查找机制
当访问对象属性时，引擎会沿着原型链向上查找。例如：
|
1 2 3 |
const obj = { key: 'value' }; console.log(obj.key); // 查找obj自身 -> 找到key console.log(obj.toString()); // 查找obj -> 未找到 -> 查找Object.prototype -> 找到toString |
（2）原型链的动态性
原型可以随时修改，这使得JavaScript具备强大的灵活性：
|
1 2 3 4 5 6 |
const obj = {}; obj.key = 'value'; // 修改原型链 obj.proto.newKey = 'added'; console.log(obj.newKey); // 输出: added |
4. 原型继承的优缺点
| 特性 | 优点 | 缺点 |
|--------------|-------------------------------|-------------------------------|
| 灵活性 | 动态修改原型链 | 可能导致难以追踪的错误 |
| 性能 | 内存占用较低 | 查找属性时可能遍历多层原型链 |
| 可维护性 | 易于扩展 | 需要谨慎管理原型链层级 |
结论
JavaScript的面向对象编程以原型链为核心，通过类语法（ES6）和传统原型继承方式实现复杂结构。理解原型链的工作原理有助于避免常见陷阱（如构造函数绑定、原型污染等），并高效利用JavaScript的动态特性。在实际开发中，结合类语法与原型机制，可构建灵活且可维护的面向对象系统。
进一步学习建议：
- 深入研究Object.getPrototypeOf()和Object.setPrototypeOf()方法
- 探索ES6 Proxy对原型链的扩展
- 实践模块化设计模式（如工厂函数、混合继承）
更新网址：https://feilong.org/oop-js-prototype-chain
最初发布：20260816 08:10:37 feilong.org 于广州
加入收藏夹，查看更方便。