JavaScript原型链没那么难：一文彻底搞懂

1. 原型（Prototype）

什么是原型？

每个 JavaScript 对象都有一个隐藏的 [[Prototype]] 属性，它指向另一个对象，这个被指向的对象就是它的"原型"。

如何访问原型？

// 通过 __proto__ 属性（非标准，但浏览器都支持）
const obj = {};
console.log(obj.__proto__); // 指向 Object.prototype

// 通过 Object.getPrototypeOf()（推荐的标准方式）
console.log(Object.getPrototypeOf(obj)); // 同样指向 Object.prototype

示例：对象的原型

const person = {
    name: 'Alice',
    age: 25
};

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

2. 构造函数与原型

构造函数创建对象

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

// 在原型上添加方法
Person.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
};

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

alice.sayHello(); // "Hello, I'm Alice"
bob.sayHello();   // "Hello, I'm Bob"

为什么使用原型？

// 如果不使用原型，每个实例都会有独立的方法副本
function BadPerson(name) {
    this.name = name;
    this.sayHello = function() { // ❌ 每个实例都有独立的函数
        console.log(`Hello, I'm ${this.name}`);
    };
}

// 使用原型，所有实例共享同一个方法
function GoodPerson(name) {
    this.name = name;
}
GoodPerson.prototype.sayHello = function() { // ✅ 所有实例共享
    console.log(`Hello, I'm ${this.name}`);
};

3. 原型链（Prototype Chain）

什么是原型链？

当访问一个对象的属性时，JavaScript 会：

1. 先在对象自身查找
2. 如果找不到，就去它的原型上找
3. 如果还找不到，就去原型的原型上找
4. 直到找到 null 为止

这种一层层的查找关系就形成了"原型链"。

原型链示例

const grandparent = { grandpa: '老爷爷' };
const parent = { papa: '爸爸' };
const child = { child: '孩子' };

// 设置原型链：child -> parent -> grandparent
Object.setPrototypeOf(parent, grandparent);
Object.setPrototypeOf(child, parent);

console.log(child.child);    // "孩子" - 自身属性
console.log(child.papa);     // "爸爸" - 父级原型属性
console.log(child.grandpa);  // "老爷爷" - 祖父级原型属性
console.log(child.xxx);      // undefined - 找不到

4. 完整的原型链图示

[你的对象] → Object.prototype → null
    ↑
[数组对象] → Array.prototype → Object.prototype → null
    ↑  
[函数对象] → Function.prototype → Object.prototype → null

实际代码验证

const arr = [1, 2, 3];

// 数组的原型链
console.log(arr.__proto__ === Array.prototype);        // true
console.log(Array.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__);               // null

// 函数的原型链  
function test() {}
console.log(test.__proto__ === Function.prototype);    // true
console.log(Function.prototype.__proto__ === Object.prototype); // true

5. 重要的内置原型

Object.prototype

// 所有对象的最终原型
console.log(Object.prototype.toString()); // "[object Object]"
console.log(Object.prototype.hasOwnProperty); // 检查自身属性的方法

Array.prototype

const arr = [1, 2, 3];
console.log(Array.prototype.push === arr.push); // true
console.log(Array.prototype.map === arr.map);   // true

Function.prototype

function test() {}
console.log(Function.prototype.call === test.call);     // true
console.log(Function.prototype.bind === test.bind);     // true

6. 实际应用场景

1. 继承的实现

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;

Dog.prototype.bark = function() {
    console.log('Woof!');
};

const myDog = new Dog('Buddy', 'Golden');
myDog.eat();  // "Buddy is eating" (继承的方法)
myDog.bark(); // "Woof!" (自身的方法)

2. 方法扩展（猴子补丁）

// 为数组添加自定义方法
Array.prototype.last = function() {
    return this[this.length - 1];
};

const arr = [1, 2, 3, 4];
console.log(arr.last()); // 4

3. 属性检查

const obj = { a: 1 };

console.log(obj.hasOwnProperty('a')); // true - 自身属性
console.log(obj.hasOwnProperty('toString')); // false - 继承属性
console.log('toString' in obj); // true - 包括继承属性

7. 注意事项

1. 性能考虑

// 原型链太长会影响查找性能
for (let key in obj) {
    if (obj.hasOwnProperty(key)) { // 只遍历自身属性
        console.log(key);
    }
}

2. 现代替代方案

// ES6 class 语法（本质还是基于原型）
class Person {
    constructor(name) {
        this.name = name;
    }
    
    sayHello() { // 这个方法会在 Person.prototype 上
        console.log(`Hello, ${this.name}`);
    }
}

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

总结

概念	说明	示例
原型	每个对象都有一个指向原型的链接	obj.__proto__
原型链	通过原型链接形成的查找链条	obj → proto1 → proto2 → null
作用	实现继承和方法共享	所有数组共享 Array.prototype 的方法
重点	属性查找会沿着原型链向上	obj.toString() 找到 Object.prototype.toString

原型机制是 JavaScript 实现面向对象编程的基础，理解它对于掌握 JavaScript 至关重要！