JavaScript面向对象之继承

1.      原型链继承:

function SuperType(){
	this.property = true;
}

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

function SubType(){
	this.subproperty = false;
}

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

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

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

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

问题1.包含引用类型值的原型。

问题2.不能像超类型的构造方法传参。

2. 借用构造函数(constructor stealing)(伪造对象或经典继承)

(1)无参:

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

function SubType(){
	SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);
	
var instance2 = new SubType();
var instance3 = new SuperType();
alert(instance3.colors);
(2)传参:

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

function SubType(){
	SuperType.call(this,"zhangsan");
	this.age = 20;
}

var instance1 = new SubType();

alert(instance1.name);  //zhangsan
alert(instance1.age);  //20

var instance2 = new SuperType();
alert(instance2.name);  //undefined
alert(instance2.age);  //undefined

问题:方法在构造函数中定义,无法复用。

3.组合继承(combination inheritance)(伪经典继承)

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

//继承方法
SubType.prototype = new SuperType();

SubType.prototype.sayAge = function(){
	alert(this.age);
}

var instance1 = new SubType("zhangsan",20);
instance1.colors.push("black");

alert(instance1.colors);    // red,blue,green,black
instance1.sayName();  //zhangsan
instance1.sayAge();   // 20

var instance2 = new SubType("lisi",30);
alert(instance2.colors);  // red,blue,green
instance2.sayName();  //lisi
instance2.sayAge();  // 30
4.  原型式继承(Prototypal inheritance)
function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

var person = {
	name:"zhangsan",
	friends :["guojing","huangrong"]
};

var anotherPerson = object(person);
anotherPerson.name = "lisi";
anotherPerson.friends.push("zhoubotong");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "wangwu";
yetAnotherPerson.friends.push("yidengdashi");

alert(person.friends);  //  guojing,huangrong,zhoubotong,yidengdashi
5.寄生式继承(parasitic)
function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

function createAnother(original){
	var clone = object(original);
	clone.sayHi = function(){
		alert("hello");
	};
	return clone;
}

var person = {
	name:"zhangsan",
	friends :["guojing","huangrong"]
};

var anotherPerson = createAnother(person);
//anotherPerson.sayHi();  //hello
anotherPerson.name = "lisi";
anotherPerson.friends.push("zhoubotong");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "wangwu";
yetAnotherPerson.friends.push("yidengdashi");

alert(person.friends);  //  guojing,huangrong,zhoubotong,yidengdashi
alert(anotherPerson.friends);  //  guojing,huangrong,zhoubotong,yidengdashi
alert(yetAnotherPerson.friends);  //  guojing,huangrong,zhoubotong,yidengdashi
6.寄生组合式继承
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);
}

var instance = new SubType("zhangsan",30);
alert(instance.name);  //zhangsan
instance.sayName();  //zhangsan	
instance.sayAge();   // 30




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值