logo头像

叩首问路,码梦为生

JS中的对象系统

转载自简书-浅析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 则是一个对象实例,见如下代码:

1
2
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中的基本数据类型,但其实它们也是一种对象类型,这样你才能像使用对象一般操作字符串、数值、布尔值,见下面代码:

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

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

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

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

1
2
3
4
5
6
7
8
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 对象随意访问上述的属性和方法。请看下面代码并加以理解:

1
2
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 了。

支付宝打赏 微信打赏

听说赞过就能年薪百万