创建对象之原型模式

原型模式

我们创建的每个函数都有一个 prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解，那么 prototype就是通过调用构造函数而创建的那个对象实例的原型对象。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中，如下面的例子所示。

// 原型模式
function Person4(){
}

Person4.prototype.name = 'Nick';
Person4.prototype.age = 29;
Person4.prototype.sayName = function(){
    console.log(this.name);
}

var person4 = new Person4();
person4.sayName();//Nick

var person44 = new Person4();
person44.sayName();//Nick
console.log(person4.sayName === person44.sayName);//true

尝试修改 name属性

/ 原型模式
function Person4(){
}

Person4.prototype.name = 'Nick';
Person4.prototype.age = 29;
Person4.prototype.sayName = function(){
    console.log(this.name);
}

var person4 = new Person4();
person4.sayName();//Nick
person4.name = 'abc';  //重新赋值要在打印之前才有效
person4.sayName();//abc
var person44 = new Person4();

person44.sayName();//Nick
console.log(person4.sayName === person44.sayName);//true

在此，我们将 sayName（）方法和所有属性直接添加到了 Person4 的 prototype属性中，构造函数变成了空函数。即使如此，也仍然可以通过调用构造函数来创建新对象，而且新对象还会具有相同的属性和方法。但与构造函数模式不同的是，新对象的这些属性和方法是由所有实例共享的。换句话说，person4 和 person44 访向的都是同一组属性和同一个 sayName() 函数。要理解原型模式的工作原理，必须先理解 ECMAScript中原型对象的性质。

1.理解原型模式

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个 prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个 constructor（构造函数）属性，这个属性包含一个指向 prototype属性所在函数的指针。就拿前面的例子来说，Person. prototype. constructor指向 Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。
创建了自定义的构造函数之后，其原型对象默认只会取得 constructor属性；至于其他方法，则都是从 Object继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。ECMA-262第5版中管这个指针叫[[ Prototype]]。虽然在脚本中没有标准的方式访问 [[Prototype]],但 Firefox、 Safari和 Chrome在每个对象上都支持一个属性 proto；而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。
构造函数 Person (Person4) 和 Person.prototype 创建的实例代码为例：

图展示了 Person4 构造函数、 Person4 的原型属性以及 Person4 现有的两个实例之间的关系。在此， Person4. prototype 指向了原型对象，而 Person4. prototype. constructor又指回了 Person4。原型对象中除了包含 constructor属性之外，还包括后来添加的其他属性。 Person4 的每个实例 person1和 person2 都包含一个内部属性，该属性仅仅指向了 Person4. prototype；换句话说，它们与构造函数没有直接的关系。此外，要格外注意的是，虽然这两个实例都不包含属性和方法，但我们却可以调用 person4. sayName() 。这是通过查找对象属性的过程来实现的。
虽然在所有实现中都无法访问到[[Prototype]]，但可以通过 isPrototypeOf() 方法来确定对象之间是否存在这种关系。从本质上讲，如果[[ Prototype]]指向调用==isPrototypeOf()==方法的对象(Person4. prototype)，那么这个方法就返回true，如下所示：

// isprototypeof() 方法  验证Person4.prototype
console.log(Person4.prototype.isPrototypeOf(person4));  //true
console.log(Person4.prototype.isPrototypeOf(person44)); //true

ECMAScript 5 增加了一个新方法Object.getPrototypeOf()，这个方法返回[[Prototype]]的值

// Object.getPrototypeOf()
console.log(Object.getPrototypeOf(person4) == Person4.prototype);//true
console.log(Object.getPrototypeOf(person4).name);//Nick 为啥不是 abc

返回的值为啥不是 abc ???
每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。也就是说，在我们调用 person1, sayname（）的时候，会先后执行两次搜索。首先，解析器会问：“实例person4 有 sayName属性吗？”答：“没有。”然后，它继续搜索，再问：“ person4 的原型有 sayName属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。当我们调用 person4. sayName() 时，将会重现相同的搜索过程，得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。
上面那个问题的回答：虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。

//person4.name = 'abc'; 上面已经重新赋值，这里只是提醒上面修改过
person4.sayName();//abc     来自实例
person44.sayName();//Nick   来自原型

在这个例子中， person4 的 name 被一个新值给屏蔽了。
不过，使用 delete 操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性，如下所示。

delete person4.name;
person4.sayName(); //Nick 

使用 hasOwnProperty() 方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不要忘了它是从 Object继承来的）只在给定属性存在于对象实例中时，才会返回 true。来看下面这个例子。

// hasOwnProperty() 方法
console.log(person44.hasOwnProperty('name'));//false
person44.name = 'cdefg';//重新赋值
console.log(person44.hasOwnProperty('name'));//true  
person44.sayName();//cdefg
console.log(person44.hasOwnProperty('name'));//true
delete person44.name;
person44.sayName(); //Nick   来自原型
console.log(person44.hasOwnProperty('name'));//false

通过使用 hasOwnProperty() 方法，什么时候访问的是实例属性，什么时候访问的是原型属性就清二楚了。

 图展示了上面例子在不同情况下的实现与原型的关系(为了简单起见，图中省略了与 Person构造函数的关系)。

ECMAScript5 的 Object.getOwnPropertyDescriptor（）方法只能用于实例属性，要取得原型属性的描述符，必须直接在原型对象上调用 Object. getPropertyDescriptor() 方法。

2.原型与 in 操作符

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

// in 操作符
person4.sayName();//Nick  来自原型
console.log('name' in person4); //true
person44.name = 'cdefg';//重新赋值
person44.sayName();//cdefg   来自实例
console.log('name' in person44);//true  

in 操作符无论在原型还是在实例中，只要有就是返回 true，具体确认需要使用 hasOwnProperty() 方法

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

// Object.keys() 方法
var keys_1 = Object.keys(Person4.prototype);
console.log(keys_1); // [ 'name', 'age', 'sayName' ]
var keys_2 = Object.keys(person4);
console.log(keys_2); // []  都在原型中，实例中没有
var keys_3 = Object.keys(person44);
console.log(keys_3); // [ 'name' ]  有一个重写的

3.更简单的写法

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

function Person5(){
}
Person5.prototype = {
    name:"Nicholas",
    age: 26,
    sayName:function(){
        console.log(this.name);
    }
}

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

var person5 = new Person5();
person5.sayName();//Nicholas
console.log(person5 instanceof Object);//true
console.log(person5 instanceof Person5);//true
console.log(person5.constructor == Person5);//false
console.log(person5.constructor == Object);//true

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

function Person5(){
}
Person5.prototype = {
    // 添加一行，手动设置 原型对象的 constructor 指向 Person5
    constructor:Person5,
    name:"Nicholas",
    age: 26,
    sayName:function(){
        console.log(this.name);
    }
}
var person5 = new Person5();
person5.sayName();//Nicholas
console.log(person5 instanceof Object);//true
console.log(person5 instanceof Person5);//true
console.log(person5.constructor == Person5);//false  添加一行之后是 true
console.log(person5.constructor == Object);//true  添加一行之后是 false

以上代码特意包含了一个 constructor属性，并将它的值设置为 Person,从而确保了通过该属性能够访问到适当的值。

注意，以这种方式重设 constructor 属性会导致它的 [[Enumerable]] 特性被设置为true。默认情况下，原生的 constructor 属性是不可枚举的，因此如果你使用兼容 ECMASCRIPT5的 Javascript引擎，可以试一试 Object. defineproperty()重设构造函数。

//重设构造函数，只适合用于 ES5 兼容浏览器
Object.defineProperty(Person5.prototype,"constructor",{
    enumerable:false,
    value:Person5
});

4. 原型的动态性

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

5.原生对象的原型

6.原型对象的问题

原型模式也不是没有缺点。首先，它省略了为构造函数传递初始化参数这一环节，结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。
原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去，毕竟（如前面的例子所示），通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了。来看下面的例子。