JavaScript的原型链与继承机制是其核心特性之一，理解它们对于掌握这门语言至关重要。以下从多个维度进行深度解析：

一、原型（Prototype）的基本概念

每个对象都有一个内部属性 [[Prototype]]（在浏览器中通常暴露为 __proto__），它指向该对象的原型对象。当访问一个对象的属性或方法时，JavaScript首先在对象本身查找，若找不到则沿着原型链向上查找。

const person = {
  name: "John",
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const student = Object.create(person); // student的原型是person
student.age = 20;

console.log(student.name); // 继承自person: "John"
student.greet(); // 继承自person: "Hello, John"

二、原型链的工作原理

原型链是由多个对象通过 [[Prototype]] 连接而成的层级结构，直到 Object.prototype 为止（其原型为 null）。

示例：多层级继承

const animal = {
  eat() { console.log("Eating..."); }
};

const dog = Object.create(animal);
dog.bark = function() { console.log("Woof!"); };

const labrador = Object.create(dog);
labrador.color = "black";

labrador.eat(); // 沿原型链找到animal的eat()
labrador.bark(); // 找到dog的bark()

三、继承的实现方式

1. 原型链继承

通过 Object.create() 或构造函数的 prototype 属性实现。

function Animal() {
  this.species = "Animal";
}

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

Dog.prototype = new Animal(); // Dog继承自Animal
Dog.prototype.constructor = Dog; // 修复constructor指向

const dog = new Dog("Buddy");
console.log(dog.species); // 继承自Animal: "Animal"

2. 构造函数继承

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

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

function Dog(name, breed) {
  Animal.call(this, name); // 继承实例属性
  this.breed = breed;
}

const dog = new Dog("Buddy", "Labrador");
console.log(dog.name); // "Buddy"

3. 组合继承（原型链+构造函数）

结合前两种方式的优点。

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() { console.log(`${this.name} is eating`); };

function Dog(name, breed) {
  Animal.call(this, name); // 继承实例属性
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 继承原型方法
Dog.prototype.constructor = Dog;

const dog = new Dog("Buddy", "Labrador");
dog.eat(); // 继承自原型: "Buddy is eating"

4. 寄生组合继承

优化组合继承中重复调用父类构造函数的问题。

function inheritPrototype(subType, superType) {
  const prototype = Object.create(superType.prototype); // 创建原型副本
  prototype.constructor = subType; // 修复constructor
  subType.prototype = prototype; // 指定子类原型
}

function Animal(name) { this.name = name; }
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
inheritPrototype(Dog, Animal); // 核心步骤

5. Class 语法糖（ES6+）

本质是原型链继承的语法糖，更符合面向对象的写法。

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() { console.log(`${this.name} is eating`); }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
  bark() { console.log("Woof!"); }
}

const dog = new Dog("Buddy", "Labrador");
dog.eat(); // 继承自父类: "Buddy is eating"
dog.bark(); // 自身方法: "Woof!"

四、构造函数和原型的关系

在 JavaScript 中，构造函数和原型的关系是实现继承和共享方法的核心机制。以下是详细说明和流程图：

核心关系说明：

1. 构造函数：用于创建对象的函数（通过 new 调用）
2. 原型对象：每个构造函数自动关联的 prototype 对象
3. 实例对象：通过构造函数创建的对象
4. 原型链：实例通过 __proto__ 访问原型对象，形成继承链

关键点解析：

1. 构造函数：

   • 通过 new 关键字调用（如 new Person()）
   • 自动获得 prototype 属性（指向原型对象）

2. 原型对象：

   • 存储所有实例共享的方法/属性
   • 包含 constructor 属性指回构造函数
   • 示例：Person.prototype.sayHello = function() {...}

3. 实例对象：

   • 通过 new Constructor() 创建
   • 自动获得 __proto__ 属性（指向构造函数的 prototype）
   • 优先访问自身属性，找不到时沿原型链查找

4. 原型链继承：

   function Person(name) {
     this.name = name; // 实例自有属性
   }
   
   // 共享方法存入原型
   Person.prototype.sayHello = function() {
     console.log(`Hello, ${this.name}!`);
   };
   
   const alice = new Person('Alice');
   alice.sayHello(); // 通过原型链访问
   

关系流程图详解：

原型链查找规则：

1. 访问实例属性时（如 alice.sayHello()）：

   • 先查找实例自身是否有该属性
   • 若未找到，通过 __proto__ 查找原型对象
   • 若仍未找到，沿原型链向上查找（直到 Object.prototype）

2. 验证方法：

   console.log(alice.__proto__ === Person.prototype); // true
   console.log(Person.prototype.constructor === Person); // true
   console.log(Object.getPrototypeOf(alice) === Person.prototype); // true
   

实际应用场景：

• 方法共享：避免每个实例重复创建相同方法，节省内存
• 继承实现：通过 Child.prototype = Object.create(Parent.prototype) 建立原型链
• 核心API原理：如数组的 push() 方法实际存储在 Array.prototype 中

重要提示：现代 JavaScript 推荐使用 class 语法（本质仍是原型机制），但理解构造函数与原型的关系是掌握 JS 面向对象的基础。

五、原型链的性能与陷阱

1. 属性查找效率：多层级原型链会影响属性查找性能。
2. 引用类型共享问题：原型上的引用类型属性会被所有实例共享。

   function Person() {}
   Person.prototype.hobbies = []; // 引用类型
   
   const p1 = new Person();
   const p2 = new Person();
   p1.hobbies.push("reading");
   console.log(p2.hobbies); // ["reading"]（意外共享）
   

3. 修改原型的影响：动态修改原型会影响所有已创建的实例。

六、关键方法与属性

1. Object.create(proto)：创建一个新对象，指定其原型为 proto。
2. Object.getPrototypeOf(obj)：获取对象的原型。
3. obj.hasOwnProperty(key)：检查属性是否属于对象自身（而非原型）。
4. instanceof 运算符：检查对象是否属于某个类或构造函数的实例。

   const dog = new Dog();
   console.log(dog instanceof Dog); // true
   console.log(dog instanceof Animal); // true（通过原型链）
   

六、总结

JavaScript 的继承基于原型链，核心是通过 [[Prototype]] 连接对象。ES6 的 class 和 extends 语法简化了继承的写法，但底层仍然依赖原型机制。理解原型链是掌握 JavaScript 面向对象编程的关键，能帮助你避免常见的继承陷阱并编写出更高效的代码。