深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现(深入理解计算机系统)

编辑：rootadmin

推荐整理分享深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现(深入理解计算机系统)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:深入理解ffmpeg pdf,深入理解javascript特性,深入理解javascript特性,深入理解计算机系统,深入理解javascript特性.pdf,深入理解新发展理念,推进供给侧结构性改革,深入理解javascript,深入理解javascript,内容如对您有帮助，希望把文章链接给更多的朋友！

介绍

本章是关于ECMAScript面向对象实现的第2篇，第1篇我们讨论的是概论和CEMAScript的比较，如果你还没有读第1篇，在进行本章之前，我强烈建议你先读一下第1篇，因为本篇实在太长了（页）。

英文原文： values）和对象（objects）来区分实体，因此有些文章里说的“在JavaScript里，一切都是对象”是错误的（不完全对），原始值就是我们这里要讨论的一些数据类型。

数据类型

虽然ECMAScript是可以动态转化类型的动态弱类型语言，它还是有数据类型的。也就是说，一个对象要属于一个实实在在的类型。标准规范里定义了9种数据类型，但只有6种是在ECMAScript程序里可以直接访问的,它们是：Undefined、Null、Boolean、String、Number、Object。

另外3种类型只能在实现级别访问（ECMAScript对象是不能使用这些类型的）并用于规范来解释一些操作行为、保存中间值。这3种类型是：Reference、List和Completion。

因此，Reference是用来解释delete、typeof、this这样的操作符，并且包含一个基对象和一个属性名称；List描述的是参数列表的行为（在new表达式和函数调用的时候）；Completion是用来解释行为break、continue、return和throw语句的。

原始值类型回头来看6中用于ECMAScript程序的数据类型，前5种是原始值类型，包括Undefined、Null、Boolean、String、Number、Object。原始值类型例子：

这些值是在底层上直接实现的，他们不是object，所以没有原型，没有构造函数。

大叔注：这些原生值和我们平时用的(Boolean、String、Number、Object)虽然名字上相似，但不是同一个东西。所以typeof(true)和typeof(Boolean)结果是不一样的，因为typeof(Boolean)的结果是function，所以函数Boolean、String、Number是有原型的（下面的读写属性章节也会提到）。

想知道数据是哪种类型用typeof是最好不过了，有个例子需要注意一下，如果用typeof来判断null的类型，结果是object，为什么呢？因为null的类型是定义为Null的。显示"object"原因是因为规范就是这么规定的：对于Null值的typeof字符串值返回"object“。

规范没有想象解释这个，但是Brendan Eich (JavaScript发明人)注意到null相对于undefined大多数都是用于对象出现的地方，例如设置一个对象为空引用。但是有些文档里有些气人将之归结为bug，而且将该bug放在Brendan Eich也参与讨论的bug列表里，结果就是任其自然，还是把typeof null的结果设置为object（尽管-3的标准是定义null的类型是Null，-5已经将标准修改为null的类型是object了）。

Object类型

接着，Object类型（不要和Object构造函数混淆了，现在只讨论抽象类型）是描述 ECMAScript对象的唯一一个数据类型。

Object is an unordered collection of key-value pairs.对象是一个包含key-value对的无序集合

对象的key值被称为属性，属性是原始值和其他对象的容器。如果属性的值是函数我们称它为方法。

例如：

动态性

正如我们在第章中指出的，ES中的对象是完全动态的。这意味着，在程序执行的时候我们可以任意地添加，修改或删除对象的属性。

例如：

有些属性不能被修改——（只读属性、已删除属性或不可配置的属性）。我们将稍后在属性特性里讲解。

另外，ES5规范规定，静态对象不能扩展新的属性，并且它的属性页不能删除或者修改。他们是所谓的冻结对象，可以通过应用Object.freeze(o)方法得到。

在ES5规范里，也使用Object.preventExtensions(o)方法防止扩展，或者使用Object.defineProperty(o)方法来定义属性：

内置对象、原生对象及宿主对象

有必要需要注意的是规范还区分了这内置对象、元素对象和宿主对象。

内置对象和元素对象是被ECMAScript规范定义和实现的，两者之间的差异微不足道。所有ECMAScript实现的对象都是原生对象（其中一些是内置对象、一些在程序执行的时候创建，例如用户自定义对象）。内置对象是原生对象的一个子集、是在程序开始之前内置到ECMAScript里的（例如，parseInt, Match等）。所有的宿主对象是由宿主环境提供的，通常是浏览器，并可能包括如window、alert等。

注意，宿主对象可能是ES自身实现的，完全符合规范的语义。从这点来说，他们能称为“原生宿主”对象（尽快很理论），不过规范没有定义“原生宿主”对象的概念。

Boolean，String和Number对象

另外，规范也定义了一些原生的特殊包装类，这些对象是：

1.布尔对象2.字符串对象3.数字对象

这些对象的创建，是通过相应的内置构造器创建，并且包含原生值作为其内部属性，这些对象可以转换省原始值，反之亦然。

此外，也有对象是由特殊的内置构造函数创建： Function（函数对象构造器）、Array（数组构造器） RegExp（正则表达式构造器）、Math（数学模块）、 Date（日期的构造器）等等，这些对象也是Object对象类型的值，他们彼此的区别是由内部属性管理的，我们在下面讨论这些内容。

字面量Literal

对于三个对象的值：对象（object）,数组（array）和正则表达式（regular expression），他们分别有简写的标示符称为：对象初始化器、数组初始化器、和正则表达式初始化器：

注意，如果上述三个对象进行重新赋值名称到新的类型上的话，那随后的实现语义就是按照新赋值的类型来使用，例如在当前的Rhino和老版本SpiderMonkey 1.7的实现上，会成功以new关键字的构造器来创建对象，但有些实现（当前Spider/TraceMonkey）字面量的语义在类型改变以后却不一定改变。

正则表达式字面量和RegExp对象

注意，下面2个例子在第三版的规范里，正则表达式的语义都是等价的，regexp字面量只在一句里存在，并且再解析阶段创建，但RegExp构造器创建的却是新对象，所以这可能会导致出一些问题，如lastIndex的值在测试的时候结果是错误的：注：不过这些问题在第5版的ES规范都已经修正了，不管是基于字面量的还是构造器的，正则都是创建新对象。

关联数组

各种文字静态讨论，JavaScript对象（经常是用对象初始化器{}来创建）被称为哈希表哈希表或其它简单的称谓：哈希（Ruby或Perl里的概念），管理数组（PHP里的概念），词典（Python里的概念）等。

只有这样的术语，主要是因为他们的结构都是相似的，就是使用“键-值”对来存储对象，完全符合“关联数组 ”或“哈希表 ”理论定义的数据结构。此外，哈希表抽象数据类型通常是在实现层面使用。

但是，尽管术语上来描述这个概念，但实际上这个是错误，从ECMAScript来看：ECMAScript只有一个对象以及类型以及它的子类型，这和“键-值”对存储没有什么区别，因此在这上面没有特别的概念。因为任何对象的内部属性都可以存储为键-值”对：

此外，由于在ECMAScript中对象可以是空的，所以"hash"的概念在这里也是不正确的：

请注意， ES5标准可以让我们创建没原型的对象（使用Object.create(null)方法实现）对，从这个角度来说，这样的对象可以称之为哈希表：此外，一些属性有特定的getter / setter方法&#;&#;，所以也可能导致混淆这个概念：

然而，即使认为“哈希”可能有一个“原型”（例如，在Ruby或Python里委托哈希对象的类），在ECMAScript里，这个术语也是不对的，因为2个表示法之间没有语义上的区别（即用点表示法a.b和a["b"]表示法）。

在ECMAScript中的“property属性”的概念语义上和"key"、数组索引、方法没有分开的，这里所有对象的属性读写都要遵循统一的规则：检查原型链。

在下面Ruby的例子中，我们可以看到语义上的区别：ECMA--3标准并没有定义“哈希”（以及类似）的概念。但是，有这样的结构理论的话，那可能以此命名的对象。

对象转换

将对象转化成原始值可以用valueOf方法，正如我们所说的，当函数的构造函数调用做为function（对于某些类型的），但如果不用new关键字就是将对象转化成原始值，就相当于隐式的valueOf方法调用：这种方式允许对象参与各种操作，例如：

valueOf的默认值会根据根据对象的类型改变（如果不被覆盖的话），对某些对象，他返回的是this——例如：Object.prototype.valueOf()，还有计算型的值：Date.prototype.valueOf()返回的是日期时间：此外,对象还有一个更原始的代表性——字符串展示。这个toString方法是可靠的，它在某些操作上是自动使用的：

Object.prototype上定义的toString方法具有特殊意义，它返回的我们下面将要讨论的内部[[Class]]属性值。

和转化成原始值（ToPrimitive）相比，将值转化成对象类型也有一个转化规范（ToObject）。

一个显式方法是使用内置的Object构造函数作为function来调用ToObject（有些类似通过new关键字也可以）：

关于调用内置构造函数，使用还是不适用new操作符没有通用规则，取决于构造函数。例如Array或Function当使用new操作符的构造函数或者不使用new操作符的简单函数使用产生相同的结果的：有些操作符使用的时候，也有一些显示和隐式转化：

属性的特性

所有的属性（property）都可以有很多特性（attributes）。

1.{ReadOnly}——忽略向属性赋值的写操作尝，但只读属性可以由宿主环境行为改变——也就是说不是“恒定值” ;2.{DontEnum}——属性不能被for..in循环枚举3.{DontDelete}——糊了delete操作符的行为被忽略（即删不掉）;4.{Internal}——内部属性，没有名字（仅在实现层面使用），ECMAScript里无法访问这样的属性。

注意，在ES5里{ReadOnly}，{DontEnum}和{DontDelete}被重新命名为[[Writable]]，[[Enumerable]]和[[Configurable]]，可以手工通过Object.defineProperty或类似的方法来管理这些属性。

内部属性和方法

对象也可以有内部属性（实现层面的一部分），并且ECMAScript程序无法直接访问（但是下面我们将看到，一些实现允许访问一些这样的属性）。这些属性通过嵌套的中括号[[ ]]进行访问。我们来看其中的一些，这些属性的描述可以到规范里查阅到。

每个对象都应该实现如下内部属性和方法：

1.[[Prototype]]——对象的原型（将在下面详细介绍）2.[[Class]]——字符串对象的一种表示（例如，Object Array ，Function Object，Function等）;用来区分对象3.[[Get]]——获得属性值的方法4.[[Put]]——设置属性值的方法5.[[CanPut]]——检查属性是否可写6.[[HasProperty]]——检查对象是否已经拥有该属性7.[[Delete]]——从对象删除该属性8.[[DefaultValue]]返回对象对于的原始值（调用valueOf方法，某些对象可能会抛出TypeError异常）。通过Object.prototype.toString()方法可以间接得到内部属性[[Class]]的值，该方法应该返回下列字符串： "[object " + [[Class]] + "]" 。例如：这个功能通常是用来检查对象用的，但规范上说宿主对象的[[Class]]可以为任意值，包括内置对象的[[Class]]属性的值，所以理论上来看是不能%来保证准确的。例如，document.childNodes.item(...)方法的[[Class]]属性，在IE里返回"String"，但其它实现里返回的确实"Function"。

构造函数

因此，正如我们上面提到的，在ECMAScript中的对象是通过所谓的构造函数来创建的。

Constructor is a function that creates and initializes the newly created object.构造函数是一个函数，用来创建并初始化新创建的对象。对象创建（内存分配）是由构造函数的内部方法[[Construct]]负责的。该内部方法的行为是定义好的，所有的构造函数都是使用该方法来为新对象分配内存的。

而初始化是通过新建对象上下上调用该函数来管理的，这是由构造函数的内部方法[[Call]]来负责任的。

注意，用户代码只能在初始化阶段访问，虽然在初始化阶段我们可以返回不同的对象（忽略第一阶段创建的tihs对象）：

引用章函数——创建函数的算法小节，我们可以看到该函数是一个原生对象，包含[[Construct]] ]和[[Call]] ]属性以及显示的prototype原型属性——未来对象的原型（注：NativeObject是对于native object原生对象的约定，在下面的伪代码中使用）。

[[Call]] ]是除[[Class]]属性（这里等同于"Function" ）之外区分对象的主要方式，因此，对象的内部[[Call]]属性作为函数调用。这样的对象用typeof运算操作符的话返回的是"function"。然而它主要是和原生对象有关，有些情况的实现在用typeof获取值的是不一样的，例如：window.alert (...)在IE中的效果：

内部方法[[Construct]]是通过使用带new运算符的构造函数来激活的，正如我们所说的这个方法是负责内存分配和对象创建的。如果没有参数，调用构造函数的括号也可以省略：我们也知道，构造函数（初始化阶段）里的shis被设置为新创建的对象。

深入理解JavaScript系列（18）：面向对象编程之ECMAScript实现(深入理解计算机系统)

让我们研究一下对象创建的算法。

对象创建的算法

内部方法[[Construct]] 的行为可以描述成如下：

请注意两个主要特点：

1.首先，新创建对象的原型是从当前时刻函数的prototype属性获取的（这意味着同一个构造函数创建的两个创建对象的原型可以不同是因为函数的prototype属性也可以不同）。2.其次，正如我们上面提到的，如果在对象初始化的时候，[[Call]]返回的是对象，这恰恰是用于整个new操作符的结果：让我们来详细了解一下原型

原型

每个对象都有一个原型（一些系统对象除外）。原型通信是通过内部的、隐式的、不可直接访问[[Prototype]]原型属性来进行的，原型可以是一个对象，也可以是null值。

属性构造函数(Property constructor)

上面的例子有有2个重要的知识点，第一个是关于函数的constructor属性的prototype属性，在函数创建的算法里，我们知道constructor属性在函数创建阶段被设置为函数的prototype属性，constructor属性的值是函数自身的重要引用：

通常在这种情况下，存在着一个误区：constructor构造属性作为新创建对象自身的属性是错误的，但是，正如我们所看到的的，这个属性属于原型并且通过继承来访问对象。

通过继承constructor属性的实例，可以间接得到的原型对象的引用：

但请注意，函数的constructor和prototype属性在对象创建以后都可以重新定义的。在这种情况下，对象失去上面所说的机制。如果通过函数的prototype属性去编辑元素的prototype原型的话（添加新对象或修改现有对象），实例上将看到新添加的属性。

然而，如果我们彻底改变函数的prototype属性（通过分配一个新的对象），那原始构造函数的引用就是丢失，这是因为我们创建的对象不包括constructor属性：因此，对函数的原型引用需要手工恢复：

注意虽然手动恢复了constructor属性，和原来丢失的原型相比，{DontEnum}特性没有了，也就是说A.prototype里的for..in循环语句不支持了，不过第5版规范里，通过[[Enumerable]] 特性提供了控制可枚举状态enumerable的能力。

显式prototype和隐式[[Prototype]]属性

通常，一个对象的原型通过函数的prototype属性显式引用是不正确的，他引用的是同一个对象，对象的[[Prototype]]属性：

a.[[Prototype]] ----> Prototype <---- A.prototype

此外，实例的[[Prototype]]值确实是在构造函数的prototype属性上获取的。

然而，提交prototype属性不会影响已经创建对象的原型（只有在构造函数的prototype属性改变的时候才会影响到)，就是说新创建的对象才有有新的原型，而已创建对象还是引用到原来的旧原型（这个原型已经不能被再被修改了）。

例如：因此，有的文章说“动态修改原型将影响所有的对象都会拥有新的原型”是错误的，新原型仅仅在原型修改以后的新创建对象上生效。

这里的主要规则是：对象的原型是对象的创建的时候创建的，并且在此之后不能修改为新的对象，如果依然引用到同一个对象，可以通过构造函数的显式prototype引用，对象创建以后，只能对原型的属性进行添加或修改。

非标准的__proto__属性

然而，有些实现（例如SpiderMonkey），提供了不标准的__proto__显式属性来引用对象的原型：注意，ES5提供了Object.getPrototypeOf(O)方法，该方法直接返回对象的[[Prototype]]属性——实例的初始原型。然而，和__proto__相比，它只是getter，它不允许set值。

对象独立于构造函数因为实例的原型独立于构造函数和构造函数的prototype属性，构造函数完成了自己的主要工作（创建对象）以后可以删除。原型对象通过引用[[Prototype]]属性继续存在：

instanceof操作符的特性我们是通过构造函数的prototype属性来显示引用原型的，这和instanceof操作符有关。该操作符是和原型链一起工作的，而不是构造函数，考虑到这一点，当检测对象的时候往往会有误解：这不是用来检测对象foo是否是用Foo构造函数创建的，所有instanceof运算符只需要一个对象属性——foo.[[Prototype]]，在原型链中从Foo.prototype开始检查其是否存在。instanceof运算符是通过构造函数里的内部方法[[HasInstance]]来激活的。

让我们来看看这个例子：

另一方面，可以由构造函数来创建对象，但如果对象的[[Prototype]]属性和构造函数的prototype属性的值设置的是一样的话，instanceof检查的时候会返回true：

原型可以存放方法并共享属性大部分程序里使用原型是用来存储对象的方法、默认状态和共享对象的属性。

事实上，对象可以拥有自己的状态，但方法通常是一样的。因此，为了内存优化，方法通常是在原型里定义的。这意味着，这个构造函数创建的所有实例都可以共享找个方法。

读写属性

正如我们提到，读取和写入属性值是通过内部的[[Get]]和[[Put]]方法。这些内部方法是通过属性访问器激活的：点标记法或者索引标记法：让我们用伪代码来看一下这些方法是如何工作的：

[[Get]]方法

[[Get]]也会从原型链中查询属性，所以通过对象也可以访问原型中的属性。

O.[[Get]](P):请注意，因为[[Get]]在如下情况也会返回undefined：这里，在window里没有找到someObject属性，然后会在原型里找，原型的原型里找，以此类推，如果都找不到，按照定义就返回undefined。

注意：in操作符也可以负责查找属性（也会查找原型链）：这有助于避免一些特殊问题：比如即便someObject存在，在someObject等于false的时候，第一轮检测就通不过。

[[Put]]方法

[[Put]]方法可以创建、更新对象自身的属性，并且掩盖原型里的同名属性。

O.[[Put]](P, V):例如：但在ES5的严格模式下，如果掩盖只读属性的话，会保存TypeError错误。

属性访问器

内部方法[[Get]]和[[Put]]在ECMAScript里是通过点符号或者索引法来激活的，如果属性标示符是合法的名字的话，可以通过“.”来访问，而索引方运行动态定义名称。

这里有一个非常重要的特性——属性访问器总是使用ToObject规范来对待“.”左边的值。这种隐式转化和这句“在JavaScript中一切都是对象”有关系，（然而，当我们已经知道了，JavaScript里不是所有的值都是对象）。

如果对原始值进行属性访问器取值，访问之前会先对原始值进行对象包装（包括原始值），然后通过包装的对象进行访问属性，属性访问以后，包装对象就会被删除。

例如：那么，为什么整个例子里的原始值可以访问toString方法，而不能访问新创建的test属性呢？

答案很简单：

首先，正如我们所说，使用属性访问器以后，它已经不是原始值了，而是一个包装过的中间对象（整个例子是使用new Number(a)），而toString方法这时候是通过原型链查找到的：接下来，[[Put]]方法创建新属性时候，也是通过包装装的对象进行的：

我们看到，在第3步的时候，包装的对象以及删除了，随着新创建的属性页被删除了——删除包装对象本身。

然后使用[[Get]]获取test值的时候，再一次创建了包装对象，但这时候包装的对象已经没有test属性了，所以返回的是undefined：这种方式解释了原始值的读取方式，另外，任何原始值如果经常用在访问属性的话，时间效率考虑，都是直接用一个对象替代它；与此相反，如果不经常访问，或者只是用于计算的话，到可以保留这种形式。

继承

我们知道，ECMAScript是使用基于原型的委托式继承。链和原型在原型链里已经提到过了。其实，所有委托的实现和原型链的查找分析都浓缩到[[Get]]方法了。

如果你完全理解[[Get]]方法，那JavaScript中的继承这个问题将不解自答了。

经常在论坛上谈论JavaScript中的继承时，我都是用一行代码来展示，事实上，我们不需要创建任何对象或函数，因为该语言已经是基于继承的了，代码如下：我们已经知道了[[Get]]方法和属性访问器的原理了，我们来看看都发生了什么：

1.首先，从原始值1，通过new Number(1)创建包装对象2.然后toString方法是从这个包装对象上继承得到的

为什么是继承的？因为在ECMAScript中的对象可以有自己的属性，包装对象在这种情况下没有toString方法。因此它是从原理里继承的，即Number.prototype。

注意有个微妙的地方，在上面的例子中的两个点不是一个错误。第一点是代表小数部分，第二个才是一个属性访问器：

原型链

让我们展示如何为用户定义对象创建原型链，非常简单：

这种方法有两个特性：

首先，B.prototype将包含x属性。乍一看这可能不对，你可能会想x属性是在A里定义的并且B构造函数也是这样期望的。尽管原型继承正常情况是没问题的，但B构造函数有时候可能不需要x属性，与基于class的继承相比，所有的属性都复制到后代子类里了。

尽管如此，如果有需要（模拟基于类的继承）将x属性赋给B构造函数创建的对象上，有一些方法，我们后来来展示其中一种方式。