三张图解JavaScript原型对象与原型链：prototype与proto的区别

作者：纸飞机

时间：2026-10-25

本文通过三张简明图表深入解析JavaScript中的原型对象与原型链机制。重点区分prototype与__proto__的概念差异，结合字面量、构造函数及Object.create三种创建方式，阐明原型链的指向规则与例外情况，帮助开发者清晰理解对象继承的核心逻辑。

文章目录

对于初学者而言，JavaScript的原型机制往往令人困惑。一方面，prototype与__proto__极易混淆；另一方面，它们之间错综复杂的指向关系增加了理解难度。尽管市面上已有大量文章试图厘清这一概念，并出现了许多描绘各种连接线条的经典图示，但这些图表往往让人眼花缭乱，难以真正掌握。因此，笔者尝试将原型中的核心知识点拆解，利用最简化的图表形式，力求清晰阐述关键概念。

原型本质上是一个对象，其他对象可借助它实现属性继承。然而，除了prototype之外，__proto__的作用是什么？两者名称相似，极易混淆，且指向关系混乱，记忆难度大。原型链又指代什么？相信不少初学者甚至部分资深开发者也难以完全解释清楚。下文将通过三张简洁的图表，配合示例代码，帮助读者深入理解。

一、prototype和proto的区别

一、prototype和__proto__的区别

var a = {};
console.log(a.prototype);  //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype);  //b {}
console.log(b.__proto__);  //function() {}

一、prototype和__proto__的区别

/*1、字面量方式*/
var a = {};
console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、构造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false（此处即为图1中的例外情况）

一、prototype和__proto__的区别

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}（即构造器function A 的原型对象）
console.log(a.__proto__.__proto__); //Object {}（即构造器function Object 的原型对象）
console.log(a.__proto__.__proto__.__proto__); //null

至此，关于JavaScript原型对象与原型链的讲解结束。希望这些内容能对读者有所帮助，也欢迎大家继续支持本站。