6.2.3 原型模式

1：构造函数模式确实解决了两个函数做同一件事的问题，可是新问题又来了：在全局作用域中定义的函数实际上只 能被某个对象调用，这让全局作用域有点名不副实。而更让人无法接受的是：如果对象需要定义很多方法，那么就要定义很多个全局函数，于是我们这个自定义的引用类型就丝毫没有封装性可言了。
2：（1）我们创建的每一个函数都有一个prototype属性（原型属性），这个属性是一个指针，指向一个对象，这个对象的用途是：包含可以由特定类型的所有实例共享的属性跟方法。

function Person(){
    console.log('hello')
}
console.log(Person)      //[Function: Person]
console.log(Person.prototype)   //fun {}



function Person2(){
    console.log('hello')
}
Person2.prototype.name='james'
Person2.prototype.sayName=function () {
    console.log(this.name)
}
console.log(Person2)      //[Function: Person2]
console.log(Person2.prototype)   //Person2 { name: 'james', sayName: [Function] }

（2）prototype按照字面意思理解：通过调用构造函数而创建的那个对象实例的原型。使用原型对象的好处是可以让所有对象实例共享他包含的属性跟方法(原型模式不会共享)；
（3）换句话说：不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。如下面：

假如写this.prptotype会报错

（4）注意下下几点：

alert(person1.sayName)会打印

sayName跟sayName()的区别。加括号表示函数执行，不加括号表示一个函数，对象或者变量；sayName()其实是window.sayName()的缩写。任何函数都必须调用才能生效。

3：理解原型对象(原型对象实际上是对构造函数的改进。)

（1）只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype 属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor （构造函数）属性，这个属性包含一个指向prototype 属性所在函数的指针。就拿前面的例子来说，
Person.prototype.constructor 指向Person。而通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。
（2）创建了自定义的构造函数之后，其原型对象默认只会取得constructor 属性；至于其他方法，则 都是从Object 继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的原型对象。
（3）Person.prototype 指向了原型对象，而Person.prototype.constructor 又指回了Person。 原型对象中除了包含constructor 属性之外，还包括后来添加的其他属性。
（4）Person 的每个实例—— person1 和person2 都包含一个内部属性，该属性仅仅指向了Person.prototype；换句话说，它们 与构造函数没有直接的关系。
（5）虽然在所有实现中都无法访问到[[Prototype]]，但可以通过isPrototypeOf()方法来确定对象之 间是否存在这种关系。从本质上来讲，如果[[prototype]]指向调用isPrototypeOf()方法的对象(person.prototype).那么这个方法就会返回true;
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
我们用原型对象的isPrototypeOf()方法测试了person1 和person2。因为它们内部都 有一个指向Person.prototype 的指针，因此都返回了true。
（6）Object.getPrototypeOf().这个方法返回[[protptype]]值(支持这个方法的浏览器有IE9+、Firefox 3.5+、Safari 5+、Opera 12+和Chrome。)例如:
alert( Object.getPrototypeOf(person1)==Person.prototype ) //true
alert( Object.getPrototypeOf(person1).name ) //Nicholas
这里的第一行代码只是确定Object.getPrototypeOf()返回的对象实际就是这个对象的原型。 第二行代码取得了原型对象中name 属性的值，也就是”Nicholas”。使用Object.getPrototypeOf() 可以方便地取得一个对象的原型，而这在利用原型实现继承（本章稍后会讨论）的情况下是非常重要的。
（7）每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先 从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到， 则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这 个属性，则返回该属性的值。也就是说，在我们调用person1.sayName()的时候，会先后执行两次搜 索。首先，解析器会问：“实例person1 有sayName 属性吗？”答：“没有。”然后，它继续搜索，再 问：“person1 的原型有sayName 属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函 数。当我们调用person2.sayName()时，将会重现相同的搜索过程，得到相同的结果。而这正是多个 对象实例共享原型所保存的属性和方法的基本原理。
（8）虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们 在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。来看下面的例子。
function Person(){ （这里用不着写name跟age属性，只有构造函数模式跟工厂模式中才要写）
Person.prototype.name=’潘一博’；(注意是分号，不是逗号，)
Person.prototype.age=20；(注意是分号，不是逗号，)
Person.prototype.sayName = function(){
alert(this.name);
}
}
var person1 = new Person();
var person2 = new Person();
person1.name = “Greg”;
alert(person1.name); //”Greg”——来自实例
alert(Object.getPrototypeOf(person1).name) //”Nicholas”——来自原型
alert(person2.name); //”Nicholas”——来自原型
alert(Person.name)；//会打印Person
alert(Object.getPrototypeOf(person1))；

代表那个对象是一个包着对象的对象。

alert(Object.getPrototypeOf(Person));

alert(Object.getPrototypeOf(function(){}));

alert(Object.getPrototypeOf(Person).name);

alert(Person);

alert(Person());

报错

alert(person1 instanceof Object); //打印true
alert(person1 instanceof Person); //打印true
（9）当为对象实例添加一个属性时，这个属性就会屏蔽原型对象中保存的同名属性；换句话说，添加这 个属性只会阻止我们访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为null，也 只会在实例中设置这个属性，而不会恢复其指向原型的连接。不过，使用delete 操作符则可以完全删
除实例属性，从而让我们能够重新访问原型中的属性，
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();
person1.name = “Greg”;
alert(person1.name); //”Greg”——来自实例
alert(person2.name); //”Nicholas”——来自原型
delete person1.name;
alert(person1.name); //”Nicholas”——来自原型
（10）使用hasOwnProperty()方法可以检测一个属性是存在于实例中，还是存在于原型中。这个方法（不 要忘了它是从Object 继承来的）只在给定属性存在于对象实例中时，才会返回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”)); //false
person1.name = “Greg”;
alert(person1.name); //”Greg”——来自实例
alert(person1.hasOwnProperty(“name”)); //true
alert(person2.name); //”Nicholas”——来自原型
alert(person2.hasOwnProperty(“name”)); //false
delete person1.name;
alert(person1.name); //”Nicholas”——来自原型
alert(person1.hasOwnProperty(“name”)); //false
4：原型与in操作符
有两种方式使用in 操作符：单独使用和在for-in 循环中使用。
（1）在单独使用时，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”)); //false
alert(“name” in person1); //true
person1.name = “Greg”;
alert(person1.name); //”Greg” ——来自实例
alert(person1.hasOwnProperty(“name”)); //true
alert(“name” in person1); //true
alert(person2.name); //”Nicholas” ——来自原型
alert(person2.hasOwnProperty(“name”)); //false
alert(“name” in person2); //true
delete person1.name;
alert(person1.name); //”Nicholas” ——来自原型
alert(person1.hasOwnProperty(“name”)); //false
alert(“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，就可以确 定属性是原型中的属性。如下：
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
（2）使用for-in循环时，返回的是所有能够通过对象访问的，可以枚举的（enumerated）属性，其中既包括存在于实例中的属性，也包括存在于原型中的属性。屏蔽了原型中不可枚举属性的实例属性（即将[[enumerated]]设置为false的属性）也会在for-in循环中返回。但是IE678存在一个BUG，屏蔽了原型中不可枚举属性的实例属性不会出现中for-in循环中。
var o = {
toString : function(){
return “My Object”;
}
};
for (var prop in o){
if (prop == “toString”){
alert(“Found toString”); //在IE 中不会显示
}
}
这里的对象O定义了一个名为toString的方法，改方法屏蔽了原型中不可枚举的toString （）方法， 当以上代码运行时，应该显示一个警告框，表明找到了toString 方法。但是在IE早起版本中，由于其实现认为原型的toString()方法被打上了值为false的[[Enumerable]]标记，因此应该跳过该属性，结果我们不会看到这个警告框。该bug 会影响默认不可枚举的所有属性和方法。包括hasOwnProperty()，propertyEnumerable()，tolocaleString()，toString()，valusOF().ECMAScript 5也将constructor跟prototype属性的[[enumerated]]设置为false。但并不是所有浏览器都照此实现；
5：（1）要取得对象上所有可枚举的实例属性，可以使用ECMAScript 5的Object.keys()方法。

变量keys中将保存一个数组，数组中是字符串‘name’‘age’‘job’‘sayName’.这个顺序也是他们在for-in循环中出现的顺序。如果是通过他的实例来调用，只会返回name,age这2个实例属性。
（2）如果你想要得到所有实例属性，无论它是否可枚举，都可以使用Object.getOwnPropertyNames() 方法。
var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //”constructor,name,age,job,sayName”
var keys2 = Object.getOwnPropertyNames(Person);
alert(keys2); //”prototype,length,name”
注意结果中包含了不可枚举的constructor 属性。Object.keys()和Object.getOwnProperty-
Names()方法都可以用来替代for-in 循环。支持这两个方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 12+和Chrome。
6（1）：更简单的原型语法：
function Person(){};
Person.prototype={
age:18,
name:’小潘’，
sayName:function(){alert(‘this.name’)}
}
将Person.prototype设置为=一个以对象字面量形式创建的心对象；最终结果相同。但是有一个例外，constructor属性不再指向Person了。前面介绍过，每创建一函数，就会同时创建他的prototype属性。这个对象也会自动获得constructor属性。而我们在这里使用的语法=本质上完全重写了默认的prototype属性。因此constructor属性也变成了新对象constructor属性（指向Object构造函数），不再指向Person函数。此时尽管instanceof操作符还能返回正确的结果，但通过constructor属性已经无法确定对象的类型了。
var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true
（2）如果constructor 的值真的很重要，可以像下面这样特意将它设置回适当的值。
function Person(){
}
Person.prototype = {
constructor : Person,
name : “Nicholas”,
age : 29,
job: “Software Engineer”,
sayName : function () {
alert(this.name);
}
}
（3）上面方式重设constructor属性会导致他的[[Enumerable]]特性被设置为true。默认情况下，原声的constructor属性是不可枚举的，可以试试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
});
7：原型对象的问题：
（1）首先，它省略了为构造函数传递初始化参数这一环节，结果所有实例在 默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便，但还不是原型的最大问题。 原型模式的最大问题是由其共享的本性所导致的。
（2）原型中所有属性是被很多实例共享的，这种共享对于函数非常合适。对于那些包含基本值的属性倒 也说得过去，毕竟（如前面的例子所示），通过在实例上添加一个同名属性，可以隐藏原型中的对应属性。然而，对于包含引用类型值的属性来说，问题就比较突出了。来看下面的例子。
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 指向同一个数组）反映出来。假如我们的初衷就是像这样 在所有实例中共享一个数组，那么对这个结果我没有话可说。可是，实例一般都是要有属于自己的全部 属性的。而这个问题正是我们很少看到有人单独使用原型模式的原因所在。