原型模式
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。 如果按字面意思来理解,prototype就是通过调用构造函数而创建的那个对象实例的原型对象。
使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。
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();
person1.sayName(); // "Nicholas"
var person2 = new Person();
person2.sayName(); // "Nicholas"
alert(person1.sayName == person2.sayName); // true
在此,我们将sayName()方法和所有属性直接添加到了Person
的prototype属性中,构造函数变成了空函数。即使如此,也仍然
可以通过调用构造函数来创建新对象,而且新对象还会具有相同的
属性和方法。但**与构造函数模式不同的是,新对象的这些属性和方
法是由所有实例共享的**。换句话说,person1和person2访问的都是
同一组属性和同一个sayName()方法。
理解原型对象
无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
如:Person.prototype.constructor指向Person,通过constructor,我们还可继续为原型对象添加其它属性和方法。
ECMAScript 5增加了一个新方法:Object.getPrototypeOf(),返回指定对象的原型。
alert(Object.getPrototypeOf(person1) == Person.prototype); // true
alert(Object.getPrototypeOf(person1).name) // "Nicholas"
每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。也就是说,在我们调用person1.sayName()时,会先后执行两次搜索。 首先,解析器会问:“实例person1有sayName属性吗?” 答:“没有。” 然后,它继续搜索,再问:“person1的原型有sayName属性吗?” 答:“有。” 于是,它就读取那个保存在原型对象中的函数。当我们调用person2.sayName()时,将会重现相同的搜索过程,得到相同的结果。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。
虽然可以通过对象实例访问保存在原型中的值,但不能通过对象实例重写原型中的值。如果我们在实例中添加了一个属性,而该属性与实例原型中的一个属性同名,那我们就在实例中创建了该属性,该属性将会屏蔽原型中的那个属性。
person1.name = "Greg";
alert(person1.name); // "Greg" --来自实例对象
alert(person2.name); // "Nicholas" --来自原型
在这个例子中,person1的name被一个新值给屏蔽了。当在alert()中访问person1.name时,需要读取它的值,因此会在这个实例上搜索一个名为name的属性。这个属性确实存在,于是就返回它的值而不必再搜索原型了。当以同样的方式访问person2.name时,并没有在实例上发现该属性,因此就会继续搜索原型,结果在那里找到了name属性。
当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性;换句话说,添加这个属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的连接。不过,使用delete操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性。
person1.name = "Greg";
alert(person1.name); // "Greg" --来自实例对象
alert(person2.name); // "Nicholas" --来自原型
delete person1.name;
alert(person1.name); // "Nicholas" --来自原型
使用 hasOwnProperty() 可以检测一个属性是存在于实例中,还是存在于原型中。这个方法只在给定属性存在于对象实例中时,才会返回true。
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
原型的搜索机制
当以读取模式访问一个实例属性或方法时,首先会在实例中搜索该属性或方法。如果没有找到该属性或方法,则会继续搜索实例的原型。
原型与in操作符
有两种方式使用in操作符:单独使用和在for-in中使用。单独使用时,
in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
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
delete person1.name;
alert(person1.name); // "Nicholas" --来自原型
alert(person1.hasOwnProperty("name")); // false
alert("name" in person1); // true
调用”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,就可以确定属性是原型中的属性。
在使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中既包括存在于实例中的属性,也包括存在于原型中的属性。
重写原型对象
使用一个包含所有属性和方法的对象字面量来重写整个原型对象。
function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function(){
alert(this.name);
}
};
此时,constructor属性不再指向Person了。每创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性。而我们在这里使用的语法,本质上完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数)。尽管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
可以这样设置constructor的值为Person,确保通过该属性能够访问到适当的值。
function Person(){
}
Person.prototype = {
constructor : Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function(){
alert(this.name);
}
};
原型的动态性
由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即实例上反映出来————即使是先创建了实例后修改原型也照样如此。
var friend = new Person();
Person.prototype.sayHi = function(){
alert("hi");
}
friend.sayHi(); // "hi"
当我们调用friend.sayHi()时,首先会在实例中搜索名为sayHi的属性,在没找到时,会继续搜索原型。因为实例与原型之间的连接只不过是一个指针,而非一个副本,因此就可以在原型中找到新的sayHi属性并返回。
尽管可以随时为原型添加属性和方法,并且修改能立即在所有对象实例中反映出来,但如果是重写整个原型对象,那么情况就不一样了。我们知道,调用构造函数时会为实例添加一个指向最初原型的指针,而把原型修改为另一个对象就等于切断了构造函数与最初原型之间的联系。请记住:实例中的指针仅指向原型,而非构造函数。
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指向的原型中不包含以该名字命名的属性。friend引用的仍然是最初的原型。
原型对象的问题
- 原型模式省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。
- 原型中所有属性都是被实例共享的,这种共享对于函数非常合适,但对于包含引用类型值的属性来说,就有问题了。
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
由于friends数组存在于Person.prototype而非person1中,所以对person1的修改也会通过person.friends(与person1.friends指向同一个数组)反映出来。
使用原型时常用的方法
- Object.getPrototypeOf(),返回指定对象的原型。
- hasOwnProperty() 检测指定属性是存在于实例中,还是存在于原型中。这个方法只在指定属性存在于对象实例中时,才会返回true。
- for-in循环,返回指定对象可枚举的实例属性和原型属性。
- Object.keys(),返回指定对象包含的所有可枚举属性的字符串数组。
- Object.getOwnPropertyNames(),返回指定对象的所有实例属性,无论它是否可枚举。