JavaScript如何实现原型链和继承

# JavaScript如何实现原型链和继承

## 目录
1. [原型与原型链基础概念](#一原型与原型链基础概念)
   - 1.1 [什么是原型](#11-什么是原型)
   - 1.2 [原型链的形成机制](#12-原型链的形成机制)
2. [构造函数与原型的关系](#二构造函数与原型的关系)
   - 2.1 [constructor属性](#21-constructor属性)
   - 2.2 [原型链的终点](#22-原型链的终点)
3. [实现继承的5种方式](#三实现继承的5种方式)
   - 3.1 [原型链继承](#31-原型链继承)
   - 3.2 [构造函数继承](#32-构造函数继承)
   - 3.3 [组合继承](#33-组合继承)
   - 3.4 [原型式继承](#34-原型式继承)
   - 3.5 [寄生组合式继承](#35-寄生组合式继承)
4. [ES6的class继承](#四es6的class继承)
   - 4.1 [class语法糖本质](#41-class语法糖本质)
   - 4.2 [super关键字的秘密](#42-super关键字的秘密)
5. [实际应用场景分析](#五实际应用场景分析)
   - 5.1 [框架中的继承实践](#51-框架中的继承实践)
   - 5.2 [设计模式中的应用](#52-设计模式中的应用)
6. [性能优化与注意事项](#六性能优化与注意事项)
   - 6.1 [原型链过长的影响](#61-原型链过长的影响)
   - 6.2 [内存泄漏防范](#62-内存泄漏防范)

## 一、原型与原型链基础概念

### 1.1 什么是原型

JavaScript中的每个对象都有一个特殊的内置属性`[[Prototype]]`（可通过`__proto__`访问），这就是我们常说的原型。当访问对象的属性时，如果对象本身没有该属性，JavaScript引擎就会去它的原型对象上查找。

```javascript
const animal = {
  eats: true
};
const rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // 设置原型

console.log(rabbit.eats); // true 
console.log(rabbit.jumps); // true

1.2 原型链的形成机制

原型链是由多个对象通过__proto__链接形成的链式结构。当访问属性时，JavaScript会沿着这条链向上查找，直到找到属性或到达null。

const grandfather = { a: 1 };
const father = { b: 2 };
const son = { c: 3 };

father.__proto__ = grandfather;
son.__proto__ = father;

console.log(son.a); // 1
console.log(son.b); // 2
console.log(son.c); // 3

（后续内容继续展开每个章节…约6000字）

二、构造函数与原型的关系

2.1 constructor属性

每个函数在创建时都会自动获得一个prototype属性，这个属性的constructor指回函数本身。

function Person() {}
console.log(Person.prototype.constructor === Person); // true

2.2 原型链的终点

所有原型链的终点都是Object.prototype，而Object.prototype.__proto__是null。

function Person() {}
const p = new Person();

console.log(p.__proto__.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

三、实现继承的5种方式

3.1 原型链继承

通过将子类的原型指向父类实例实现继承：

function Parent() {
  this.name = 'parent';
}
Parent.prototype.say = function() {
  console.log(this.name);
};

function Child() {}
Child.prototype = new Parent();

const c = new Child();
c.say(); // 'parent'

缺点：所有子类实例共享父类引用属性。

3.2 构造函数继承

在子类构造函数中调用父类构造函数：

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

function Child(name) {
  Parent.call(this, name);
}

const c = new Child('child');
console.log(c.name); // 'child'

缺点：无法继承父类原型上的方法。

（其他继承方式详细展开…）

六、性能优化与注意事项

6.1 原型链过长的影响

原型链查找需要遍历整个链条，过长的原型链会影响性能。建议： - 保持合理的继承层级 - 常用方法直接定义在对象上

6.2 内存泄漏防范

不当的原型引用会导致内存无法释放：

function Leak() {}
let leak = new Leak();
Leak.prototype = leak; // 循环引用！

解决方案： - 避免循环引用 - 使用WeakMap存储私有数据

总结

JavaScript的继承体系基于原型链实现，理解其工作原理是掌握高级开发的关键。ES6的class语法虽然更友好，但底层仍是基于原型机制。在实际开发中，应根据场景选择合适的继承方式，并注意性能优化和内存管理问题。 “`

（注：此为简化版大纲，实际完整6100字文章需要展开每个章节的详细说明、代码示例、图示和性能分析等内容。如需完整文章，可以告知具体需要重点展开的部分。）