原型/原型链

一、基本概念

1. prototype（构造函数的原型对象）

   • 每个 函数（Function） 在创建时，默认会有一个名为 prototype 的属性，指向一个对象。

   • 这个对象会成为 由该函数作为构造器 new 出来的对象的原型。

   • 示例：

   function Person() {}
   console.log(Person.prototype); // { constructor: f Person, ... }

2. __proto__（对象的隐式原型，非标准但广泛实现）

   • 所有 对象 都有一个 __proto__ 属性（大多数现代浏览器都支持），它指向该对象的原型对象（即构造函数的 prototype）。

   • 它实际上是 [[Prototype]] 的一个访问器，是浏览器为开发者调试提供的便利方式。

   const p = new Person();
   console.log(p.__proto__ === Person.prototype); // true

3. [[Prototype]]（内部槽） 是 对象内部的隐藏属性，由规范定义。

   • 不能直接访问，但可以通过 __proto__、Object.getPrototypeOf() 读到，也可以用 Object.setPrototypeOf() 修改。

   • 真正控制了“原型链”行为的是 [[Prototype]]。

二、原型与原型链

什么是原型？

• 在 JS 中，函数可以作为构造函数，new 关键字创建出来的对象会将 [[Prototype]] 设置为该函数的 prototype。

• 每个对象都有一个原型（即 [[Prototype]]），这个原型本身也是一个对象。

原型链的定义

• 当访问对象的属性时，如果对象本身没有，就会去它的原型（[[Prototype]]）中查找；

• 如果还找不到，就去原型的原型查找，一直向上查；

• 直到原型为 null（即 Object.prototype.__proto__ === null）为止；

• 这一串查找的过程称为原型链（Prototype Chain）。

示例说明：

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function () {
  console.log(`Hi, I'm ${this.name}`);
};

const p1 = new Person('Alice');

// 查找 sayHello 属性过程：
p1.sayHello(); // => 会先查找 p1 上有没有 sayHello 属性
              // => 没有，往 p1.__proto__（即 Person.prototype）上找
              // => 找到 sayHello，执行

三个对象的关系总结图（结构）

p1 --> [[Prototype]] --> Person.prototype --> [[Prototype]] --> Object.prototype --> null

Person --> prototype --> Person.prototype

function Animal() {}
Animal.prototype.eat = function () {
  console.log("eating");
};

function Dog() {}
Dog.prototype = new Animal(); // 原型继承
Dog.prototype.constructor = Dog;

const d = new Dog();
d.eat(); // 继承自 Animal.prototype

三、es5 中的继承方式

1. 原型链继承（Prototype Chain Inheritance）

   function Parent() {
     this.name = 'parent';
   }
   Parent.prototype.sayHi = function () {
     console.log('Hi from parent');
   };
   
   function Child() {}
   Child.prototype = new Parent(); // 核心
   
   const c = new Child();
   c.sayHi(); // Hi from parent

   • 优点：

     • 简单易懂，父类方法可复用。

   • 缺点：

     • 所有子类实例共享父类引用属性（如数组会互相影响）。
     • 子类构造函数无法向父类传参。

2. 借用构造函数继承（Constructor Stealing / Classic Inheritance）

function Parent(name) {
  this.name = name;
  this.arr = [1, 2];
}
function Child(name) {
  Parent.call(this, name); // 核心：借用父构造函数
}

const c1 = new Child('Tom');
const c2 = new Child('Jerry');
c1.arr.push(3);
console.log(c2.arr); // [1, 2]

• 优点：

  • 避免引用属性共享问题。

  • 可向父类传参。

• 缺点：

  • 方法不能复用（每个实例都有一份父类方法）。

3. 组合继承（Combination Inheritance）⭐最常用

   function Parent(name) {
     this.name = name;
     this.arr = [1, 2];
   }
   Parent.prototype.sayHi = function () {
     console.log('Hi, ' + this.name);
   };
   
   function Child(name) {
     Parent.call(this, name); // 借用构造函数
   }
   Child.prototype = new Parent(); // 原型链继承
   Child.prototype.constructor = Child;
   
   const c = new Child('Tom');
   c.sayHi(); // Hi, Tom

   • 优点：

     • 实例独立、方法可复用。

   • 缺点：

     • 调用了两次父构造函数（一次在 Child.prototype = new Parent()，一次在 Parent.call(this)）。

4. 原型式继承（Object.create 简化版）

   const parent = {
     name: 'parent',
     arr: [1, 2],
   };
   const child = Object.create(parent);
   child.name = 'child';

   • 优点：

     • 创建对象很方便。

   • 缺点：

     • 共享引用属性。

     • 无法传参。

5. 寄生式继承（Parasitic Inheritance）

   function createChild(obj) {
     const clone = Object.create(obj);
     clone.sayHi = function () {
       console.log('Hi');
     };
     return clone;
   }
   const parent = { name: 'parent' };
   const child = createChild(parent);

   • 优点：

     • 可以扩展功能。

   • 缺点：

     • 方法不可复用（每次都新建方法）。

6. 寄生组合式继承（Parasitic Combination Inheritance）⭐推荐使用

   function Parent(name) {
     this.name = name;
   }
   Parent.prototype.sayHi = function () {
     console.log('Hi, ' + this.name);
   };
   function Child(name) {
     Parent.call(this, name);
   }
   Child.prototype = Object.create(Parent.prototype); // 不执行 Parent 构造函数
   Child.prototype.constructor = Child;

   • 优点：

     • 避免重复调用构造函数。

     • 方法共享、实例独立，性能最好。