web前端tips:js继承——借用构造函数继承

上篇文章给大家分享了 js继承中的原型链继承
在文章末尾,我提到了
原型链的继承,子类需要传递参数给父类的构造函数,就无法通过直接调用父类的构造函数来实现,需要通过中间的过程来传递参数
那这篇文章,也就能解决这个传参问题了。
借用构造函数继承
又叫经典继承,它通过在子类构造函数中调用父类构造函数来继承父类的属性和方法。
借用构造函数继承的核心思想是,在子类构造函数中使用call()或apply()方法调用父类构造函数,并将子类实例作为参数传递给父类构造函数。这样就能够在子类实例中创建父类的属性,并且每个子类实例都有它们自己的属性副本。
以下是借用构造函数继承的基本步骤:
- 定义父类构造函数,设置父类的属性和方法。
- 定义子类构造函数,使用Parent.call(this, ...)在子类中调用父类构造函数,并传递子类特有的参数。
- 在子类构造函数中定义子类的属性和方法。
//1 functionParent(name){ this.name=name this.arr=[1,2,3] } //2 functionChild(name,age){ //借用父类构造函数 Parent.call(this,name) this.age=age } //实例化 varchild=newChild('我是child',666) child.name//我是child child.arr//[1,2,3] child.age//666
通过以上步骤,我们就实现了简单的借用构造函数继承,也解决了原型链继承传参问题。
并且由于每个子类实例都有它们自己的属性副本,所以对属性修改是不会互相影响的:
varchild1=newChild('我是child1',111) varchild2=newChild('我是child2',222) child1.arr.push(4) child1.arr//[1,2,3,4] child2.arr//[1,2,3]
优点
- 子类实例具有独立的属性,不会共享父类实例的属性。
- 子类可以向父类构造函数传递参数。
缺点
- 无法继承父类原型链上的方法和属性,只能继承父类构造函数中的属性和方法。
functionParent(name){ this.arr=[1,2,3] } Parent.prototype.getArr=function(){ returnthis.arr } functionChild(){ //借用父类构造函数 Parent.call(this) } //实例化 varchild=newChild() child.getArr()//UncaughtTypeError:child.getArrisnotafunction
- 父类的方法无法复用,每个子类实例都会创建一份方法的副本。
需要注意的是,借用构造函数继承只是继承了父类构造函数中的属性和方法,并没有真正实现完全的继承。如果希望子类也能继承父类的原型链上的方法和属性,可以使用其他方式,如组合继承、寄生组合继承等。
结语
牵手 持续为你分享各类知识和软件 ,欢迎访问、关注、讨论 并留下你的小心心❤