之前在《JavaScript的数据类型》这篇文章里说过,Object对于JavaScript的语言结构来说意义不一般。为什么这么说呢?你肯定在不少地方看到过这句话:JavaScript中一切皆对象。这句话没什么错。你知道,JS连函数都有其属性和方法;当你定义一个基本类型值的字符串,可是你却可以将这个作为基本类型值的字符串当作对象一样去调用substr()
方法。你有想过其中的原因吗?一切的答案都在JavaScript对象系统(声明一下,JavaScript对象系统这个词并不是什么统一定义,只是感觉在这里这么叫比较合适。)中。
请看下面这张图。
这张结构图其实不规范,也并不完善,但是用来整体性地理解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对象的所有属性如下表:
好吧,特殊值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的东西。。。
万物合一,世界清静了。
最后,可以把最开始给的图修正更新一下了:
(注:ECMA262-5已将JSON
对象纳入native object)