javascript设计模式介绍（三） 原型模式 扩展知识

原型与 in 操作符

有两种方式使用 in 操作符：单独使用和在for-in 循环中使用。在单独使用时，in 操作符会在通过对象能够访问给定属性时返回 true，无论该属性存在于实例中还是原型中。看一看下面的例子。

function Person(){}Person.prototype.name= "Nicholas";Person.prototype.age= 29;Person.prototype.job= "Software Engineer";Person.prototype.sayName= function(){  alert(this.name);};var person1 = new Person();var person2 = new Person(); alert(person1.hasOwnProperty("name"));//falsealert("name"in person1); //true person1.name= "Greg";alert(person1.name);//"Greg"——来自实例alert(person1.hasOwnProperty("name"));//truealert("name"in person1); //true alert(person2.name);//"Nicholas"——来自原型alert(person2.hasOwnProperty("name"));//falsealert("name"in person2); //true delete person1.name;alert(person1.name);//"Nicholas"——来自原型alert(person1.hasOwnProperty("name"));//falsealert("name"in person1); //true

在以上代码执行的整个过程中，name 属性要么是直接在对象上访问到的，要么是通过原型访问到的。因此，调用"name" in person1 始终都返回 true，无论该属性存在于实例中还是存在于原型中。同时使用 hasOwnProperty()方法和 in 操作符，就可以确定该属性到底是存在于对象中，还是存在于原型中，如下所示。

      

function hasPrototypeProperty(object, name){         return !object.hasOwnProperty(name) && (name in object);}

由于 in 操作符只要通过对象能够访问到属性就返回 true，hasOwnProperty()只在属性存在于实例中时才返回 true，因此只要 in 操作符返回 true 而 hasOwnProperty()返回 false，就可以确定属性是原型中的属性。下面来看一看上面定义的函数 hasPrototypeProperty()的用法。

function Person(){}Person.prototype.name= "Nicholas";Person.prototype.age= 29;Person.prototype.job= "Software Engineer";Person.prototype.sayName= function(){        alert(this.name);}; var person = new Person();alert(hasPrototypeProperty(person,"name")); //true person.name= "Greg";alert(hasPrototypeProperty(person,"name")); //false

在这里，name 属性先是存在于原型中，因此hasPrototypeProperty()返回 true。当在实例中重写 name 属性后，该属性就存在于实例中了，因此 hasPrototypeProperty()返回 false。即使原型中仍然有name 属性，但由于现在实例中也有了这个属性，因此原型中的 name 属性就用不到了。

在使用 for-in 循环时，返回的是所有能够通过对象访问的、可枚举的（enumerated）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举属性（即将[[Enumerable]]标记为 false 的属性）的实例属性也会在 for-in 循环中返回，因为根据规定，所有开发人员定义的属性都是可枚举的——只有在 IE8及更早版本中例外。

         IE早期版本的实现中存在一个bug，即屏蔽不可枚举属性的实例属性不会出现在 for-in 循环中。例如：

var o = {        toString : function(){               return "My Object";        }};for (var prop in o){        if (prop == "toString"){                 alert("Found toString"); //在 IE中不会显示        }}

要取得对象上所有可枚举的实例属性，可以使用 ECMAScript 5的 Object.keys()方法。这个方法接收一个对象作为参数，返回一个包含所有可枚举属性的字符串数组。例如：

function Person(){}Person.prototype.name= "Nicholas";Person.prototype.age= 29;Person.prototype.job= "Software Engineer";Person.prototype.sayName= function(){        alert(this.name);}; var keys = Object.keys(Person.prototype);alert(keys);//"name,age,job,sayName"var p1 = new Person();p1.name= "Rob";p1.age= 31;var p1keys = Object.keys(p1);alert(p1keys);//"name,age"

这里，变量 keys 中将保存一个数组，数组中是字符串"name"、"age"、"job"和"sayName"。这个顺序也是它们在 for-in 循环中出现的顺序。如果是通过 Person 的实例调用，则 Object.keys()返回的数组只包含"name"和"age"这两个实例属性。如果你想要得到所有实例属性，无论它是否可枚举，都可以使用Object.getOwnPropertyNames()方法。

var keys = Object.getOwnPropertyNames(Person.prototype);alert(keys);//"constructor,name,age,job,sayName"

        注意结果中包含了不可枚举的 constructor 属性。Object.keys()和 Object.getOwnPropertyNames()方法都可以用来替代for-in 循环。支持这两个方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。

更简单的原型语法

前面例子中每添加一个属性和方法就要敲一遍 Person.prototype。为减少不必要的输入，也为了从视觉上更好地封装原型的功能，更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象，如下面的例子所示。

function Person(){}Person.prototype= {        name: "Nicholas",        age: 29,        job:"Software Engineer",        sayName: function () {                 alert(this.name);        }};

       在上面的代码中，我们将Person.prototype 设置为等于一个以对象字面量形式创建的新对象。最终结果相同，但有一个例外：constructor属性不再指向 Person了。前面曾经介绍过，每创建一个函数，就会同时创建它的 prototype 对象，这个对象也会自动获得 constructor 属性。而我们在这里使用的语法，本质上完全重写了默认的 prototype 对象，因此 constructor 属性也就变成了新对象的 constructor 属性（指向 Object 构造函数），不再指向 Person 函数。此时，尽管 instanceof操作符还能返回正确的结果，但通过 constructor 已经无法确定对象的类型了，如下所示。

var friend = new Person();alert(friendinstanceof Object); //truealert(friendinstanceof Person); //truealert(friend.constructor== Person); //falsealert(friend.constructor== Object); //true

在此，用instanceof 操作符测试 Object 和 Person 仍然返回 true，但 constructor 属性则等于 Object 而不等于 Person 了。如果 constructor 的值真的很重要，可以像下面这样特意将它设置回适当的值。

function Person(){} Person.prototype= {        constructor: Person,        name: "Nicholas",        age: 29,        job:"Software Engineer",        sayName: function () {                 alert(this.name);}};

以上代码特意包含了一个constructor 属性，并将它的值设置为 Person，从而确保了通过该属性能够访问到适当的值。注意，以这种方式重设 constructor 属性会导致它的[[Enumerable]]特性被设置为 true。默认情况下，原生的 constructor 属性是不可枚举的，因此如果你使用兼容 ECMAScript 5的 JavaScript引擎，可以试一试 Object.defineProperty()。

function Person(){}Person.prototype= {        name: "Nicholas",        age: 29,        job: "Software Engineer",        sayName: function () {                 alert(this.name);        }};

//重设构造函数，只适用于 ECMAScript 5兼容的浏览器

Object.defineProperty(Person.prototype,"constructor", {        enumerable:false,        value:Person});

 原型的动态性

由于在原型中查找值的过程是一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样如此。请看下面的例子。

<pre name="code" class="javascript">var friend = new Person();Person.prototype.sayHi= function(){        alert("hi");};friend.sayHi();//"hi"（没有问题！）

以上代码先创建了 Person 的一个实例，并将其保存在 friend 中。然后，下一条语句在 Person. prototype 中添加了一个方法 sayHi()。即使 friend 实例是在添加新方法之前创建的，但它仍然可以访问这个新方法。其原因可以归结为实例与原型之间的松散连接关系。当我们调用 friend.sayHi()时，首先会在实例中搜索名为 sayHi 的属性，在没找到的情况下，会继续搜索原型。因为实例与原型之间的连接只不过是一个指针，而非一个副本，因此就可以在原型中找到新的 sayHi 属性并返回保存在那里的函数。

尽管可以随时为原型添加属性和方法，并且修改能够立即在所有对象实例中反映出来，但如果是重写整个原型对象，那么情况就不一样了。我们知道，调用构造函数时会为实例添加一个指向最初原型的[[Prototype]]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。请记住：实例中的指针仅指向原型，而不指向构造函数。看下面的例子。

function Person(){} var friend = new Person();Person.prototype= {        constructor:Person,        name: "Nicholas",        age: 29,        job: "Software Engineer",        sayName: function () {                 alert(this.name);        }}; friend.sayName();//error 

在这个例子中，我们先创建了Person 的一个实例，然后又重写了其原型对象。然后在调用friend.sayName()时发生了错误，因为 friend 指向的原型中不包含以该名字命名的属性。图 6-3展示了这个过程的内幕。

从图 6-3可以看出，重写原型对象切断了现有原型与任何之前已经存在的对象实例之间的联系；它们引用的仍然是最初的原型。

原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面，就连所有原生的引用类型，都是采用这种模式创建的。所有原生引用类型（Object、Array、String，等等）都在其构造函数的原型上定义了方法。例如，在 Array.prototype 中可以找到 sort()方法，而在 String.prototype 中可以找到substring()方法，如下所示。

alert(typeofArray.prototype.sort); //"function"alert(typeofString.prototype.substring); //"function"

通过原生对象的原型，不仅可以取得所有默认方法的引用，而且也可以定义新方法。可以像修改自定义对象的原型一样修改原生对象的原型，因此可以随时添加方法。下面的代码就给基本包装类型String 添加了一个名为 startsWith()的方法。

String.prototype.startsWith= function (text) {        returnthis.indexOf(text) == 0;}; varmsg = "Hello world!";alert(msg.startsWith("Hello"));//true

这里新定义的startsWith()方法会在传入的文本位于一个字符串开始时返回 true。既然方法被添加给了 String.prototype，那么当前环境中的所有字符串就都可以调用它。由于 msg 是字符串，而且后台会调用String 基本包装函数创建这个字符串，因此通过msg 就可以调用startsWith()方法。

尽管可以这样做，但我们不推荐在产品化的程序中修改原生对象的原型。如果因某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支

持该方法的实现中运行代码时，就可能会导致命名冲突。而且，这样做也可能会意外地重写原生方法。

原型对象的问题

原型模式也不是没有缺点。首先，它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。

原型模式的最大问题是由其共享的本性所导致的。原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去，毕竟（如前面的例子所示），通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了。来看下面的例子。

function Person(){}Person.prototype= {        constructor:Person,        name: "Nicholas",        age: 29,        job: "Software Engineer",        friends: ["Shelby", "Court"],        sayName: function () {                 alert(this.name);        }}; var person1 = new Person();var person2 = new Person(); person1.friends.push("Van"); alert(person1.friends);//"Shelby,Court,Van"alert(person2.friends);//"Shelby,Court,Van"alert(person1.friends=== person2.friends); //true

在此，Person.prototype对象有一个名为 friends 的属性，该属性包含一个字符串数组。然后，创建了 Person 的两个实例。接着，修改了 person1.friends 引用的数组，向数组中添加了一个字符串。由于 friends数组存在于 Person.prototype而非 person1中，所以刚刚提到的修改也会通过person2.friends（与 person1.friends指向同一个数组）反映出来。假如我们的初衷就是像这样在所有实例中共享一个数组，那么对这个结果没有话可说。可是，实例一般都是要有属于自己的全部属性的。而这个问题正是我们很少看到有人单独使用原型模式的原因所在。