前言

如果你学习 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 原型三大特性

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

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