傳統es5的完美繼承

代碼段

首先來看個代碼片段，節選自原文.

/**
 * 寄生式繼承 繼承對象
 * 傳遞參數 js對象
 */
function inheritObject(o){
	//聲明一個過渡函數
	function F(){}
	//過渡對象的原型繼承父對象
	F.prototype = o;
	return new F();
}
/**
 * 寄生式繼承 繼承原型
 * 傳遞參數 subClass 子類
 * 傳遞參數 superClass 父類
 */
function inheritPrototype(subClass,superClass){
	//複製一份父類的原型副本保存在變量
	var p = inheritObject(superClass.prototype);
	//修正因爲重寫子類原型導致子類的constructor指向父類
	p.constructor = subClass;
	//設置子類的原型
	subClass.prototype = p;
}
//定義父類
function SuperClass(name){
	this.name = name;
	this.colors = ['red','blue'];
}
//定義父類原型方法
SuperClass.prototype.getName = function(){
	return this.name;
}
//定義子類
function SubClass(name,time){
	//構造函數繼承
	SuperClass.call(this,name);
	//子類新增屬性
	this.time = time;
}
//寄生式繼承父類原型
inheritPrototype(SubClass,SuperClass);
//子類新增原型方法
SubClass.prototype.getTime =function(){
	return this.time;
}
var test1 = new SubClass('js book',2014);
var test2 = new SubClass('csc book',2013);
test1.colors.push('black');
console.log(test1.colors); //['red','blue','black']
console.log(test2.colors); //['red','blue']
console.log(test2.getName());
console.log(test2.getTime());

分析代碼

上述代碼是被稱爲完美繼承的“寄生組合式繼承”，這裏組合的含義並沒有體現出來，組合繼承是指既繼承了父類原型，又繼承了父類構造函數中的屬性和方法。最符合這個特點的應該是

function inheritPrototype(subClass,superClass){
	//複製一份父類的原型副本保存在變量
	var p = inheritObject(superClass.prototype);
	//修正因爲重寫子類原型導致子類的constructor指向父類
	p.constructor = subClass;
	//設置子類的原型
	subClass.prototype = p;
}

這裏通過 inheritObject(superClass.prototype) 可以把父類原型繼承下來，但是爲了避免組合式繼承的缺點： 子類實例化時調用父類的構造函數，在內部通過修改 constructor 指向了子類本身。

另外 __inheritPrototype(subClass,superClass)__和 inheritObject(o) 內部都使用了中間過渡元素，這樣可以避免了原型式繼承的缺點： 當改變子類繼承到父類屬性的時候，會污染到再次實例化的子類它所繼承到的屬性，例如：

function inheritObject(o){
	//聲明一個過渡函數
	function F(){}
	//過渡對象的原型繼承父對象
	F.prototype = o;
	return new F();
}
var book = {
	name:'js book',
	alikeBook:['css book','html book']
}
var newBook = inheritObject(book);
newBook.name = 'ajax book';
newBook.alikeBook.push('xml book');
var otherBook = inheritObject(book);
otherBook.name = 'flash book';
otherBook.alikeBook.push('as book');
console.log(newBook.name); //ajax book
console.log(newBook.alikeBook); //['css book','html book','xml book','as book']
console.log(otherBook.name); //flash book
console.log(otherBook.alikeBook); //['css book','html book','xml book','as book']
console.log(book.name); //js book
console.log(book.alikeBook); //['css book','html book','xml book','as book']