最详尽的 JS 原型与原型链终极详解，没有「可能是」。

Category（分类）: JavaScript Status: 已整理

本文是 2017 年的经典原型教学文，保留了原文的叙事结构、示例和记忆口诀。整理时按当前 ECMAScript 规范修正了几处流传甚广的旧说法（例如「原型对象是构造函数的实例」「__proto__ 是每个对象的自有属性」），并在相应位置补充了现代视角。文末附勘误清单。

一. 普通对象与函数对象

JavaScript 中常被夸张地称为「万物皆对象」——准确地说，JavaScript 的值分为原始值（string、number、boolean、null、undefined、symbol、bigint）和对象，而对象里又有一类特殊的：函数对象（可调用对象）。Object、Function 是 JS 自带的函数对象。下面举例说明：

var o1 = {}
var o2 = new Object()

function f1() {}
var f2 = function() {}
var f3 = new Function('str', 'console.log(str)')

var o3 = new f1() // f1 是函数声明，声明会被提升，因此这里可以先用

console.log(typeof Object) // function
console.log(typeof Function) // function

console.log(typeof f1) // function
console.log(typeof f2) // function
console.log(typeof f3) // function

console.log(typeof o1) // object
console.log(typeof o2) // object
console.log(typeof o3) // object

在上面的例子中 o1、o2、o3 为普通对象，f1、f2、f3 为函数对象。怎么区分？原文的经验法则是「凡是通过 new Function() 创建的对象都是函数对象」，f1、f2「归根结底都是通过 new Function() 的方式进行创建的」。

现代注解：这个说法是帮助记忆的近似，不是规范事实。规范中函数对象是「具有 [[Call]] 内部方法的可调用对象」，函数声明、函数表达式、箭头函数、class 都由引擎直接创建，并不会真的执行一次 new Function()；Object、Function 等内置对象也是引擎在初始化 realm 时直接创建的 intrinsics。可靠的判定方式是 typeof f === 'function'（或 f instanceof Function，注意跨 realm 场景）。教学上可以保留「函数也是对象，而且是特殊的一类」这个直觉。

一定要分清楚普通对象和函数对象，下面我们会常常用到它。

二. 构造函数

我们先复习一下构造函数的知识：

function Person(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.sayName = function() { alert(this.name) }
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer')
var person2 = new Person('Mick', 23, 'Doctor')

上面的例子中 person1 和 person2 都是 Person 的实例。这两个实例都没有自己名为 constructor 的属性，但访问 person1.constructor 时会沿原型链找到构造函数原型上的 constructor 属性，它指向 Person。即：

console.log(person1.constructor === Person) // true
console.log(person2.constructor === Person) // true

我们要记住两个概念（构造函数，实例）：

person1 和 person2 都是构造函数 Person 的实例

一个公式：

实例的构造函数属性（constructor，通常继承自原型）指向构造函数。

三. 原型对象

在 JavaScript 中，每当定义一个函数时，引擎都会为它创建一个 prototype 属性，这个属性指向函数的原型对象。（先不管什么是 __proto__，下一节的课程会详细剖析。）

function Person() {}
Person.prototype.name = 'Zaxlct'
Person.prototype.age = 28
Person.prototype.job = 'Software Engineer'
Person.prototype.sayName = function() {
  alert(this.name)
}

var person1 = new Person()
person1.sayName() // 'Zaxlct'

var person2 = new Person()
person2.sayName() // 'Zaxlct'

console.log(person1.sayName === person2.sayName) // true

我们得到了本文第一个「定律」：

每个对象都有内部原型（规范写作 [[Prototype]]，可通过 __proto__ 访问器或 Object.getPrototypeOf() 观察），但只有函数对象才有 prototype 属性。

现代注解：严格说，__proto__ 并不是每个对象都「有」的属性——它是 Object.prototype 上的一个访问器属性（ECMAScript 2015 起收录在附录 B 的 Web 兼容特性中），对象通过继承获得它。用 Object.create(null) 创建的对象没有 __proto__，访问会得到 undefined。标准做法是 Object.getPrototypeOf(obj) 和 Object.setPrototypeOf(obj, proto)。

那什么是原型对象呢？

我们把上面的例子改一改你就会明白了：

Person.prototype = {
  name: 'Zaxlct',
  age: 28,
  job: 'Software Engineer',
  sayName: function() {
    alert(this.name)
  }
}

原型对象，顾名思义，它就是一个普通对象（废话 = =!）。从现在开始你要牢牢记住原型对象就是 Person.prototype，如果你还是害怕它，那就把它想象成一个字母 A：var A = Person.prototype

在上面我们给 A 添加了四个属性：name、age、job、sayName。其实它还有一个默认的属性：constructor

在默认情况下，所有的原型对象都会自动获得一个 constructor（构造函数）属性，这个属性（是一个指针）指向 prototype 属性所在的函数（Person）

上面这句话有点拗口，我们「翻译」一下：A 有一个默认的 constructor 属性，这个属性是一个指针，指向 Person。即：

Person.prototype.constructor === Person

在上面第二小节《构造函数》里，我们知道实例的构造函数属性（constructor）指向构造函数：person1.constructor === Person

这两个「公式」好像有点联系：

person1.constructor === Person
Person.prototype.constructor === Person

person1 为什么有 constructor 属性？那是因为 person1 是 Person 的实例。

那 Person.prototype 为什么有 constructor 属性？？

原文在这里给出了一个著名的类比：

// 原文注：上面两行代码只是帮助理解，并不能正常运行
var A = new Person()
Person.prototype = A

并得出结论「原型对象（Person.prototype）是构造函数（Person）的一个实例」。

勘误（重要）：这个结论是错的，验证非常简单——Person.prototype instanceof Person 的结果是 false。真实情况是：创建函数时，引擎会为它创建一个普通的对象作为默认原型，这个对象的 [[Prototype]] 是 Object.prototype，上面带有一个指向函数自身的 constructor 属性。可以近似理解为：

function Person() {}
console.log(Person.prototype instanceof Person) // false
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype) // true

正确的记忆方式是：默认原型对象是一个「带有指回构造函数的 constructor 属性」的普通对象，而不是构造函数的实例。

原型对象其实就是普通对象（但 Function.prototype 除外，它是函数对象，但它很特殊，它没有 prototype 属性——前面说到函数对象都有 prototype 属性）。看下面的例子：

function Person() {}
console.log(Person.prototype) // Person {}
console.log(typeof Person.prototype) // object
console.log(typeof Function.prototype) // function，这个特殊
console.log(typeof Object.prototype) // object
console.log(typeof Function.prototype.prototype) // undefined

Function.prototype 为什么是函数对象呢？原文同样用了一个类比：

// 原文注：帮助理解的教学类比，并非真实执行过程
var A = new Function()
Function.prototype = A

现代注解：规范中 Function.prototype 是一个内置的函数对象（一个「什么都不做、返回 undefined 的函数」），由引擎在 realm 初始化时创建，它自身确实没有 prototype 属性。用 typeof Function.prototype === 'function' 这一点区分它即可，不必纠结「它由谁创建」。

那原型对象是用来做什么的呢？主要作用是用于继承。举个例子：

var Person = function(name) {
  this.name = name // tip: 当函数执行时这个 this 指的是谁？
}
Person.prototype.getName = function() {
  return this.name // tip: 当函数执行时这个 this 指的是谁？
}
var person1 = new Person('Mick')
person1.getName() // Mick

（勘误：原文此行误写为 new person('Mick')，小写的 person 未定义，会抛出 ReferenceError。）

从这个例子可以看出，通过给 Person.prototype 设置了一个函数属性，Person 的实例（person1）就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

小问题，上面两个 this 都指向谁？

var person1 = new Person('Mick')
person1.name = 'Mick' // 此时 person1 已经有 name 这个属性了
person1.getName() // Mick

故两次 this 在函数执行时都指向 person1（作为构造函数调用时 this 指向新创建的实例；getName 作为 person1 的方法调用时 this 也是 person1）。

2017-10-27 更新：

下面的评论有「人」问：「null 没有 __proto__」，下面解释一下：

null 是一个独立的数据类型（原始值），它不是一个空引用，也不是对象。参考 ECMAScript 5.1 规范 4.3.11 节与 MDN：null。
typeof null 结果是 object，这是个历史遗留问题（初版实现中类型标签复用了对象标记位）。参考 MDN：typeof。
在 ES6 起草阶段，曾有提案把 typeof null 纠正为 null，但因为会破坏大量既有代码而被拒绝，最终维持现状。

（出处：知乎问题《typeof null 结果是 object，请问是历史遗留问题吗》下克荷林的回答：https://www.zhihu.com/question/21691758/answer/987822）

四. `proto`

JS 在创建对象（不论是普通对象还是函数对象）的时候，都会为它关联一个内部原型，规范记作 [[Prototype]]，在绝大多数对象上可以通过 __proto__ 访问器观察到，它用于指向创建它的构造函数的原型对象。

对象 person1 的内部原型，创建它的构造函数是 Person，构造函数的原型对象是 Person.prototype，所以：

person1.__proto__ === Person.prototype // true
Object.getPrototypeOf(person1) === Person.prototype // true，标准写法

请看下图：

实例、构造函数与原型对象关系图（《JavaScript 高级程序设计》图 6-1）

《JavaScript 高级程序设计》的图 6-1

根据上面这个连接图，我们能得到：

Person.prototype.constructor === Person
person1.__proto__ === Person.prototype
person1.constructor === Person

不过，要明确的真正重要的一点就是，这个连接存在于实例（person1）与构造函数（Person）的原型对象（Person.prototype）之间，而不是存在于实例（person1）与构造函数（Person）之间。

注意：因为绝大部分浏览器都支持 __proto__ 访问器，所以它才被标准化（ECMAScript 2015 将其收录进附录 B 的 Web 兼容特性；ES5 时代部分浏览器已支持，但当时还不是标准）。规范推荐使用 Object.getPrototypeOf() / Object.setPrototypeOf()。

六. 原型链

小测试来检验一下你理解的怎么样：

person1.__proto__ 是什么？
Person.__proto__ 是什么？
Person.prototype.__proto__ 是什么？
Object.__proto__ 是什么？
Object.prototype.__proto__ 是什么？

答案：

第一题：

因为 person1.__proto__ === person1 的构造函数.prototype

因为 person1 的构造函数 === Person

所以 person1.__proto__ === Person.prototype

第二题：

因为 Person.__proto__ === Person 的构造函数.prototype

因为 Person 的构造函数 === Function（准确说：函数对象的 [[Prototype]] 被初始化为 Function.prototype）

所以 Person.__proto__ === Function.prototype

第三题：

Person.prototype 是一个普通对象，我们无需关注它有哪些属性，只要记住它是一个普通对象。

因为一个普通对象的构造函数 === Object

所以 Person.prototype.__proto__ === Object.prototype

第四题，参照第二题，因为 Person 和 Object 一样都是构造函数，所以 Object.__proto__ === Function.prototype。

第五题：

Object.prototype 对象也有内部原型，但它比较特殊，为 null。因为 null 处于原型链的顶端，这个只能记住。

Object.prototype.__proto__ === null // true
Object.getPrototypeOf(Object.prototype) === null // true，标准写法

现代注解：规范语言是「Object.prototype 的 [[Prototype]] 为 null」，原型链的查找到这里终止。「null 生万物」是对这个事实的文学化表达。

八. Prototype

在 ECMAScript 核心所定义的全部属性中，最耐人寻味的就要数 prototype 属性了。对于 ECMAScript 中的引用类型而言，prototype 是保存着它们所有实例方法的真正所在。换句话所说，诸如 toString() 和 valueOf() 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。

——《JavaScript 高级程序设计》第三版 P116

我们知道 JS 内置了一些方法供我们使用，比如：

对象可以用 constructor、toString()、valueOf() 等方法；

数组可以用 map()、filter()、reduce() 等方法；

（勘误：原文写「数字可以用 parseInt()/parseFloat() 等方法」——parseInt/parseFloat 是全局函数，不是 Number.prototype 上的方法；ES2015 起也提供了等价的静态方法 Number.parseInt()/Number.parseFloat()。数字自身的原型方法是 toFixed()、toString(radix) 这类。）

Why ？？？

why??（原文插图）

why??

当我们创建一个函数时：

var Person = new Object()

Person 是 Object 的实例，所以 Person 继承了 Object 的原型对象 Object.prototype 上所有的方法：

Object.prototype（原文截图）

Object.prototype

Object 的每个实例都具有以上的属性和方法。

所以我可以用：

Person.constructor

也可以用：

Person.hasOwnProperty

当我们创建一个数组时：

var num = new Array()

num 是 Array 的实例，所以 num 继承了 Array 的原型对象 Array.prototype 上所有的方法：

Array.prototype（原文截图）

Array.prototype

Are you f***ing kidding me? 这尼玛怎么是一个空数组？？？

doge（原文插图）

doge

这是因为控制台直接打印 Array.prototype 时，把它按「一个（内容为空的）数组」来展示。我们可以用一个 ES5 提供的方法：

Object.getOwnPropertyNames

获取自身（包括不可枚举的属性，但不包括原型上的属性，也不包括 Symbol 键）的属性名，返回一个数组：

var arrayAllKeys = Array.prototype
console.log(Object.getOwnPropertyNames(arrayAllKeys))
// 输出（不同引擎、不同版本会有差异，下面是较新 V8 的结果）：
// ['length', 'constructor', 'at', 'concat', 'copyWithin', 'fill', 'find',
//  'findIndex', 'findLast', 'findLastIndex', 'lastIndexOf', 'pop', 'push',
//  'reverse', 'shift', 'unshift', 'slice', 'sort', 'splice', 'includes',
//  'indexOf', 'join', 'keys', 'entries', 'values', 'forEach', 'filter',
//  'flat', 'flatMap', 'map', 'every', 'some', 'reduce', 'reduceRight',
//  'toReversed', 'toSorted', 'toSpliced', 'with', 'toLocaleString', 'toString']

勘误与更新：原文当时的输出只有 35 个左右的方法名（ES6 时代），上面已换成当前引擎的输出。注意：flat、includes、at、findLast、findLastIndex、toReversed、toSorted、toSpliced、with 等都是后来陆续加入的；[Symbol.iterator] 这类 Symbol 键属性不会出现在 getOwnPropertyNames 的结果里，要用 Object.getOwnPropertySymbols 查看。

这样你就明白了随便声明一个数组，它为啥能用那么多方法了。

细心的你肯定发现了 Object.getOwnPropertyNames(arrayAllKeys) 输出的数组里并没有 constructor/hasOwnProperty 等对象的方法。

但是随便定义的数组也能用这些方法：

var num = [1]
console.log(num.hasOwnProperty('length')) // true

（勘误：原文误写为 num.hasOwnPrototype()，并声称「输出布尔值而不是报错」——hasOwnPrototype 并不存在，调用会抛出 TypeError；正确的方法名是 hasOwnProperty（或 ES2022 的 Object.hasOwn(num, 'length')）。）

Why ？？？

why??（原文插图）

why??

因为 Array.prototype 虽然没这些方法，但是它有内部原型（__proto__）：

// 上面我们说了 Object.prototype 就是一个普通对象。
Array.prototype.__proto__ === Object.prototype // true

所以 Array.prototype 继承了对象的所有方法，当你用 num.hasOwnProperty() 时，JS 会先查一下它的构造函数（Array）的原型对象 Array.prototype 有没有 hasOwnProperty() 方法，没查到的话继续查一下 Array.prototype 的原型对象 Array.prototype.__proto__ 有没有这个方法。

当我们创建一个函数时：

var f = new Function('x', 'return x*x;')
// 当然你也可以这么创建 f = function(x){ return x*x }
console.log(f.call(null, 3)) // 9，call 方法从哪里来的？
console.log(Function.prototype) // function () { [native code] } （一个空函数）
console.log(Object.getOwnPropertyNames(Function.prototype))
// 输出（不同引擎、版本顺序可能有差异）：
// ['length', 'name', 'arguments', 'caller', 'constructor', 'apply', 'bind', 'call', 'toString']

现代注解：原文还写了 console.log(f.arguments)，Function.prototype.arguments 是已废弃的遗留访问器，函数未执行时访问返回 null，严格模式下还会报错，新代码不要使用。caller 同样是遗留属性。此外 Symbol.hasInstance 也在 Function.prototype 上（Symbol 键，getOwnPropertyNames 看不到）。

我们再复习第七小节这句话：

所有函数对象的 __proto__ 都指向 Function.prototype，它是一个空函数（Empty function）

嗯，我们验证了它就是空函数。不过不要忽略前半句。我们枚举出了它的所有方法，所以所有的函数对象都能用，比如：

Function.prototype 上的方法（原文截图）

函数对象

如果你还没搞懂啥是函数对象？

去屎（原文插图）

去屎

还有，我建议你可以再复习下为什么：

Function.prototype 是唯一一个 typeof XXX.prototype 为 function 的 prototype

我猜你肯定忘了。

现代补充：class 语法与原型

ES2015 的 class 是原型的语法糖：类方法定义在 Constructor.prototype 上（且不可枚举），静态方法和 static 块在构造函数自身上，extends 内部通过 Object.setPrototypeOf 一类的机制串起两条原型链。原型模型没有变，只是写法更清晰：

class Person {
  constructor(name) { this.name = name }
  getName() { return this.name } // 定义在 Person.prototype 上
}
class Worker extends Person {
  constructor(name, job) {
    super(name)
    this.job = job
  }
}
const w = new Worker('Mick', 'Doctor')
console.log(Object.getPrototypeOf(w) === Worker.prototype) // true
console.log(Object.getPrototypeOf(Worker.prototype) === Person.prototype) // true
console.log(Object.getPrototypeOf(Worker) === Person) // true（构造函数这条链）

需要「无原型」对象时，可以用 Object.create(null)；需要安全地修改原型，优先在创建时用 Object.create(proto)，运行时改原型（Object.setPrototypeOf）会让引擎优化失效，应尽量避免。

九. 复习一下

第八小节我们总结了：

所有函数对象的 __proto__ 都指向 Function.prototype，它是一个空函数（Empty function）

但是你可别忘了在第三小节我们总结的：

所有对象的 __proto__ 都指向其构造器的 prototype

咦，我找了半天怎么没找到这句话……

doge（原文插图）

doge

我们下面再复习下这句话。

先看看 JS 内置构造器：

var obj = { name: 'jack' }
var arr = [1, 2, 3]
var reg = /hello/g
var date = new Date()
var err = new Error('exception')

console.log(obj.__proto__ === Object.prototype) // true
console.log(arr.__proto__ === Array.prototype) // true
console.log(reg.__proto__ === RegExp.prototype) // true
console.log(date.__proto__ === Date.prototype) // true
console.log(err.__proto__ === Error.prototype) // true

再看看自定义的构造器，这里定义了一个 Person：

function Person(name) {
  this.name = name
}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true

p 是 Person 的实例对象，p 的内部原型总是指向其构造器 Person 的原型对象 prototype。

每个对象（沿原型链）都有一个 constructor 属性，可以获取它的构造器，因此以下打印结果也是恒等的：

function Person(name) {
  this.name = name
}
var p = new Person('jack')
console.log(p.__proto__ === p.constructor.prototype) // true

上面的 Person 没有给其原型添加属性或方法，这里给其原型添加一个 getName 方法：

function Person(name) {
  this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true

可以看到 p.__proto__ 与 Person.prototype、p.constructor.prototype 都是恒等的，即都指向同一个对象。

如果换一种方式设置原型，结果就有些不同了：

function Person(name) {
  this.name = name
}
// 重写原型
Person.prototype = {
  getName: function() {}
}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false

这里直接重写了 Person.prototype（注意：上一个示例是修改原型）。输出结果可以看出 p.__proto__ 仍然指向的是 Person.prototype，而不再指向 p.constructor.prototype。

这也很好理解，给 Person.prototype 赋值的是一个对象直接量 { getName: function(){} }，使用对象直接量方式定义的对象其构造器（constructor）指向的是根构造器 Object，于是 p.constructor 沿原型链找到的是 Object.prototype.constructor，也就是 Object，而 Object.prototype 与 { getName: function(){} } 自然不相等。如下：

var p = {}
console.log(p.constructor === Object) // 对象直接量方式定义的对象其 constructor 为 Object
console.log(p.constructor.prototype === Object.prototype) // true

现代注解：这正是「整体重写原型」会丢失 constructor 的经典陷阱。现代写法通常是 Person.prototype = { getName() {}, constructor: Person }（手动补回，注意它会变成可枚举属性），或者直接用 class 语法，或用 Object.defineProperty(Person.prototype, 'getName', …)。此外，重写原型要在创建实例之前做，否则已创建实例仍指向旧原型。

十. 原型链（再复习一下：）

下面这个例子你应该能明白了！

function Person() {}
var person1 = new Person()
console.log(person1.__proto__ === Person.prototype) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

console.log(Person.__proto__ === Function.prototype) // true
console.log(Function.prototype) // function () { [native code] }（空函数）

var num = new Array()
console.log(num.__proto__ === Array.prototype) // true
console.log(Array.prototype.__proto__ === Object.prototype) // true
console.log(Array.prototype) // []（空数组）
console.log(Object.prototype.__proto__) // null

console.log(Array.__proto__ === Function.prototype) // true

疑点解惑：

Object.__proto__ === Function.prototype // true
Object 是函数对象，原文说它「是通过 new Function() 创建的，所以 Object.__proto__ 指向 Function.prototype」。更准确的说法是：Object 构造函数是内置对象（intrinsic），引擎初始化 realm 时会把所有内置构造函数的 [[Prototype]] 统一设置为 Function.prototype。「new Function()」只是帮助记忆的口诀。
Function.__proto__ === Function.prototype // true
Function 也是函数对象，同样由引擎内置创建，其 [[Prototype]] 就是 Function.prototype，于是出现了「自己指向自己所在的 prototype」这个看似奇怪的环。
自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL 生万物）
正如《道德经》里所说「无，名天地之始」。
Function.prototype.__proto__ === Object.prototype // true
其实这一点我也有点困惑，不过也可以试着解释一下。
Function.prototype 是个函数对象，理论上它的 __proto__ 应该指向 Function.prototype，就是它自己，自己指向自己，没有意义。
JS 一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向 Object.prototype。Object.prototype.__proto__ === null，保证原型链能够正常结束。
现代注解：从规范看这正是「函数也是对象」的直接体现——Function.prototype 是一个函数对象，但同时也是普通对象意义上的「Object 的实例」，因此它的 [[Prototype]] 是 Object.prototype。原型链的两端（Function.prototype 指向 Object.prototype、Object.prototype 指向 null）保证了所有查找最终都能收敛。

十一. 总结

原型和原型链是 JS 实现继承的一种模型。
原型链的形成真正是靠对象的内部原型 [[Prototype]]（浏览器里可用 __proto__ 观察）而非函数的 prototype 属性——prototype 只是构造函数用来给实例设定初始 [[Prototype]] 的「配菜」。

要深入理解这句话，我们再举个例子，看看前面你真的理解了吗？

var animal = function() {}
var dog = function() {}

animal.price = 2000
dog.prototype = animal
var tidy = new dog()
console.log(dog.price) // undefined
console.log(tidy.price) // 2000

这里解释一下：

var dog = function() {}
dog.prototype.price = 2000
var tidy = new dog()
console.log(tidy.price) // 2000
console.log(dog.price) // undefined

var dog = function() {}
var tidy = new dog()
tidy.price = 2000
console.log(dog.price) // undefined

这个明白吧？想一想我们上面说过这句话：

实例（tidy）和原型对象（dog.prototype）存在一个连接。不过，要明确的真正重要的一点就是，这个连接存在于实例（tidy）与构造函数的原型对象（dog.prototype）之间，而不是存在于实例（tidy）与构造函数（dog）之间。

聪明的你肯定想通了吧：）

原文勘误与现代化说明

整理时保留原文叙事，修正了以下主要问题：

「原型对象是构造函数的一个实例」是错误的。Person.prototype instanceof Person 为 false；默认原型是带 constructor 回指的普通对象，其 [[Prototype]] 是 Object.prototype。原文「var A = new Person(); Person.prototype = A」仅为教学类比。
「凡是通过 new Function() 创建的对象都是函数对象」改为近似说法。规范中函数对象是含 [[Call]] 的可调用对象，声明/表达式/class 由引擎直接创建；内置构造器是 realm 初始化时创建的 intrinsics。
__proto__ 不是每个对象的自有属性。它是 Object.prototype 上的访问器（ES2015 附录 B Web 兼容特性），Object.create(null) 创建的对象没有它；标准 API 是 Object.getPrototypeOf / Object.setPrototypeOf。
hasOwnPrototype 全部更正为 hasOwnProperty；原文「输出布尔值而不是报错」的说法不成立，未定义方法调用会抛 TypeError。
new person('Mick')（小写）更正为 new Person(...)；Perosn/Man 拼写笔误更正；Math.construrctor 更正为 constructor。
「内置构造器共计 12 个」是 ES5 时代统计，补充了 ES2015+ 的 Symbol、Map、Set、Promise、Proxy 等。
parseInt/parseFloat 不是「数字的方法」，是全局函数（ES2015 起另有 Number.parseInt 等静态方法）。
Object.getOwnPropertyNames(Array.prototype) 的输出按当前引擎更新，并说明其随版本变化、不含 Symbol 键。
f.arguments 标注为废弃的遗留访问器；caller 同为遗留属性。
失效的 links.jianshu.com 跳转链与已无法解析的 108js.com 参考链接已替换为可直接访问的规范/MDN/原作者链接。
补充了 class 与原型关系、Object.create(null)、重写原型丢 constructor 的陷阱等现代内容。

图片来源与授权说明

正文图片已本地化到 images/ 目录，均来自原文（简书 Yi罐可乐《最详尽的 JS 原型与原型链终极详解》及其镜像），下载自简书图床与原文镜像站。图片内容的转载授权无法仅凭下载确认，公开发布前应向原作者确认许可：

images/105-image-01.webp：《JavaScript 高级程序设计》图 6-1（实例—构造函数—原型对象关系图），出自原书，属引用书籍插图。
images/105-image-02.webp：内置构造器 typeof 输出截图。来源：原文截图。
images/105-image-03.webp：why?? 表情图。来源：原文插图。
images/105-image-04.webp：Object.prototype 控制台截图。来源：原文截图。
images/105-image-05.webp：Array.prototype 控制台截图。来源：原文截图。
images/105-image-06.webp：doge 表情图。来源：原文插图。
images/105-image-07.webp：函数对象方法截图。来源：原文截图。
images/105-image-08.webp：表情图。来源：原文插图。
images/105-image-09.webp：doge 表情图。来源：原文插图。

其中控制台截图反映的是历史引擎输出，具体输出随引擎与版本变化，正文已按当前引擎补充说明。

原文归属

作者：Yi罐可乐。历史来源：简书《最详尽的 JS 原型与原型链终极详解，没有「可能是」。》。原文链接仅用于保留历史出处，当前语义以本文列出的规范和官方文档为准。

本文借鉴了：

《JS 原型与原型链终极详解》，作者 zhangjiahao8961（原文所引 108js.com 页面已失效）。
《JavaScript 中 __proto__ 与 prototype 的关系》，作者：snandy。
《JavaScript 高级程序设计》中文译本第三版。

最详尽的 JS 原型与原型链终极详解，没有「可能是」。

最详尽的 JS 原型与原型链终极详解，没有「可能是」。

一. 普通对象与函数对象

二. 构造函数

三. 原型对象

四. `proto`

五. 构造器

六. 原型链

七. 函数对象（复习一下前面的知识点）

所有函数对象的 `proto` 都指向 Function.prototype，它是一个空函数（Empty function）

八. Prototype

当我们创建一个函数时：

当我们创建一个数组时：

当我们创建一个函数时：

现代补充：class 语法与原型

九. 复习一下

十. 原型链（再复习一下：）

十一. 总结

原文勘误与现代化说明

图片来源与授权说明

原文归属

参考链接

输入关键词开始搜索

按分类浏览