JavaScript 原型与原型链完全指南

前言

如果你学习 JavaScript，却不理解原型和原型链，那就像学会了写句子却不理解语法规则。原型是 JavaScript 实现面向对象编程的核心机制，也是面试中几乎必考的知识点。本文将带你彻底理解 JavaScript 的原型与原型链。

一、原型（prototype）是什么

1.1 原型的定义

在 JavaScript 中，原型（Prototype）是函数天生拥有的一个属性。每当你定义一个函数时，JavaScript 引擎会自动为这个函数添加一个 prototype 属性，这个属性的值是一个对象。

1.2 为什么要用原型？

1. 我们可以将一些属性和方法挂载在原型上，在创建实例之后，实例就可以调用这些属性和方法
2. 我们也可以将一些公用的属性和方法添加在原型上，减少构造函数在执行时的性能开销

function Car(color) { this.color = color; }
Car.prototype.name = 'su7';

const car1 = new Car('红');
const car2 = new Car('蓝');
console.log(car1.name === car2.name); // true，共享属性

1.3 原型三大特性

特性	说明
函数天生拥有	每个函数都有 prototype
实例可访问	实例能调用原型上的方法
实例无法修改	修改实例只会创建自身属性，不会影响原型

Car.prototype.name = 'su7';
const car = new Car('蓝');
car.name = '蔚来';     // 创建实例自身属性
console.log(Car.prototype.name); // su7，原型不受影响

二、隐式原型 (__ proto__)

2.1 什么是隐式原型

所有对象都有 __proto__ 属性，指向创建该对象的构造函数的原型：

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

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

2.2 属性查找规则

v8 在访问对象中的一个属性时，会先访问对象中显示存在的属性，如果没有，就会去对象的隐式原型上查找

Car.prototype.name = 'su7';
function Car(color) { this.color = color; }

const car = new Car('blue');
console.log(car.name);  // su7（原型上找到）
console.log(car.color); // blue（自身属性）

2.3 核心公式

实例.__proto__ === 构造函数.prototype
构造函数.prototype.constructor === 构造函数

2.4 constructor 属性

原型上的 constructor 指向构造函数，记录实例的创建者：

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

四、原型链详解

4.1 原型链查找

v8 在访问对象中的一个属性时，会先访问对象中显示存在的属性，如果没有，就会去对象的隐式原型上查找，如果还没有，就会顺着隐式原型一直往上找，直到找到 null 为止，这个查找关系，就叫原型链查找

4.2 原型链继承

原型链是实现继承的核心机制：

Grand.prototype.house = function() { console.log('汤臣一品'); };
function Grand() { this.card = 100000000; }

Father.prototype = new Grand();
function Father() { this.lastName = '张'; }

Child.prototype = new Father();
function Child() { this.age = 18; }

const p = new Child();
p.house(); // 汤臣一品（通过原型链找到）

4.3 完整原型链

const f1 = new Foo()

1.f1.__proto__ = Foo.prototype

2.Foo.prototype.__proto__ = Object.prototype

3.Object.prototype.__proto__ = null

4.Foo.__proto__ = Function.prototype

5.Function.prototype.__proto__ = Object.prototype

6.Function.__proto__ = Function.prototype

五、总结

原型与原型链是 JavaScript 实现面向对象的核心机制。每个函数都有 prototype 属性指向原型对象，每个对象都有 __proto__ 指向构造函数的原型，它们通过 constructor 形成紧密联系。属性查找时，JS 会沿着 __proto__ 形成的链向上查找，直到 null .