js继承的几个方式

JS继承六种方式精讲

参考:js继承的6种方式 - ranyonsue - 博客园

一、原型链继承:

如图所示:父类是Person(继承谁,继承谁的属性)

function Person(name){ //这个构造函数里面定义了一个name 和一个 sum()
	this.name = name
	this.sum = function(){
	alert(this.name)
	}
}

 再定义一个构造函数Son:

function Son(){
	this.name = 'ker'
}

 再使得Son的原型指向Person的实例对象:

Son.prototype = new Person()

再在Person这个构造函数的原型上定义age变量:

Person.prototype.age = 10

此时,如果实例化Son得到son1,那么son1.age是存在的,就是Person.prototype的值:

var son1 = new Son()
console.log(son1.age)//输出为10

再用instanceof判断一下son1是否在Person的原型链上:

console.log(son1 instanceof Person)//输出为true

这个过程就是原型链继承,缺点是:

1.新实例无法向父类构造函数传参

2.一旦一个新实例修改了原型上的属性,另一个实例的原型属性也会被改变。

二、借用构造函数继承

 

首先父类还是Person,并且在Person的原型上定义了age变量:

function Person(name){ //这个构造函数里面定义了一个name 和一个 sum()
	this.name = name
	this.sum = function(){
	alert(this.name)
	}
}
Person.prototype.age = 10

再定义另一个新的构造函数Son2,在内部使用A.call(B,x,y)(就是把A的函数放到B中运行,x 和 y 是A方法的参数):

function Son2(){
	Person.call(this,'jer')//A.call(B,x,y):就是把A的函数放到B中运行
	this.age = 12          //用call来实现继承,用this可以继承Person中的所有方法和属性
			}

此时可以实例化Son2,查看它的name,age:

var son2 = new Son2()
console.log(son2.name)//'jer'
console.log(son2.age)//12而不是10,思考为什么

son2并不是Person原型链上的元素:

console.log(son2 instanceof Person)//false,说明con1不是Person原型链上的

这个过程就是借用构造函数继承,优点是:

1.可以继承多个构造函数属性(call多个)

缺点是:

1.只能继承父类构造函数的属性

2.每个新实例都有父类构造函数的副本,臃肿。

三、组合继承

 还是先定义一个父类Person:

function Person(name){ //这个构造函数里面定义了一个name 和一个 sum()
	this.name = name
	this.sum = function(){
	    alert(this.name)
	}
}
Person.prototype.age = 10

再定义一个新的构造函数Son3,里面用call()方法继承Person的所有方法和属性:

function Son3(name){
	Person.call(this,name)
}

再将Son3的原型指向Person的构造函数,形成原型链:

Son3.prototype = new Person()

再实例化Son3,查看name,age的值:

var son3 = new Son3('gar')
console.log(son3.name)//gar
console.log(son3.age)//10

Son3也是Person原型链上的:

console.log(son3 instanceof Person)//true

四、原型式继承

先定义一个函数content,在里面定义一个构造函数Son4:

function content(obj){
	function Son4(){}
	Son4.prototype = obj
	return new Son4()
}
var person = new Person()
var son4 = content(person)//输出的是Son4的实例对象,这个实例对象的_proto_是person
console.log(son4.age)//10

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值