浅析JavaScript的对象系统

之前在《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的东西。。。

万物合一,世界清静了。

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

QQ截图20160722114051.png

(注:ECMA262-5已将JSON对象纳入native object)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,204评论 0 4
  • ECMAScript关键字 delete do else finally function in instance...
    doudou2阅读 705评论 0 0
  • 本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建...
    闷油瓶小张阅读 839评论 0 1
  • 中山有女娇无双,清眸皓齿垂明珰。 我出生于南京,父亲是做官的,却是不幸早亡,家财被吞没,我和妹妹流落街头。 我只好...
    问心浅笑阅读 390评论 12 11
  • 裴晨旭,现年33岁,2008年毕业于郑州大学升达经贸学院财务管理专业,同年到我院财务科参加工作,第二年调至...
    平_fe98阅读 1,225评论 12 8