1. 什么是原型链?
JavaScript 中的每个对象都有一个原型对象(Prototype),对象可以通过原型链继承另一个对象的属性和方法。
当访问对象的属性时,如果对象本身没有该属性,JavaScript 会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null
)。
2. 原型链的核心概念
- **
prototype
**:函数特有的属性,指向该函数的原型对象(用于构造函数创建实例时共享方法)。 - **
__proto__
**:对象特有的属性,指向其构造函数的原型对象(即构造函数的.prototype
)。 - 构造函数(Constructor):通过
new
关键字创建对象的函数。
3. 原型链的经典例子
// 构造函数
function Person(name) {
this.name = name;
}
// 在原型上添加方法(所有实例共享)
Person.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
// 创建实例
const alice = new Person("Alice");
const bob = new Person("Bob");
alice.sayHello(); // 输出 "Hello, I'm Alice"
bob.sayHello(); // 输出 "Hello, I'm Bob"
// 原型链查找过程:
// alice 自身没有 sayHello 方法 → 查找 alice.__proto__(即 Person.prototype)→ 找到方法!
4. 原型链的继承
通过修改原型链可以实现继承:
function Student(name, grade) {
Person.call(this, name); // 继承属性
this.grade = grade;
}
// 继承原型方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
// 添加子类方法
Student.prototype.study = function() {
console.log(`${this.name} is studying.`);
};
const student = new Student("Charlie", 3);
student.sayHello(); // 继承自 Person 的方法
student.study(); // 子类自己的方法
5. 原型链的终点
所有原型链的顶端都是 Object.prototype
,而 Object.prototype.__proto__
为 null
。
作用 | 实现对象之间的属性和方法共享 | |
应用场景 | 继承、共享方法、减少内存占用 | |
内存影响 | 共享方法减少重复内存占用 | |
底层机制 | 对象通过 __proto__ 链式查找属性 |
原型链的经典使用
-
共享方法(节省内存):
function Car(brand) { this.brand = brand; } Car.prototype.drive = function() { // 所有实例共享此方法 console.log(`${this.brand} is driving.`); };
-
继承:
function Animal(name) { this.name = name; } Animal.prototype.eat = function() { console.log(`${this.name} eats.`); }; function Dog(name) { Animal.call(this, name); // 继承属性 } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.bark = function() { console.log("Woof!"); };