为了账号安全,请及时绑定邮箱和手机立即绑定

js继承方式有哪些?(js如何实现类继承)

标签:
Java JavaScript

继承是为了子类可以使用父类的所有功能,并且能对这些功能进行扩展。

1. 构造函数继承(call&apply)

说明:直接利用call或者apply方法将父类构造函数的this绑定为子类构造函数的this就可以;
缺点:无法继承原型链上的属性与方法;

function Parent1() {  this.name = 'parent1'}
Parent1.prototype.say = function () {	console.log(this.name)
}function Child1() {
  Parent1.call(this)  //构造函数继承核心代码
  this.type = 'child1'}let child1_1 = new Child1()console.log(child1_1.name) // parent1console.log(child1_1.say()) // child1_1.say is not a function复制代码

https://img1.sycdn.imooc.com//5fb73aea000160e002910093.jpg

2. 原型继承

说明:将子类的原型挂载到父类上;
缺点:子类new出来的实例,父类的属性没有隔离,会相互影响;

function Parent2() {  this.name = 'parent2'
  this.arr = [1, 2, 3]
}
Parent2.prototype.say = function () {	console.log(this.name)
}function Child2() {  this.type = 'child2'}
Child2.prototype = new Parent2() //原型继承核心代码let child2_1 = new Child2()let child2_2 = new Child2()console.log(child2_1.name) // parent2console.log(child2_1.say()) // parent2child2_1.arr.push(4)console.log(child2_1.arr, child2_2.arr) // [1, 2, 3, 4]  [1, 2, 3, 4]复制代码

https://img1.sycdn.imooc.com//5fb73aeb0001001902290150.jpg

3. 组合继承

说明:组合上面的构造函数与原型继承的功能;
缺点:call()方法已经拿到父类所有的属性 ,后面再使用原型时也会有父类所有属性;

function Parent3() {  this.name = 'parent3'
  this.arr = [1, 2, 3]
}
Parent3.prototype.say = function () {	console.log(this.name)
}function Child3() {
  Parent3.call(this)  this.type = 'child3'}
Child3.prototype = new Parent3()let child3_1 = new Child3()let child3_2 = new Child3()

child3_1.arr.push(4)console.log(child3_1.arr, child3_2.arr) //  [1, 2, 3, 4]  [1, 2, 3]// 缺点是 Parent3执行了两次,child3中有重复属性复制代码

https://img1.sycdn.imooc.com//5fb73aeb00015acf03990134.jpg

4. 寄生组合继承

说明:解决组合继承重复属性的问题,直接将子类的原型等于父类的原型,或者是用Object.create继承原型但不执行父类构造函数;
注意处理子类实例的 constructor 指向问题,new Parent2()也有这个问题;

function Parent4() {  this.name = 'parent4'
  this.arr = [1, 2, 3]
}
Parent4.prototype.say = function () {	console.log(this.name)
}function Child4() {
  Parent4.call(this)  this.type = 'child4'}//子类的原型等于父类的原型Child4.prototype = Parent4.prototype  
//或 Child4.prototype = Object.create(Parent4.prototype)//修复重写子类原型导致子类constructor属性被修改Child4.prototype.constructor = Child4let child4_1 = new Child4()let child4_2 = new Child4()
child4_1.arr.push(4)console.log(child4_1.arr, child4_2.arr) // [1, 2, 3, 4]  [1, 2, 3]console.log(child4_1.constructor === Child4) // true console.log(child4_1.constructor === Parent4)// false// 这里的Child4就是一个继承自Function的函数对象console.log(Child4.constructor === Parent4) // false复制代码

https://img1.sycdn.imooc.com//5fb73aeb0001fb6204010134.jpg

5. Class继承

说明:ES6新增,class是一个语法糖就是基于寄生组合继承来实现的;

class Parent5{	constructor(){  	this.name = 'Parent5'
    this.arr = [1, 2, 3]
  }  say(){  	console.log(this.name)
  }
}class Child5 extends Parent5{   constructor(){    super() //通过super()调用父类构造函数
    this.type="Child5"
  }
}let child5_1 = new Child5()let child5_2 = new Child5()
child5_1.arr.push(4)console.log(child5_1.say()) // Parent5console.log(child5_1.arr, child5_2.arr) // [1, 2, 3, 4]  [1, 2, 3]console.log(child5_1.constructor === Child5) // true console.log(child5_2.constructor === Parent5) // false复制代码

https://img1.sycdn.imooc.com//5fb73aeb0001587003940126.jpg

1.ES6里Class的Extends继承原理
寄生组合式继承原理:

1.使用借用构造函数(call)来继承父类this声明的属性/方法
2.通过寄生式封装函数设置父类prototype为子类prototype的原型来继承父类的prototype声明的属性/方法
2. 《你不知道的JS》上卷 A.1
class 很好地伪装成 JavaScript 中类和继承设计模式的解决方案,但是它实际上起到了反作用:它隐藏了许多问题并且带来了更多更细小但是危险的问题。

es6继承

代码量少,易懂

//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

ES5继承和ES6继承的区别

es5继承首先是在子类中创建自己的this指向,最后将方法添加到this中

Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)

es6继承是使用关键字先创建父类的实例对象this,最后在子类class中修改this


补充:constructor的作用

constructor属性不影响任何JavaScript的内部属性。instanceof检测对象的原型链,通常你是无法修改的(不过某些引擎通过私有的__proto__属性暴露出来)。
constructor其实没有什么用处,只是JavaScript语言设计的历史遗留物。由于constructor属性是可以变更的,所以未必真的指向对象的构造函数,只是一个提示。不过,从编程习惯上,我们应该尽量让对象的constructor指向其构造函数,以维持这个惯例。

补充:new与Object.create()区别

  • new创建一个对象,执行构造函数。

  • Object.create相当于创建一个对象,但是不执行构造函数。

function Parent(){	this.name="Parent"}
Parent.prototype.age = '18'let child_new = new Parent()let child_create = Object.create(Parent.prototype)console.log(child_new instanceof Parent) // trueconsole.log(child_create instanceof Parent) // trueconsole.log(child_new.name,child_new.age) // Parent 18console.log(child_create.name,child_create.age) // undefined "18"//简单模拟下 Object.create 如下:function create(obj) {  let F = function () {}
  F.prototype = obj  return new F()
}




点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消