转载自简书-浅析JavaScript的对象系统 首先，你肯定在不少地方看到过这句话：

JavaScript 中一切皆对象

这句话是很有道理的（废话，要不然能在不少地方都看到吗。。），你可能没有意识到，在 JavaScript（以下简称 JS）中，你声明一个变量 let a = 3，此时的 a 其实是一个对象，因为你可以将它当做对象一样去调用 toString() 方法，这其中的答案都在 JS 对象系统中，请看下面这张图：

下面我们就结合这张图来分析一下 JS 对象系统的结构

本地对象

“本地对象”的说法可能比较陌生，也可以叫做“原生对象”、“内置对象”、“内建对象”，但其实指的都是 native object。ECMA-262 对于 native object 的定义为：

独立于宿主环境的 ECMAScript 实现提供的对象

我们知道，“宿主”一般指浏览器，而“独立于宿主环境”，也就是说与浏览器环境不相关，这就是说：native object 与浏览器不相关，只要这个浏览器按照 ECMAScript 规范实现了JS，那就必然实现了规范中的所有 native object。换句话说就是：本地对象（native object）是语言本身实现和提供的对象，和语言运行在哪个环境无关。也就是说，不管你的JS代码在哪里跑，你都可以 new 出 native object 并使用它。照此理解，我觉得其实把 native object 翻译成“原生对象”最合意。

object

到目前为止，我们看到的大多数引用类型值都是 Object 类型的实例；而且，Object 也是 ECMAScript 中使用最多的一个类型。虽然 Object 的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它们确实是非常理想的选择。——《JavaScript高级程序设计（第3版）》

“万物从无到有”，JS 中的大多数引用类型值都是 Object 类型的实例，而 Object 的原型就是 null 了（可以在 chrome 控制台中打印 Object.prototype.__proto__），Object 是所有其他对象类型的基础类型，提供了 toString() 等基础方法

Array

数组类型

Date

日期类型

RegExp

正则类型

Function

说起来 ECMAScript 中什么最有意思，我想那莫过于函数了——而有意思的根源，则在于函数实际上是对象。每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法。——《J3》

没错，请注意大小写，Function 是一种对象类型，而 function 则是一个对象实例，见如下代码：

console.log(Function() instanceof Function);    //true(构造函数Function()是Function类型的实例)
console.log(Function() instanceof Object);    //true(构造函数Function()当然也是Object类型的实例)

事实上，任何一个函数都是函数对象的实例，而函数类型本身就是一种对象类型，所以：函数也是对象。

Error 等各种错误类对象

Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError 等错误类型的对象。

String、Number、Boolean

之所以将这三类放到一起，是因为它们属于JS中的基本数据类型，但其实它们也是一种对象类型，这样你才能像使用对象一般操作字符串、数值、布尔值，见下面代码：

var str = 'Hello World';
str = str.substr(0,5);    //调用substr()方法截取字符串，我是字符串，但实际上是一个对象
console.log(str);    //'Hello'

所以，当我们通过变量声明的方式去声明一个字符串、数字、布尔值的时候，其实后台帮我们创建了一个对象：

实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据 ——《J3》

书上一语道明。注意一下这句话中的“读取”和“对应”两个词。“读取”是指进入读取模式，即从内存中去读取这个字符串值的时候；“对应”指的是基本类型值是哪种类型，后台自动给你创建的基本包装类型就是哪种对应的类型，比如这里的基本类型值是 String 类型，那后台创建的基本包装类型也就是 String 包装类型。 因为这一机制，上面代码的实际执行情况其实是这样的：

var str = 'Hello World';
//str = str.substr(0,5);    //(str进入读取模式，准备创建基本包装类型对象)

var _str = new String('Hello World');
str = _str.substr(0, 5);
_str = null;    //使用完后台会立即将该包装对象销毁

console.log(str);    //'Hello'

这里只展示了 String 包装类型，其实 Number 和 Boolean 也是完全一样的原理

内置对象（单体内置对象）（built-in object）

这个叫 built-in object，上面那个叫 native object，那么它们有什么区别呢，还是看一下《J3》这本书中的解释吧：

ECMA-262 对内置对象的定义是：“由 ECMAScript 实现提供的、不依赖于宿主环境的对象，这些对象在 ECMAScript 程序执行之前就已经存在了。”意思就是说，开发人员不必显式地实例化内置对象，因为它们已经实例化了。——《J3》

这是 ECMA-262 对于 built-in object 的定义。对比 native object 的定义：“独立于宿主环境的 ECMAScript 实现提供的对象”，可以看出，built-in object 是更加特殊的 native object，built-in object 属于 native object。ECMA-262 定义了两种 built-in object：Global 对象、Math 对象。

Global 对象

事实上，js 中并不存在所谓的全局变量以及完全独立的函数。没错，你定义的所有全局变量其实都是 Global 对象的属性，你在全局作用域下定义的所有函数其实都是 Global 对象的方法。

ECMAScript 中的 Global 对象在某种意义上是作为一个终极的“兜底儿对象” 来定义的。换句话说，不属于任何其他对象的属性和方法，终都是它的属性和方法。事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是 Global 对象的属性。——《J3》

parseInt()、eval()、encodeURIComponent() 这些函数实际上都是 Global 对象的方法，在使用这些方法的时候无需通过对象去调用，直接就可以使用。引文说过：“这些对象在 ECMAScript 程序执行之前就已经存在了。”这也算 build-in object 的一个特别之处，《J3》将 build-in object 定义为“单体内置对象”，这个“单体”是否就是指无需手动实例化这一点？ Global 对象的所有属性如下表：

好吧，特殊值 undefined 居然是 Global 对象的一个属性值 - -。乍看之下可能会有点诧异，不过仔细想想，我们之所以说 JavaScript 中一切皆对象是有原因的，你看，就连 undefined 都是对象的属性值。从表中还可以看到，所有原生引用类型的构造函数也都是 Global 对象的属性。这怎么理解？其实也很好理解，比如说当你想要创建一个日期类型的变量时，直接上构造函数 var date = new Date(); 就可以了，可是你想过没有，Date() 构造函数本身是一个函数，而前面我们说过，JS并不存在完全独立的函数，任何函数其实都是挂在某个对象下的方法，哪怕它是一个构造函数。而这些原生构造函数，其“挂载”的对象正是 Global 对象。 介绍了这么多关于 Global 对象的内容，是不是还是不清楚它是个什么玩意儿？这是因为我们在浏览器中并不能直接访问这个对象。好在浏览器为我们实现了一个包含了 Global 对象的 window 对象。

ECMAScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。因此，在全局作用域中声明的所有变量和函数，就都成为了 window 对象的属性。——《J3》

window 对象包含了 Global 对象的所有内容，同时扩展了大量自身需要的属性和方法（比如常用的 alert()）。因此，在浏览器中我们可以通过 window 对象随意访问上述的属性和方法。请看下面代码并加以理解：

var date = new window.Date();    //window是对Global对象的扩展实现，构造函数Date()确实是挂在window上面的
console.log(date);    //Mon Aug 07 2017 10:07:28 GMT+0800 (CST)

其实你也可以在控制台中打印一下 window，你就可以发现它确实包含了上述属性和构造函数

Math 对象

Math 对象是一个保存着必要的数学操作的 build-in object。里面保存着常量 e、圆周率 π 等的值作为属性，同时提供了取整 Math.floor()、取随机数 Math.random()、求平方根等等数学方法。和 Global 对象一样，这些属性和方法都可以在任何时候任何地方直接访问和调用，只不过其形式统一为：Math.***。

宿主对象

宿主对象是指宿主环境所实现和提供的对象。所有非本地对象（native object）都是宿主对象。我之所以在结构图中把自定义对象挂到了宿主对象下正是基于此，不过这并非定死的，你若将自定义对象拎出来和本地对象、宿主对象并列放也并非不可。 所谓宿主，就是指 JS 代码所在的运行环境。对于浏览器环境而言，我们显示一个页面需要 HTML，所以浏览器实现了 DOM 对象 —— window.document；我们还需要浏览器本身给我们提供一些必要的东西，比如 URL 地址相关的 location、设备屏幕相关的 screen 等，所以浏览器又为我们提供了 BOM 对象 —— window。这些对象，就是 host object。等等，怎么 window 对象又出场了？上面不是说过了，window 对象是浏览器对 Global 对象的扩展实现，是 Global 对象的超集，那这玩意儿究竟该挂到 build-in object 上，还是宿主对象下的 BOM 上？答案当然是后者。可以明确的是，window 对象本就是浏览器所实现的，那它当然属于浏览器对象模型（BOM）了！只不过，window 把 ECMAScript 规定的 Global 对象也给一并实现了而已。还有，DOM 对象即是 window.document，而 window.document 就是 DOM 的根节点，从这点来讲，我们可以理解为 BOM 包含了 DOM。 如此，我们终于找到最终对象了 - -，它正是 BOM —— window。你几乎可以在这个对象中找到一切。全局变量、自定义对象、JSON 对象（ECMA262-5 引入为规范）、Math 对象、原生构造函数、Global 的东西。。。 万物合一，世界清静了。 最后，可以把最开始给的图修正更新一下了：

从图上可以看到多了一个 JSON 对象，原因是 ECMA262-5 已经将 JSON 对象纳 入native object 了。