6.3 继承（面向对象的程序设计）（JavaScript高级程序设计 第3版）

 

ECMAScript实现继承主要依靠原型链来实现的

 

6.3.1  原型链

原型链的基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法：

function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function (){
	return this.property;
};
function SubType(){
	this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
	return this.subproperty;
}

var instance = new SubType();
alert(instance.getSuperValue());  //true

//from page 163

1.别忘记默认的原型

所有引用类型默认都继承了Object，而这个继承也是通过原型链实现的。

所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针，指向Object.prototyp。这也是所有自定义类型都会继承toString()、valueOf()等默认方法的根本原因。

上面的例子一句话就是：SubType继承了SuperType，而SuperType继承了Object。当调用instance.toString()时，实际上调用的是保存在Object.prototype中的那个方法。

 

2.确认原型和实例的关系

① instanceof操作符：只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true；

alert(instance instanceof Object);        //true
alert(instance instanceof SuperType);     //true
alert(instance instanceof SubType);       //true

② inPrototypeof()方法：同样，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此inPrototypeof()方法也会返回true。

alert(Object.prototype.isPrototypeOf(instance));        //true
alert(SuperType.prototype.isPrototypeOf(instance));     //true
alert(SubType.prototype.isPrototypeOf(instance));       //true

 

3.谨慎地定义方法

子类型覆盖超类型中的方法，或者需要添加超类型不存在的方法时，给原型添加方法的代码一定要放在替换原型的语句之后：

function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function (){
	return this.property;
};
function SubType(){
	this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();

//添加新方法
SubType.prototype.getSubValue = function (){
	return this.subproperty;
}

//重写超类型中的方法
SubType.prototype.getSuperValue = function (){
	return false;
}
var instance = new SubType();
alert(instance.getSuperValue());  //false

//from page 165

重写方法会屏蔽原来的那个方法，也就是SubType的实例调用的重新定义的方法，但Supertype的实例调用的是原来的那个方法

需注意的是：必须在用SuperType的实例替换原型之后，再定义这两个方法。

 

另外，在通过原型链实现继承时，不能使用字面量创建原型方法。因为这样会重写原型链：

function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function (){
	return this.property;
};
function SubType(){
	this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();

//使用字面量添加新方法，会导致上一行代码无效
SubType.prototype = {
	getSubValue : function (){
		return this.subproperty;
	}
};

var instance = new SubType();
alert(instance.getSuperValue());  //error!

 

4.原型链的问题

① 主要问题来自包含引用类型值的原型，引用类型值的原型属性会被所有实例共享导致。

function SuperType(){
	this.colors = ["red", "blue", "green"];
}

function SubType(){
}
//继承了SuperType
SubType.prototype = new SuperType();

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,black"

② 在创建子类型的实例时，不能向超类型的构造函数中传递参数，

 

实践中，很少单独使用原型链

 

 

6.3.2   借用构造函数

在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
	this.colors = ["red", "blue", "green"];
}

function SubType(){
	SuperType.call(this);  //继承了SuperType
}

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"

//from page 167

优势：可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){
	this.name = name;
}

function SubType(){
	SuperType.call(this, "Aska");  //继承了SuperType
	this.age = 3;   //实例属性
}

var instance = new SubType();
alert(instance.name);  // "Aska"
alert(instance.age);   // 3

问题：如果仅仅借用构造函数，方法都在构造函数中定义，无法复用；在超类型的原型中定义的方法，对于子类型不可见，只能使用构造函数模式。

很少单独使用！

 

6.3.3   组合继承

指的是将原型链和借用构造函数技术组合到一起，从而发挥二者之长的一种继承模式。背后思路是使用原型链实现对原型属性和方法的继承，借用构造函数实现对实例属性的继承。

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);  //继承了SuperType
	this.age = age;   
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function (){
	alert(this.age);
};

var instance1 = new SubType("Aska",4);
instance1.colors.push("black");
alert(instance1.colors);    //"red,blue,green,black"
instance1.sayName();        //"Aska"
instance1.sayAge();         //4

var instance2 = new SubType("Yang",3);
instance2.colors.push("black");
alert(instance2.colors);    //"red,blue,green,black"
instance2.sayName();        //"Yang"
instance2.sayAge();         //3

//from page 169

组合继承是JavaScript中最常用的继承模式，而且，instanceof和isPrototypeOf()也能用于识别基于组合继承创建的对象。

 

6.3.4  原型式继承

ES5新增了Object.create()方法规范了原型式继承。接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。

var person ={
	name:"Aska",
	friends:["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);     //Shelby,Court,Van,Rob,Barbie

第二个参数与Object.defineProperties()方法的第二个参数格式相同，每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。

var person ={
	name:"Aska",
	friends:["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person,{
	name:{
		value:"Greg"
	}
});
alert(anotherPerson.name);   //"Greg"

//from page 171

 

6.3.5  寄生式模式

创建一个用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。

function object(o){
	function F(){}
	F.prototype = o;
	return new F;
}

function createAnother(original){
	var clone = object(original);   //通过调用函数创建一个对象
	clone.sayHi = function (){      //以某种方式来增强这个对象
		alert("Hi");
	};
	return clone;                   //返回这个对象
}

var person = {
	name:"Aska",
	friends:["Shelby","Court","Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();   //"Hi"

使用寄生式继承来为对象添加函数，会因为不能做到函数复用而降低效率

 

6.3.6  寄生组合式继承

组合继承是JS最常用的继承模式，但问题在：会调用两次超类型构造函数：一次在创建子类型原型的时候，另一次是在子类型构造函数内部。

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);        //第二次调用SuperType()
	this.age = age;   
}
 
SubType.prototype = new SuperType();   //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function (){
	alert(this.age);
};

解决方法：寄生组合式继承

寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

function object(o){
	function F(){}
	F.prototype = o;
	return new F;
}

function inheritPrototype(subType, superType){
	var prototype = object(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(name, age){
	SuperType.call(this.name);
	this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function (){
	alert(this.age);
}

普遍认为寄生组合继承是引用类型最理想的继承方式。