javascript继承

类继承

类型1：extend

function extend(subClass, superClass) {
	var F = function() {
	};
	F.prototype = superClass.prototype;
	subClass.prototype = new F();
	subClass.prototype.constructor = subClass;
}

 类型2：extendOther

function extendOther(subClass, superClass) {
	subClass.prototype = new superClass();
	subClass.prototype.constructor = subClass;
}

 举例：extend

function SuperType() {
	this.property = true;
	this.property1 = true;
	this.property2 = true;
	this.property3 = true;
	this.property4 = true;
	this.property5 = true;
	this.property6 = true;
	this.property7 = true;
	this.property8 = true;
	/*SuperType.prototype.getSuperV = function() {
		return this.property;
	}*/
}

SuperType.prototype.getSuperV1 = function() {
	return this.property;
}
function SubType() {
	this.subproperty = false;
}

SubType.prototype.getSubV = function() {
	return this.subproperty;
}
SubType.prototype.getSuperV = function() {
	return this.subproperty;
}
extend(SubType, SuperType);
//extendOther(SubType, SuperType);
var ins = new SubType();

 改写为：extendOther

 

	
function SuperType() {
	this.property = true;
	this.property1 = true;
	this.property2 = true;
	this.property3 = true;
	this.property4 = true;
	this.property5 = true;
	this.property6 = true;
	this.property7 = true;
	this.property8 = true;
	/*SuperType.prototype.getSuperV = function() {
		return this.property;
	}*/
}

SuperType.prototype.getSuperV1 = function() {
	return this.property;
}
function SubType() {
	this.subproperty = false;
}

SubType.prototype.getSubV = function() {
	return this.subproperty;
}
SubType.prototype.getSuperV = function() {
	return this.subproperty;
}
//extend(SubType, SuperType);
extendOther(SubType, SuperType);
var ins = new SubType();

 结果对比：

 

去掉如下代码的注释：

 

	SuperType.prototype.getSuperV = function() {
		return this.property;
	}

 

extend继承较extendOther继承改进之处：

它添加了一个空函数F，并将用它创建的一个对象实例插入原型链中。这样做可以避免创建超类的新实例，因为它可能会比较庞大，而且有时超累的构造函数有一些副作用，或者会执行一些需要进行大量计算的任务。

 

如果想在子类中直接调用超类中的方法，可以作如下改进：

 

//子类可以访问父类的方法
	subClass.superclass = superClass.prototype;
	if(superClass.prototype.constructor == Object.prototype.constructor) {
		superClass.prototype.constructor = superClass;
	}

 

 

实例1：用extend的场合：

 

function extend(subClass, superClass) {
	var F = function() {
	};
	F.prototype = superClass.prototype;
	subClass.prototype = new F();
	subClass.prototype.constructor = subClass;
	
	//子类可以访问父类的方法
	subClass.superclass = superClass.prototype;
	if(superClass.prototype.constructor == Object.prototype.constructor) {
		superClass.prototype.constructor = superClass;
	}
}
			
function SuperType() {
	this.property = true;
	this.property1 = true;
	this.property2 = true;
	this.property3 = true;
	this.property4 = true;
	this.property5 = true;
	this.property6 = true;
	this.property7 = true;
	this.property8 = true;
	SuperType.prototype.getSuperInner = function() {
		return "getSuperInner";
	}
	
}
SuperType.prototype.getSuperV = function() {
	return this.property;
}
SuperType.prototype.getSuperV1 = function() {
	return this.property;
}
function SubType() {
	//用来将SuperType的实例property~property8实例化到SubType的实例中
	SubType.superclass.constructor.call(this);
	this.subproperty = false;
}
extend(SubType, SuperType);

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

SubType.prototype.getName = function() {
 console.log("superType.property:"+SubType.superclass.getSuperV.call(this));
 console.log("subType.property:"+SubType.prototype.getSuperV.call(this));//console.log("subType.property:"+this.getSuperV());
 /*输出结果为：
  superType.property:true  
  subType.property:false */
};
var ins = new SubType();
ins.getName();

 

 实例2：用extendOther的场合

 

function extendOther(subClass, superClass) {
	subClass.prototype = new superClass();
	subClass.prototype.constructor = subClass;
	//子类可以访问父类的方法
	subClass.superclass = superClass.prototype;
	if(superClass.prototype.constructor == Object.prototype.constructor) {
		superClass.prototype.constructor = superClass;
	}
}
			
function SuperType() {
	this.property = true;
	this.property1 = true;
	this.property2 = true;
	this.property3 = true;
	this.property4 = true;
	this.property5 = true;
	this.property6 = true;
	this.property7 = true;
	this.property8 = true;
	SuperType.prototype.getSuperInner = function() {
		return "getSuperInner";
	}
	
}
SuperType.prototype.getSuperV = function() {
	return this.property;
}
SuperType.prototype.getSuperV1 = function() {
	return this.property;
}
function SubType() {
	//用来将SuperType的实例property~property8实例化到SubType的实例中
	//SubType.superclass.constructor.call(this);
	this.subproperty = false;
}
extendOther(SubType, SuperType);

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

SubType.prototype.getName = function() {
 console.log("superType.property:"+SubType.superclass.getSuperV.call(this));
 console.log("subType.property:"+SubType.prototype.getSuperV.call(this));//console.log("subType.property:"+this.getSuperV());
 /*输出结果为：
  superType.property:true  
  subType.property:false */
};
var ins = new SubType();
ins.getName();

 

 原型式继承

 

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

var SuperType = {
	property8 : ['a','b','c'],
	configure : function() {
		this.property = true;
		this.property1 = true;
		this.property2 = true;
		this.property3 = true;
		this.property4 = true;
		this.property5 = true;
		this.property6 = true;
		this.property7 = ['1','2','3'];
	},
	getSuperInner : function() {
		console.log(this);
		console.log("this.property7:"+this.property7);
		console.log("this.property8:"+this.property8);
		return this.property;
	}
}

var subType = clone(SuperType);
subType.configure();
subType.getSuperInner();
var subType1 = clone(SuperType);
subType1.configure();
subType1.getSuperInner();
subType.property7.push('4');
subType.property8.push('dfef');
subType.getSuperInner();
subType1.getSuperInner();

 运行结果

注意：

如果想设置property~property7的值需要调用configure方法。

property~property7属于F，即Clone后的对象

property8属于父对象。所以同时对property7和property8进行修改，输出结果的原理是不同的。

 

property8体现了原型式继承的优点：原型式继承更能节约内存。原型链读取成员的方式使所有克隆出来的对象共享每个属性和方法的唯一一份实例。只有在直接设置了某个克隆对象的属性和方法时，情况才会有所变化。详细内容请参考《javascript设计模式》第四章继承与封装

 

疑问：

《javascript设计模式》第四章继承与封装中提到：与原型式继承相比，在类式继承方式中创建的每一个对象在内存中都有自己的一套属性。可是从（类继承）的实例中，看到的意识共享属性啊，这是为什么呐？这句话有什么深切的含义？？？