JavaScript万物产生顺序

我们在很多地方可能都有听说过一种说法—— JavaScript 万物皆对象。虽然这种说法不是特别准确，因为我们知道 undefined 就不是个对象，但不可否认的是 JavaScript 中大部分数据都是对象，那么问题来了，对象产生的先后顺序是什么呢？对于 Object 来说，它是一个 Function 的实例，因为 Object instanceof Function // true ；对于 Function 来说，它是 Object 的实例，因为 Function instanceof Object // true ，所以到底是先有 Object 还是先有 Function 呢？这篇文章主要向大家介绍了 JavaScript 对象的产生过程

混沌初始

我们可以把 JavaScript 世界当作是一家自给自足的工厂，这家工厂可以理解为我们的V8引擎，起初工厂中什么都没有，但是工厂认为没有东西本身就是一种东西呀，所以 null 就出现了

工厂想创造一些物品(也就是对象)出来，但是现在没有创建物品的(模版原料)，所以工厂就基于 null 造出来一个模版

这个对象可厉害了，是 JavaScript 中对象的始祖，所有的对象追根溯源后都会找到这个对象，这个天字一号元素就是 JavaScript 中的 Object.prototype ，因此在 JavaScript 中 Object.prototype.__proto__ === null

制造对象的机器

好了，既然模版已经存在了，工厂基于这个一个个手动创建不就好了吗？但是这样的工厂效率太低下了吧，于是工厂灵机一动，造出了一个机器，用于创建物品(对象)出来，而这些物品的模板就是上述提到的天字一号元素 Object.prototype

现在我们就可以基于这台机器来源源不断的创建物品了，它的模版是 Object.prototype

我们通过 new Object 创建一个对象，由于它是以天字一号元素为模板，因此 new Object({}).__proto__ === Object.prototype

制造不同对象的机器

现在工厂可以创建很多个这样的物品，但是这样对于工厂来说太单调了，工厂突然有个了想法，我们可以造出更多的机器（也就是 JavaScript 中的 Array 、 String 等等）来创造出来不同的物品呀，但是对于机器来说，他本身也是一种对象，现在有了这么多机器，要把这类的机器对象和我创建出来的具体物品对象给区别开来，于是工厂基于天字一号元素创建天字二号元素

这个天字二号元素是机器的模版对象，也就是说，每个机器都是它的实例

制造机器的机器

好了，现在工厂的世界丰富了起来，不同的机器创建了不同的物品，大家彼此其乐融融，过了一段时间，外部的世界有了一个需求，我不想要这样的物品，你给我创建一个不同的吧，工厂心想，如果每次都这样，自己岂不是要累死，于是它创建了一个超级厉害的东西，创建机器的机器，也就是我们所说的 Function ，由于他是创建机器使用的，所以它的模版对象是天字二号元素；但是他本来又是一台机器，所以天字二号对象的实例 即

Function.__proto__ === Function.prototype
复制代码

这也是 JavaScript 中最著名的 鸡生蛋还是蛋生鸡 的问题

问题来了

好了现在整个 JavaScript 的世界都正常了，但是这个创建过程还有几点疑问，留给自己慢慢思考

• 天字一号元素 Object.prototype 是怎么通过 null 创建出来的呢
• Function.__proto__ === Function.prototype; Function 构造函数的 prototype 属性和 __proto__ 属性都指向同一个原型，是否可以说 Function 对象是由 Function 构造函数创建的一个实例

经典图片

这张图有助于理解 Function 和 Object 的关系，下面通过自己画一张图片来解释一些每条线的解释

• 红色的线： new Object() 的模版对象是 Object.prototype ， Object 的原型对象是 Object.prototype ，它的模版对象是 Function.prototype ， Object.prototype 的模版对象是 null

new Object().__proto__ === Object.prototype;
Object.__proto__ === Function.prototype;
Object.prototype.__proto__ === nulll;
复制代码

• 黄色的线： Function 的原型对象和模板对象都是 Function.prototype ， Function.prototype 的模板对象是 Object.prototype

Function.prototype === Function.__proto__;
Function.prototype.__proto__ === Object.prototype;
复制代码

• 黑色的线： new Foo() 的模版对象是 Foo.prototype ， Foo.prototype 的模版对象是 Object.prototype ， Foo 的模版对象是 Function.prototype

new Foo().__proto__ === Foo.prototype;
Foo.prototype.__proto__ === Object.prototype;
Foo.__proto__ === Function.prototype
复制代码