原型与原型链

在 JavaScript 中，原型（Prototype） 和原型链（Prototype Chain） 是实现继承的核心机制，理解它们是掌握 JS 面向对象编程的关键。

一、原型（Prototype）

JavaScript 中，每个函数都有一个prototype属性，这个属性是一个对象（称为 “原型对象”）。当这个函数作为构造函数（通过new创建实例）时，其创建的实例会自动关联到该原型对象，从而可以访问原型对象上的属性和方法。

简单说：

• 原型对象是实例的 “模板”，存储着所有实例共享的属性和方法（避免重复创建，节省内存）。
• 每个实例对象都有一个内部属性（通常通过__proto__访问，标准中称为[[Prototype]]），指向其构造函数的prototype。

示例：

// 定义构造函数
function Person(name) {
  this.name = name; // 实例自身的属性
}

// 给构造函数的prototype添加方法（所有实例共享）
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 创建实例
const person1 = new Person("Alice");
const person2 = new Person("Bob");

// 实例可以访问原型上的方法
person1.sayHello(); // 输出：Hello, I'm Alice
person2.sayHello(); // 输出：Hello, I'm Bob

// 实例的__proto__指向构造函数的prototype
console.log(person1.__proto__ === Person.prototype); // true

二、原型链（Prototype Chain）

当访问一个对象的属性或方法时：

1. 首先在对象自身查找，如果找到则直接使用；
2. 如果没找到，JS 会沿着对象的__proto__（即其原型对象）继续查找；
3. 如果原型对象中也没有，就继续查找原型对象的__proto__，以此类推；
4. 直到找到Object.prototype（原型链的终点），如果仍未找到，则返回undefined。

这个层层向上查找的链条，就是原型链。

原型链的终点：

Object.prototype是所有对象的 “根原型”，它的__proto__是null（表示原型链的结束）。

// 原型链查找示例
console.log(person1.toString()); // 输出：[object Object]

// 查找过程：
// person1自身没有toString() → 查person1.__proto__（Person.prototype）→ 也没有 → 查Person.prototype.__proto__（Object.prototype）→ 找到toString()

三、关键区别：prototype vs __proto__

区别	prototype	__proto__
所属对象	函数（作为构造函数时）	所有对象（包括函数对象）
作用	存储实例共享的属性和方法	指向自身的原型对象，构成原型链
访问方式	直接通过函数访问（如Fn.prototype）	通过对象访问（如obj.__proto__）

四、原型链与继承

JavaScript 的继承本质上是通过原型链实现的。例如，让子构造函数的prototype指向父构造函数的实例，即可实现子实例继承父类的属性和方法。

// 父构造函数
function Animal(type) {
  this.type = type;
}
Animal.prototype.eat = function() {
  console.log("Eating...");
};

// 子构造函数
function Dog(name) {
  this.name = name;
}

// 让Dog的原型指向Animal的实例，实现继承
Dog.prototype = new Animal("dog");
// 修复constructor指向（否则Dog.prototype.constructor会指向Animal）
Dog.prototype.constructor = Dog;

// 子类新增方法
Dog.prototype.bark = function() {
  console.log("Woof!");
};

// 创建子类实例
const dog = new Dog("Buddy");
dog.eat();  // 继承自Animal.prototype → Eating...
dog.bark(); // 子类自身方法 → Woof!
console.log(dog.type); // 继承自Animal实例 → dog

总结

• 原型：函数的prototype属性，是实例共享属性 / 方法的载体。
• 原型链：对象通过__proto__形成的链式查找结构，是 JS 继承的核心。
• 所有对象最终都追溯到Object.prototype，其__proto__为null，标志着原型链的终点。

下面通过具体代码示例来直观解释 JavaScript 的原型与原型链：

五、 构造函数、实例与原型的关系

// 1. 定义一个构造函数
function Person(name) {
  this.name = name; // 实例属性
}

// 2. 给构造函数的prototype添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 3. 创建实例
const person1 = new Person('张三');
const person2 = new Person('李四');

// 4. 实例可以访问原型上的方法
person1.sayHello(); // 输出: Hello, my name is 张三
person2.sayHello(); // 输出: Hello, my name is 李四

// 5. 验证实例与原型的关系
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

// 6. 原型对象有一个constructor属性指向构造函数
console.log(Person.prototype.constructor === Person); // true
console.log(person1.constructor === Person); // true (通过原型链查找)

六、原型链的查找机制

// 接上面的例子

// 1. 实例自身的属性
console.log(person1.name); // 张三 (自身有name属性)

// 2. 查找原型上的属性/方法
console.log(person1.sayHello); // 找到Person.prototype上的方法

// 3. 继续向上查找 (Person.prototype的原型是Object.prototype)
console.log(person1.toString); // 找到Object.prototype上的方法
console.log(person1.hasOwnProperty('name')); // true (来自Object.prototype)

// 4. 原型链的终点
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null (原型链的终点)

// 5. 不存在的属性会沿着原型链一直查找到null
console.log(person1.age); // undefined (自身、Person.prototype、Object.prototype都没有)

七、原型链实现继承

// 父类构造函数
function Animal(legs) {
  this.legs = legs;
}

// 父类原型方法
Animal.prototype.walk = function() {
  console.log(`用${this.legs}条腿走路`);
};

// 子类构造函数
function Dog(name) {
  this.name = name;
}

// 关键：通过原型链实现继承
Dog.prototype = new Animal(4); // Dog的原型指向Animal的实例
Dog.prototype.constructor = Dog; // 修复constructor指向

// 子类原型方法
Dog.prototype.bark = function() {
  console.log(`${this.name}在汪汪叫`);
};

// 创建子类实例
const dog = new Dog('小黑');

// 测试继承关系
dog.bark(); // 小黑在汪汪叫 (自身原型方法)
dog.walk(); // 用4条腿走路 (继承自Animal)
console.log(dog.legs); // 4 (继承自Animal)

// 查看原型链
console.log(dog.__proto__ === Dog.prototype); // true
console.log(dog.__proto__.__proto__ === Animal.prototype); // true
console.log(dog.__proto__.__proto__.__proto__ === Object.prototype); // true
console.log(dog.__proto__.__proto__.__proto__.__proto__); // null

八、函数对象的原型链

// 函数本身也是对象，有自己的原型链
function myFunc() {}

// 函数的__proto__指向Function.prototype
console.log(myFunc.__proto__ === Function.prototype); // true

// Function.prototype的__proto__指向Object.prototype
console.log(Function.prototype.__proto__ === Object.prototype); // true

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

// 所有构造函数都是Function的实例
console.log(Person.__proto__ === Function.prototype); // true
console.log(Object.__proto__ === Function.prototype); // true
console.log(Function.__proto__ === Function.prototype); // true (特殊情况)

这些示例展示了：

• 每个实例的__proto__指向其构造函数的prototype
• 原型链是由__proto__连接起来的链式结构
• 属性查找会沿着原型链向上进行，直到找到或到达链的终点 (null)
• 继承是通过原型链实现的，子类原型指向父类实例
• 函数作为特殊对象，也有自己的原型链