JS_继承

最新推荐文章于 2025-09-18 20:48:32 发布

原创最新推荐文章于 2025-09-18 20:48:32 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

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);