JavaScript 继承模式
原型链继承
我们知道在JavaScript中,对象的继承时依靠原型来进行,那么原型到底是如何进行继承的呢?
如果有关原型的内部不是很清楚的,可以看一下https://blog.csdn.net/weixin_45845042/article/details/106121200
现在让我们来看一下,JavaScript中原型到底是如何进行继承的
function Sub(name,age) {
this.name = name;
this.age =age ;
}
function Supper(price) {
this.price =price;
}
var sub = new Sub("小明",3);
var supper = new Supper("150000");
首先我们利用构造函数定义一个sub对象,和supper对象,他们在堆栈中的情况如图:
从图中,我们可以得到两条已有的原型链:
原型链:
-
sub->Sub原型->Object原型
-
supper->Supper原型->Object原型
我们要实现的目标是sub继承supper,那么我们目标的原型链是:
sub-》supper对象-》Supper原型-》Object原型
一句话来概况原型链继承:
子类的构造函数的显示原型为父类的实例对象
Sub.prototype = new Supper(15000);
这里我认为的核心是:一个类的属性,来源于原型,原型相当于一个对象的模板,往往这个模板是Object,这里如果想要实现继承,其实就是拿一个新的模板去替换原理的模板
这里有学过Java的:可以这么翻译:
public class Sub extends Supper {
}
这里是继承了父类的方法,如果我们想要在父类的基础上,来丰富子类,只需要在原型空间中继续书写子类的属性或者方法
Sub.prototype.setName = function setName(name){
this.name = name;
}
翻译成Java语言就是在Sub类中继续书写内容,这里就不加赘述了
细心的可能会发现一个问题:那就是Constructor属性,这个属性存在于原型空间中,指向构造器,在上述的图中,Constructor属性指向Supper构造函数,这显然是不合理,因此我们应该加以修正
Sub.prototype.constructor = Sub;
借用构造函数继承
上述的原型链常常是用来实现子类继承父类的方法,而在实际使用时,我们通常会选择使用构造函数来实现子类继承父类的属性,但是这种继承并没有涉及到原型链,并不是真正意义上的继承
function Supper(price) {
this.price =price;
}
function Sub(name,age) {
Supper.call(this,15000);
this.name = name;
this.age =age ;
}
我们利用构造函数可以很轻松的实现子类继承父类的属性
组合继承
在实际使用,我们会采用构造函数继承+原型链继承的组合继承方法,来实现子类继承父类
//定义父类的构造函数
function Supper(price) {
this.price =price;
}
//父类的方法写在原型空间中
Supper.prototype.SpeakSupper= function () {
console.log("Supper");
}
//子类的构造函数中继承父类的属性
function Sub(name,age) {
Supper.call(this,15000);
this.name = name;
this.age =age ;
}
//子类原型链继承父类
Sub.prototype = new Supper();//这里不需要传递参数,我们只需要继承父类的方法
//定义子类的方法
Sub.prototype.SpeakSub = function () {
console.log("Sub");
}
//创建子类对象
var sub = new Sub("小明",3);
sub.SpeakSub();//Sub
sub.SpeakSupper();//Supper
我们总结一下组合继承: