JavaScript原型链怎么理解

# JavaScript原型链怎么理解

## 引言

在JavaScript中，原型链（Prototype Chain）是理解对象继承机制的核心概念。许多初学者在面对`prototype`、`__proto__`、`constructor`等属性时容易感到困惑。本文将系统性地解析JavaScript原型链的工作原理，帮助开发者深入掌握这一重要机制。

---

## 一、什么是原型（Prototype）

### 1.1 原型的基本概念
每个JavaScript对象（除`null`外）都有一个关联的原型对象（Prototype），对象会从原型继承属性和方法。例如：

```javascript
let arr = [1, 2, 3];
console.log(arr.map); // 输出：[Function: map]

这里的map方法并非arr自身的属性，而是通过原型继承自Array.prototype。

1.2 查看对象的原型

• 通过Object.getPrototypeOf(obj)获取对象的原型
• 非标准属性__proto__（现已标准化为Object.prototype.__proto__）

console.log(Object.getPrototypeOf(arr) === Array.prototype); // true
console.log(arr.__proto__ === Array.prototype); // true

---

二、构造函数与原型

2.1 构造函数的作用

构造函数通过new关键字创建对象实例时，会将实例的__proto__指向构造函数的prototype属性：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}`);
};

let john = new Person('John');
john.sayHello(); // 输出：Hello, John

2.2 原型关系图

john实例
  │
  ├── __proto__ → Person.prototype
  │               │
  │               ├── constructor → Person函数
  │               └── __proto__ → Object.prototype
  │
  └── name: "John"

---

三、原型链的运作机制

3.1 属性查找过程

当访问对象属性时，JavaScript会按以下顺序查找： 1. 检查对象自身属性 2. 如果不存在，则查找对象的原型（__proto__） 3. 递归直到Object.prototype（其__proto__为null）

console.log(john.toString()); // 继承自Object.prototype

3.2 经典面试题分析

function Foo() {}
Foo.prototype.constructor === Foo; // true
let foo = new Foo();
foo.constructor === Foo; // true（通过原型链查找）

---

四、修改原型链的三种方式

4.1 直接修改__proto__（不推荐）

let animal = { eats: true };
let rabbit = { jumps: true };
rabbit.__proto__ = animal;
console.log(rabbit.eats); // true

4.2 使用Object.create()

let animal = { eats: true };
let rabbit = Object.create(animal, {
  jumps: { value: true }
});

4.3 构造函数模式

function Animal() {}
Animal.prototype.eats = true;

function Rabbit() {}
Rabbit.prototype = new Animal();

let rabbit = new Rabbit();

---

五、原型链的终点

所有原型链的终点都是Object.prototype，其__proto__为null：

console.log(Object.getPrototypeOf(Object.prototype)); // null

---

六、ES6类与原型链

6.1 class语法糖的本质

ES6的class本质仍是基于原型的语法糖：

class Person {
  constructor(name) { this.name = name; }
  sayHello() { console.log(`Hello, ${this.name}`); }
}

typeof Person; // "function"
Person.prototype.sayHello; // 函数存在

6.2 继承的实现

extends关键字建立了原型链关系：

class Student extends Person {
  study() { console.log(`${this.name} is studying`); }
}

let stu = new Student('Alice');
stu.sayHello(); // 继承自Person

---

七、原型链的注意事项

7.1 性能问题

过长的原型链会影响属性查找速度，建议： - 避免超过3层的原型链 - 高频访问的属性应直接定义在对象上

7.2 原型污染

修改内置对象原型可能引发意外行为：

Array.prototype.push = function() { 
  console.log('禁止修改！');
}; // 危险操作！

7.3 检测属性存在性

使用hasOwnProperty()区分自有属性和继承属性：

console.log(john.hasOwnProperty('name')); // true
console.log(john.hasOwnProperty('sayHello')); // false

---

八、总结

1. 每个对象都有__proto__指向其原型
2. 构造函数通过prototype属性共享方法
3. 属性查找沿着原型链向上直至null
4. ES6类语法是原型继承的语法糖
5. 合理使用原型链能实现高效的对象复用

理解原型链是掌握JavaScript面向对象编程的关键，也是区分初级与中级开发者的重要标志。

---

扩展阅读

• MDN原型链文档
• 《JavaScript高级程序设计》第6章
• 《你不知道的JavaScript（上卷）》第5章

”`

注：本文实际约1600字，可通过适当扩展示例或增加实践案例调整至1700字。