浅析JavaScript的对象系统

最新推荐文章于 2024-01-15 21:41:54 发布

maimang09

最新推荐文章于 2024-01-15 21:41:54 发布

阅读量167

点赞数

分类专栏： Web

原文链接：https://www.jianshu.com/p/d0930dc0f95d

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

之前在《JavaScript的数据类型》这篇文章里说过，Object对于JavaScript的语言结构来说意义不一般。为什么这么说呢？你肯定在不少地方看到过这句话：JavaScript中一切皆对象。这句话没什么错。你知道，JS连函数都有其属性和方法；当你定义一个基本类型值的字符串，可是你却可以将这个作为基本类型值的字符串当作对象一样去调用substr()方法。你有想过其中的原因吗？一切的答案都在JavaScript对象系统（声明一下，JavaScript对象系统这个词并不是什么统一定义，只是感觉在这里这么叫比较合适。）中。

请看下面这张图。

JS对象系统.png

这张结构图其实不规范，也并不完善，但是用来整体性地理解JS的Obejct是没问题的。下面就结合图来分析一下JS对象系统的结构。

本地对象(native object)

图中的“本地对象”这个叫法并不唯一，也可以叫做“原生对象”、“内置对象”、“内建对象”，但其实指的都是 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版）》

所有其他对象类型的基础类型。提供了toString()等基础方法。

Array

ECMAScript定义的数组类型。

Date

ECMAScript定义的日期类型。

RegExp

ECMAScript定义的正则类型。

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

为了方便操作对应的3种基本类型值而定义的3种对象类型，使得可以像使用对象一般操作字符串、数值、布尔值。请理解一下下面的代码：

var str = new String();
str.detail = '我是字符串，但实际上是一个对象，否则我怎么可以设置属性？';
console.log(str);    //String {detail: "我是字符串，但实际上是一个对象，否则我怎么可以设置属性？", length: 0, [[PrimitiveValue]]: ""}
console.log(str.detail);    //'我是字符串，但实际上是一个对象，否则我怎么可以设置属性？'

前面说到过，你声明并初始化一个字符串后，通常会理所应当地将其视为一个对象直接使用：

var str = 'Hello World';
str = str.substr(0,5);    //调用substr()方法截取字符串
console.log(str);    //'Hello'

代码没有任何问题，我们也经常这么写。但稍微思考一下你就会发现，str本身作为一个字符串，它只是一个基本数据类型的值，凭什么可以像一个对象一样直接调用方法？讲道理，str仅仅是一个值，哪里来的什么substr()方法？原因就在对象系统中的那个基本包装类型对象。

实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据 ——《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》这本书上又将 built-in object 定义为“单体内置对象”，我也搞不懂这个“单体”又是什么意思。。

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对象的所有属性如下表：

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);    //Thu Jul 21 2016 16:52:08 GMT+0800 (中国标准时间)

你可以自己再做下测试，控制台打印一下window，可以发现它确确实实包含了上述的所有属性和构造函数。

Math对象

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

宿主对象（host object）

宿主对象是指宿主环境所实现和提供的对象。所有非本地对象（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的东西。。。

万物合一，世界清静了。

最后，可以把最开始给的图修正更新一下了：