`

JS_继承

 
阅读更多

 1、原型链,假如我们让原型对象指向另一个类型的实例,此时,原型对象包含指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型有事另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。

function SuperType() {
	this.property = true;
}
SuperType.prototype.getSuperValue = function() {
	return this.property;
}
function SubType() {
	this.subProperty = true;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
	return this.subProperty;
}
var instance = new SubType();
document.write("instance.getSuperValue(): " + instance.getSuperValue());
document.write("<br>");
document.write("instance instanceof Object: " + (instance instanceof Object));
document.write("<br>");
document.write("instance instanceof SuperType: " + (instance instanceof SuperType));
document.write("<br>");
document.write("instance instanceof SubType: " + (instance instanceof SubType));
document.write("<br>");
document.write("Object.prototype.isPrototypeOf(instance): " + Object.prototype.isPrototypeOf(instance));
document.write("<br>");
document.write("SuperType.prototype.isPrototypeOf(instance): " + SuperType.prototype.isPrototypeOf(instance));
document.write("<br>");
document.write("SubType.prototype.isPrototypeOf(instance): " + SubType.prototype.isPrototypeOf(instance));
document.write("<br>");
//isPrototypeOf,只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。

 instance的prototype 指向了subType的原型,subType原型的prototype指向了SuperType的原型。此时的SubType.prototype.constructor实际是SuperType.prototype.constructor指针指向的对象即SuperType。instance.getSuperValue()会经过三个步骤:1)搜索instance实例2)搜索subType.prototype 3)搜索SuperType.prototype

 2、借用构造函数

function SuperType(name) {
	this.name = name;
}
function SubType(age) {
	SuperType.call(this, "zhangsan")
	this.age = age;
}
var instance = new SubType(12);
console.log("instance: ", instance);

 问题:1)代码复用性低2)在超类的原型中定义的方法在子类中不可见

 3、组合继承

function SuperType(name) {
	this.name = name;
}
SuperType.prototype.getSuperValue = function() {
	return this.name;
}
function SubType(age) {
	SuperType.call(this, "zhangsan")
	this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
	return this.age;
}
var instance = new SubType(12);
console.log("instance: ", instance);

 4、原型式eg.

function object(obj) {
	function F() {
	}
	F.prototype = obj;
	return new F();
}
var person = {
	name : "zhang",
	friends : [ "li" ]
};
// var p1 = object(person);
var p1 = Object.create(person, {
	address : {
		value : "beijing"
	}
});
p1.friends.push("shen");
console.log("p1: ", p1);
console.log("p1.friends: ", p1.friends);
var p2 = object(person);
p2.friends.push("shi");
console.log("p2.friends: ", p2.friends);

5、寄生组合式继承,eg.

function object(obj) {
	function F() {
	}
	F.prototype = obj;
	return new F();
}
function inheritPrototype(supType, subType) {
	var prototype = object(supType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
}
function SupType(name) {
	this.name = name
	friends = [ "li" ]
};
SupType.prototype.getSuperValue = function() {
	return this.name;
}
function SubType(name, age) {
	SupType.call(this, name);
	this.age = age;
};
inheritPrototype(SupType, SubType)
SubType.prototype.getSubValue = function() {
	return this.age;
}
var sub = new SubType();
console.log("sub: ", sub);

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics