这里先说基于原型链实现的继承。那首先就得明白什么是原型链了;
每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。
那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含指向另一个原型对象的指针,相应地,另一个原型对象也包含着指向另一个构造函数的指针。
假如另一个原型又是另一个类型的实例,那么上述关系依然成立。层层递进,就成一条链了。
实现原型链的基本模式:
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function SubType() {
this.subproperty = false;
}
SubType.prototype = new SuperType(); //实现继承
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue); // true
上述SubType通过重写原型对象的方式继承了SuperType,所以原来位于SuperType里的方法,现在也位于SubType里了,我们没有使用SubType默认提供的原型,而是给它换了一个新原型。这个新原型就是SuperType的实例。
于是,新原型不仅有作为SuperType实例所有的属性和方法,内部还有一个指针,指向了SuperType的原型。
从而,instance指向SubType的原型,SubType的原型又指向SuperType的原型;getSuperValue()的方法还是在SuperType.prototype中,但property则位于SubType.prototype中,因为property是一个实例属性,而getSuperValue()则是一个原型方法。既然SubType.prototype现在是SuperType的实例,那么property当然位于该实例中了
此外,instance.constructor现在指向的是SuperType了,因为原来SubType.prototype指向了SuperType的原型,而这个原型对象的constructor属性指向的是SuperType
默认的原型
我们知道,所有的引用类型默认都继承了Object,而这个继承也是原型链实现的。所有的函数的默认原型都是Object的实例,因此默认原型里面都会包含一个指针,指向Object.prototype
这也是所有自定义类型都会继承toString(),valueof()等默认方法的根本原因
原型和实例的关系
alert(isntance instanceof Object) ; // true
alert(isntance instanceof SuperType); // true
alert(isntance instanceof SubType) ; // true
alert(Object.prototype.isPrototypeOf(instance)); // true
alert(SuperType.prototype.isPrototypeOf(instance)); // true
alert(SubType.prototype.isPrototypeOf(instance)); // true
通过原型链实现继承,不能使用字面量对象创建原型方法,那样会重写原型链,切断原来原型与实例之间的联系
原型链存在的问题:
(1)最主要的问题是来自包含引用类型值的原因
举例:
function SuperType() {
this.colors = ['red', 'yellow', 'blue'];
}
function SubType() {
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push('black');
var instance2 = new SubType();
alert(instance1.colors); // 'red,yellow,blue,black'
alert(instance2.colors); // 'red,yellow,blue,black'
SuperType的每个实例都会包含各自的colors属性,当SubType通过原型链继承之后,SubType.prototype也包含了一个colors属性,为所有实例所共享,所有修改instance1,会反映到instance2
(2)另一个问题:不能向超类型的构造函数中传递参数
解决办法:
1.借用构造函数(经典继承)
function SuperType () {
this.colors = ['red', 'blue', 'green'];
}
function SubType() {
SuperType.call(this)
}
var instance1 = new SubType();
instance1.colors.push('black');
alert(instance1.colors); // "red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors) // "red,blue,green"
代码红色部分借调了超类型的构造函数,通过使用call()方法,我们实际上是在(未来将要)新创建的SubType实例的环境下调用了SuperType构造函数。就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码
优势: 传递参数,可以在子类型构造函数中向超类型构造函数传递参数
function SuperType (name) {
this.name = name;
}
function SubType () {
SuperType.call (this, 'bob'); //继承SuperType,同时传递参数
this.age = 29; //实例属性
}
var instance = new SubType();
alert(instance.name); // 'bob'
alert(instance.age); //29
问题:方法都在构造函数中定义,无法复用。而且,在超类型原型中定义的方法,对子类型不可见
2.组合继承
思路:使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType (name, age) {
SuperType.call(this, name); //继承属性
this.age = age;
}
// 继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
};
var instance1 = new SubType('bob', 20);
instance1.colors.push('black');
alert(instance1.colors); // "red,blue,green,black"
instance1.sayName(); // 'bob'
instance1.sayAge(); // 20
var instance2 = new SubType('alice', 21);
alert(instance2.colors); // "red,blue,green"
instance2.sayName(); // 'alice'
instance2.sayAge(); // 21
3.原型式继承(object.create())
实现原理
function object(o) {
function F(){}
F.prototype = o;
return new F() //返回的是构造函数的实例,所以只有_proto_属性,指向F.prototype
}
举例:
var person = {
name: 'bob',
friends: ['a', 'b', 'c']
}
var anotherPerson = Object.create(person);
anotherPerson.name = 'alice';
anotherPerson.friends.push('d');
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = 'Linda';
yetAnotherPerson.friends.push('e');
alert(person.friends); // 'a,b,c,d,e'
在没有必要兴师动众地创建构造函数,而只想让一个对象与一个对象保持类似的情况下,可以用原型式继承,不过,
包含引用类型的值的属性始终都要共享相应的值,就像使用原型模型一样
4.寄生式继承
function createAnother (original) {
var clone = object.create(original); // 通过调用函数创建一个新对象
clone.sayHi = function() { // 以某种方式增强对象
alert('Hi');
}
return clone; //返回这个对象
}
var person = {
name: 'bob',
friends: ['a', 'b', 'c']
}
var anotherPerson = createAnother(person);
anotherPerson对象具有了person所有属性和方法, 由于采用object.create()创建,所以类似于原型式继承
5.寄生组合式继承
组合式继承最大的不足是无论什么情况下,会调用两次超类型构造函数;一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
看下面例子:
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function() {
alert(this.name)
}
function SubType() {
SuperType.call(this,name); //第二次调用SuperType()
this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
alert(this.age);
}
解释: 第一次调用SuperType()时,将SuperType()的实例属性赋给了SubType.prototype;相当于在SubType.prototype上创建了两个属性name,colors
第二次调用SubType()构造函数时,又会调用SuperType()一次,这次又在新对象上创建了实例属性name和colors,于是,这两个属性就屏蔽了原型中的两个同名属性。这样就在SubType.prototype上创建了多余的不必要的属性
寄生组合式继承:不必为了指定子类型的原型而调用超类型构造函数,我们所需要的无非就是超类型原型的一个副本而已。
本质上,就是利用寄生式继承来继承超类型的原型,再将结果指定给子类型原型
function inheritPrototype(subType, superType) {
var prototype = object.create(superType.prototype); //创建对象
prototype.constructor = subType; // 增强对象
subType.prototype = prototype; //指定对象
}
所以寄生式组合继承:
function SuperType(name) {
this.name = name;
this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function() {
alert(this.name)
}
function SubType() {
SuperType.call(this,name);
this.age = age;
}
inheritPrototype(subType, superType);
SubType.prototype.sayAge = function() {
alert(this.age);
}