深入理解 JavaScript 中 __proto__ 与 prototype 的区别与联系

__proto__ 与 prototype 的基本定义

__proto__ 代表内部原型链引用，而 prototype 则是构造函数的原型属性（构造函数本质上即为函数）。

构造函数的 prototype 属性本身是一个对象。

那么什么是构造函数？要创建一个对象，首先需要一个对象构造函数，这类似于 PHP 中创建对象前需定义类的概念。构造函数的实质就是一个函数，接下来探讨如何通过该构造函数创建对象？答案是使用 new 关键字。

内置构造函数的原型指向

构造函数用于构建对象。首先，所有构造函数或函数的 __proto__ 都指向 Function.prototype，这是一个空函数（Empty function）。

Number.__proto__ === Function.prototype
// true
Boolean.__proto__ === Function.prototype
// true
String.__proto__ === Function.prototype
// true
Object.__proto__ === Function.prototype
// true
Function.__proto__ === Function.prototype
// true
Array.__proto__ ===
Function.prototype
// true
RegExp.__proto__ === Function.prototype
// true
Error.__proto__ ===
Function.prototype
// true
Date.__proto__ ===
Function.prototype
// true

上述代码说明 Number 等均为构造函数，它们实际上是 Function 的一个实例。换言之，这相当于执行了 var Number = new Function();。

JavaScript 中共有 12 个内置（build-in）构造函数/对象（ES5 中新增 JSON），此处列举了 8 个可访问的构造函数。其余如 Global 无法直接访问，Arguments 仅在函数调用时由 JS 引擎创建，而 Math 和 JSON 以对象形式存在，无需使用 new 关键字。它们的 __proto__ 指向 Object.prototype，如下所示：

Math.__proto__ === Object.prototype
// true
JSON.__proto__ === Object.prototype
// true

自定义构造函数的原型关系

前述提到的“所有构造函数/函数”同样包含自定义函数，例如：

// 函数声明
function Person()
{}
// 函数表达式
var Man
= 
function()
{}
console.log(Person.__proto__ === Function.prototype)
// true
console.log(Man.__proto__ ===
Function.prototype)
// true

这说明了什么？

所有的构造函数均源自 Function.prototype，甚至包括根构造函数 Object 及 Function 自身。所有构造函数都继承了 Function.prototype 的属性和方法，例如 length、call、apply、bind（ES5）。

Function.prototype 的特殊性

Function.prototype 是唯一一个 typeof XXX.prototype 结果为 “function” 的 prototype。其他构造函数的 prototype 均为对象，如下所示：

console.log(typeof Function.prototype)
// function
console.log(typeof Object.prototype)
// object
console.log(typeof Number.prototype)
// object
console.log(typeof Boolean.prototype)
// object
console.log(typeof String.prototype)
// object
console.log(typeof Array.prototype)
// object
console.log(typeof RegExp.prototype)
// object
console.log(typeof Error.prototype)
// object
console.log(typeof Date.prototype)
// object
console.log(typeof Object.prototype)
// object

前文提到它是一个空函数，可通过 alert(Function.prototype) 查看。

原型链的终点

既然已知所有构造函数（含内置及自定义）的 __proto__ 都是 Function.prototype，那么 Function.prototype 的 __proto__ 指向哪里？

常听说 JavaScript 中函数是一等公民，这体现在何处？如下：

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

这说明所有构造函数本质上也是普通的 JS 对象，可以对其添加或删除属性。同时，它继承了 Object.prototype 上的所有方法，如 toString、valueOf、hasOwnProperty 等。

最后，Object.prototype 的 __proto__ 指向哪里？

Object.prototype.__proto__ ===
null //
true

原型链已到达顶端，值为 null。

希望大家通过本文对 JavaScript 中 __proto__ 和 prototype 之间的区别与联系有了更深入的了解，如有疑问欢迎留言，共同讨论。