JavaScript万物产生顺序

这篇文章的思想主要来源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
复制代码

参考文章

• JavaScript 世界万物诞生记