虽然 Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一接口创建很多对象,会产生大量的重复代码。为解决这个问题,人们开始使用工厂模式的一种变体。
1.工厂模式
工厂模式是软件工程领域常见的设计模式,这种模式抽象了创建具体对象的过程。在 ECMAScript 中,是用函数来封装以特定接口创建对象的细节,如下面的例子所示:
1 | function createPerson (name, age, job) { |
函数 createPerson()
能够根据接受的参数来构建一个包含所有必要信息的 Person 对象。可以无数次地调用这个函数,而每次它都会返回一个包含三个属性一个方法的对象。工厂模式虽然解决了创建多个相似对象的问题,但没有解决对象识别的问题(即怎样知道一个对象的类型)。
2.构造函数模式
ECMAScript 中的构造函数可用来创建特定类型的对象。像 Object 和 Array 这样的原生构造函数,在运行时会自动出现在执行环境中。此外,也可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例如,可以使用构造函数模式将前面的例子重写如下:
1 | function Person (name, age, job) { |
在这个例子中,Person()
函数取代了 createPerson()
函数。Person()
中的代码除了与 createPerson()
中相同的部分外,还存在以下不同之处:
- 没有显式地创建对象;
- 直接将属性和方法赋给了 this 对象;
- 没有 return 语句。
要创建 Person 的新实例,必须使用 new
操作符。以这种方式调用构造函数实际上会经历以下 4 个步骤:
- 创建一个新对象;
- 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
- 执行构造函数中的代码(为这个新对象添加属性);
- 返回新对象。
在前面例子的最后,person1
和 person2
分别保存着 Person 的一个不同的实例。这两个对象都有一个 constructor
(构造函数)属性,该属性指向 Person,如下所示:
1 | alert(person1.constructor == Person); // true |
对象的 constructor
属性最初是用来标识对象类型的。但是,检测对象类型还是 instanceof
操作符更可靠。在这个例子中所创建的所有对象既是 Object 的实例,同时也是 Person 的实例,这一点通过 instanceof
操作符可以得到验证。
1 | alert(person1 instanceof Object); // true |
创建自定义的构造函数意味着将来可以将它的实例标识为一种特定的类型;而这正是构造函数模式胜过工厂模式的地方。在这个例子中,person1
和 person2
之所以同时是 Object 的实例,是因为所有对象均继承自 Object。
以这种方式定义的构造函数是定义在 Global 对象(浏览器中是 window 对象)中的。
2.1 将构造函数当作函数
构造函数与其他函数的唯一区别,就在于调用它们的方式不同。不过,构造函数也是函数,不存在定义构造函数的特殊语法。任何函数,只要通过 new
操作符来调用,那它就可以作为构造函数;而任何函数,如果不通过 new
操作符来调用,那它跟普通函数不会有什么两样。例如,前面例子中定义的 Person()
函数可以通过下列任何一种方式来调用。
1 | // 当作构造函数使用 |
2.2 构造函数的问题
构造函数模式虽然好用,但也并非没有缺点。使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。在前面的例子中,person1
和 person2
都有一个名为 sayName()
的方法,但那两个方法不是同一个 Function 的实例。ES 中的函数是对象,因此每定义一个函数,就是实例化了一个对象。从逻辑上看,此时的构造函数也可以这样定义:
1 | function Person(name, age, job) { |
从这个角度上来看构造函数,更容易明白每个 Person 实例都包含一个不同的 Function 实例的本质。以这种方式创建函数,会导致不同的作用域链和标识符解析,但创建 Function 新实例的机制仍然是相同的。因此,不同实例上的同名函数是不相等的,以下代码可以证明这一点。
1 | alert(person1.sayName == person2.name); // false |
然而,创建两个完全同样任务的 Function 实例的确没有必要;况且有 this 对象在,根本不用在执行代码前就把函数绑定到特定对象上面。因此,可以像下面这样,通过把函数定义转移到构造函数外部来解决这个问题。
1 | function Person (name, age, job) { |
在这个例子中,sayName()
函数的定义转移到了构造函数外部。而在构造函数内部,将 sayName
属性设置成等于全局的 sayName
函数。这样,由于 sayName
包含的是一个指向函数的指针,因此 person1
和 person2
对象就共享了在全局作用域中定义的同一个 sayName()
函数。这样做解决了两个函数做同一件事的问题,但新的问题是:在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实。而且,如果对象需要定义多个方法,那么就需要定义多个全局函数,这个自定义的引用类型也就没有封装性可言了。这些问题可以通过使用原型模式来解决。
3.原型模式
我们创建的每个函数都有一个 prototype
(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思理解,那么 prototype
就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中,如下面的例子所示:
1 | function Person () { |
此例将 sayName()
方法和所有属性直接添加到了 Person 的 prototype
属性中,构造函数变成了空函数。即使如此,也让然可以通过调用构造函数来创建新对象,而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。换句话说,person1
和 person2
访问的都是同一组属性和同一个 sayName()
函数。要理解原型模式的工作原理,必须先理解 ECMAScript 中原型对象的性质。
3.1 理解原型对象
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个 prototype
属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个 constructor
(构造函数)属性,这个属性包含一个指向 prototype
属性所在函数的指针。如前面的例子,Person.prototype.constructor
指向 Person
。而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。
创建了自定义的构造函数之后,其原型对象默认只会取得 constructor
属性;至于其他方法,则都是从 Object 继承而来。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象。ECMA-262 第 5 版中管这个指针叫 [[Prototype]]
。虽然在脚本中没有标准的方式访问 [[Prototype]]
,但 Firefox、Safari 和 Chrome 在每个对象上都支持一个属性 __proto__
;而在其他实现中,这个属性对脚本则是完全不可见的。不过,要明确一点:这个连接存在于实例与构造函数的原型对象之间,而不是存在于实例与构造函数之间。
以 Person 构造函数和 Person.prototype 创建实例的代码为例,下图展示了各个对象之间的关系。
在此,Person.prototype
指向了原型对象,而 Person.prototype.constructor
又指回了 Person。原型对象中除了包含 constructor
属性之外,还包括后来添加的其他属性。Person 的每个实例 —— person1
和 person2
都包含一个内部属性,该属性仅仅指向了 Person.prototype
;换句话说,它们与构造函数没有直接的关系。此外,要注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用 person1.sayName()
。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到 [[Prototype]]
,但可以通过 isPrototypeOf()
方法来确定对象之间是否存在这种关系。从本质上讲,如果 [[Prototype]]
指向调用 isPrototypeOf()
方法的对象(Person.prototype
),那么这个方法就返回 true,如下所示:
1 | alert(Object.getPrototypeOf(person1) == Person.prototype); // true |
使用 Object.getPrototypeOf()
可以方便地取得一个对象的原型,而这在利用原型实现继承的情况下是非常重要的。支持这个方法的浏览器有 IE9+、Firefox 3.5+、Safari 5+、Opera 12+ 和 Chrome。
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。
原型最初只包含 constructor 属性,而该属性也是共享的,因此可以通过对象实例访问。
虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在该实例中创建该属性,该属性将会屏蔽原型中的那个属性。
1 | function Person (){ |
在这个例子中,person1
的 name
被一个新值给屏蔽了。但无论访问 person1.name
还是访问 person2.name
都能正常地返回值。
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;换句话说,添加这个属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为 null
,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用 delete
操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性,如下所示:
1 | function Person () { |
在这个修改后的例子中,我们使用 delete
操作符删除了 person1.name
,之前它保存的 "Greg"
值屏蔽了同名的原型属性。把它删除后,就恢复了对原型中 name
属性的连接。因此,接下来再调用 perons1.name
时,返回的就是原型中 name
属性的值了。
使用 hasOwnProperty()
方法可以检测一个属性是存在于实例中,还是存在于原型中。这个方法(继承自 Object)只在给定属性存在于对象实例中时,才会返回 true。
1 | function Person () { |
通过 hasOwnProperty()
方法可以清楚的知道什么时候访问的是实例属性,什么时候访问的是原型属性。
ES5 的 Object.getOwnPropertyDescriptor() 方法只能用于实例属性,要取得原型属性的描述符,必须直接在原型对象上调用 Object.getOwnPropertyDescriptor() 方法。
3.2 原型与 in 操作符
有两种方式使用 in
操作符:单独使用和在 for-in 循环中使用。在单独使用时,in
操作符会在通过对象能够访问给定属性时返回 true,无论该属性存在于实例中还是原型中。
1 | function Person () { |
以上代码执行的整个过程中,name
属性要么是直接在对象上访问到的,要么是通过原型访问到的。因此,调用 "name" in person1
始终都返回 true,无论该属性存在于实例中还是存在于原型中。同时使用 hasOwnProperty()
方法和 in
操作符,就可以确定该属性到底是存在于对象中,还是存在于原型中,如下所示:
1 | function hasPrototypeProperty (object, name) { |
由于 in
操作符只要通过对象能够访问属性就返回 true,hasOwnProperty()
只在属性存在于实例中时才返回 true,因此只要 in
操作符返回 true,而hasOwnProperty()
返回 fasle,就可以确定属性在原型中的属性。
在使用 for-in 循环时,返回的是所有能够通过对象访问的、可枚举的(enumerated)属性,其中即包括存在于实例中的属性,也包括存在于原型中的属性。屏蔽了原型中不可枚举属性的实例也会在 for-in 循环中返回,因为根据规定,所有开发人员定义的属性都是可枚举的 —— IE8 及更早版本例外。
IE 早期版本的实现中存在一个 bug,即屏蔽不可枚举属性的实例属性不会出现在 for-in 循环中。例如:
1 | var o = { |
这里对象 o
定义了一个名为 toString()
的方法,该方法屏蔽了原型中(不可枚举)的 toString()
方法。在 IE 中,由于其实现认为原型的 toString()
方法被打上了值为 false 的 [[Enumerable]]
标记,因此应该跳过该属性,结果我们就不会看到警告框。该 bug 会影响默认不可枚举的所有属性和方法,包括:hasOwnProperty()
、propertyIsEnumerable()
、toLocaleString()
、toString()
和 valueOf()
。ES 5 也将 constructor
和 prototype
属性的 [[Enumerable]]
特性设置为 false,但并不是所有浏览器都照此实现。
要取得对象上所有可枚举的实例属性,可以使用 ES 5 的 Object.keys()
方法。这个方法接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。例如:
1 | function Person () { |
这里,变量 keys
中将保存一个数组,数组中是字符串 "name"
、"age"
、"job"
和 "sayName"
。这个顺序也是它们在 for-in 循环中出现的顺序。如果是通过 Person 的实例调用,则 Object.keys()
返回的数组只包含 "name"
和 "age"
这两个实例属性。
如果想要得到所有的实例属性,而无论它是否可枚举,可以使用 Object.getOwnPropertyNames()
方法。
1 | var keys = Object.getOwnPropertyNames(Person.prototype); |
注意结果中包含了不可枚举的 constructor
属性。Object.keys()
和 Object.getOwnPropertyNames()
方法都可以用来替代 for-in 循环。支持这两个方法的浏览器 IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。
3.3 更简单的原型语法
前面的例子中,每添加一个属性和方法就要输入一遍 Person.prototype
。为减少不必要的输入,也为了更好地封装原型,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象,如下面的例子所示:
1 | function Person () { |
上面的代码中,我们将 Person.prototype
设置为等于一个以对象字面量形式创建的新对象。最终结果相同,但有一个例外:constructor
属性不再指向 Person 了。前面介绍过,每创建一个函数,就会同时创建它的 prototype
对象,这个对象也会自动获得 constructor
属性。而我们在这里使用的语法,本质上完全重写了默认的 prototype
对象,因此 constructor
属性也就变成了新对象的 constructor
属性(指向 Object 构造函数),不再指向 Person 函数。此时,尽管 instanceof
操作符还能返回正确的结果,但通过 constructor
已经无法确定对象的类型了,如下所示。
1 | var friend = new Person(); |
如果 constructor
的值真的很重要,可以像下面这样特意将它设置回适当的值。
1 | function Person () { |
以上代码特意包含了一个 contructor
属性,并将它的值设置为 Person
,从而确保了通过该属性能够访问到适当的值。
注意,以这种方式重设 constructor
属性会导致它的 [[Enumerable]]
特性被设置为 true。默认情况下,原生的 constructor
属性是不可枚举的,因此如果你使用兼容 ES5 的 JavaScript 引擎,可以试一试 Object.defineProperty()
。
1 | function Person () { |
3.4 原型的动态性
由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来 —— 即使是先创建了实例后修改原型也是如此。
1 | var frined = new Person(); |
尽管可以随时为原型添加属性和方法,并且修改能够立即在所有对象实例中反映出来,但如果是重写整个原型对象,那么情况就不一样了。因为调用构造函数时会为实例添加一个指向最初原型的 [[Prototype]]
指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。注意:实例中的指针仅指向原型,而不指向构造函数。
1 | function Person () { |
这个例子中,先创建了 Person 的实例,然后重写了其原型对象。然后在调用 friend.sayName()
时发生了错误,因为 friend
指向的原型中不包含以该名字命名的属性。
3.5 原生对象的原型
原型模式的重要性不仅体现在创建自定义类型方面,事实上所有原生的引用类型,都是采用这种模式创建的。所有原生引用类型(Obejct、Array、String,等等)都在其构造函数的原型上定义了方法。例如,在 Array.prototype
中可以找到 sort()
方法,而在 String.prototype
中可以找到 substring()
方法,如下所示:
1 | alert(typeof Array.prototype.sort); // "function" |
通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型,因此可以随时添加方法。下面的代码给基本包装类型 String 添加了一个名为 startsWith()
的方法。
1 | String.prototype.startsWith = function (text) { |
这里新定义的 startsWith()
方法会在传入的文本位于一个字符串开始时返回 true。既然方法被添加给了 String.prototype
,那么当前环境中所有字符串都可以调用它。由于 msg
是字符串,而且后台会调用 String
基本包装函数创建这个字符串,因此通过 msg
就可以调用 startsWith()
方法。
3.6 原型对象的问题
原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但这还不是原型的最大问题。原型模式最大问题是由其共享的本性所导致的。
原型中的所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去,毕竟,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。
1 | function Person () { |
在此,Person.prototype
对象有一个名为 friends
的属性,该属性包含一个字符串数组。然后, 创建了 Person 的两个实例。接着,修改了 person1.friends
引用的数组,向数组中添加了一个字符串。由于 friends
数组存在于 Person.prototype
而非 person1
中,所以刚刚提到的修改也会通过 person2.friends
(与 person1.friends
指向同一个数组)反映出来。假如我们的初衷就是像这样在所有实例中共享一个数组,那么对这个结果我没有话可说。可是,实例一般都是要有属于自己的全部属性的。而这个问题正是我们很少看到有人单独使用原型模式的原因所在。
4.组合使用构造函数模式和原型模式
创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性和副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。下面的代码重写了前面的例子。
1 | function Person (name, age, job) { |
在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性 constructor
和方法 sayName()
则是在原型中定义的。而修改了person1.friends
(向其中添加一个新字符串),并不会影响到 person2.friends
,因为它们分别引用了不同的数组。
5.动态原型模式
这种模式将所有信息都封装在构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),又保持了同时使用构造函数和原型的优点。换句话说,可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。
1 | function Person (name, age, job) { |
上例中只有在 sayName()
方法不存在的情况下,才会将他添加到原型中。这段代码中只会在初次调用构造函数时才会执行。此后,原型已经完成初始化,不需要再做什么修改了。
6.寄生构造函数模式
通常,在上述几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。下面是一个例子。
1 | function Person (name, age, job) { |
在这个例子中,Person 函数创建了一个新对象,并以相应的属性和方法初始化该对象,然后又返回了这个对象。除了使用 new
操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。构造函数在不返回值的情况下,默认会返回新对象实例。而通过在构造函数的末尾添加一个 return
语句,可以重写调用构造函数时返回的值。
这个模式可以在特殊的情况下用来为对象创建构造函数。假设我们想创建一个具有额外方法的特殊数组。由于不能直接修改 Array 构造函数,因此可以使用这个模式。
1 | function SpecialArray () { |
这个例子中,我们创建了一个名叫 SpecialArray
的构造函数。在这个函数内部,首先创建了一个数组,然后 push()
方法初始化了数组的值。最后,将数组以函数值的形式返回。接着,我们调用了 SpecialArrry
构造函数,向其中传入了用于初始化数组的值,此后又调用了 toPipedString()
方法。
关于寄生构造函数模式,需注意的是,返回的对象与构造函数或者与构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此,不能依赖 instanceof
操作符来确定对象类型。
7.稳妥构造函数模式
所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this
的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用 this
与 new
),或者在防止数据被其他应用程序改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用 this
;二是不使用 new
操作符调用构造函数。按照稳妥构造函数的要求,可以将前面的 Person
构造函数重写如下:
1 | function Person (name, age, job) { |
注意,在以这种模式创建的对象中,除了使用 sayName()
方法之外,没有其他方法访问 name
的值。可以像下面使用稳妥的 Person
构造函数。
1 | var frined = Person("Nicholas", 27, "Software Engineer"); |
这样,变量 friend
中保存的是一个稳妥对象,而除了调用 sayName()
方法外,没有别的方式可以访问其数据成员。稳妥构造函数提供的这种安全性,使它非常适合在某些安全执行环境。
与寄生构造函数模式类似,使用稳妥构造函数模式创建的对象与构造函数之间也 没有什么关系,因此 instanceof
操作符对这种对象也没有意义。