文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

为什么你老是讲不清楚js的继承模式

2024-12-24 15:42

关注

相信很多人在遇到面试中都遇到过被问到过JavaScript继承模式的问题,都能手写出几种继承模式的代码例子,但为什么面试官却对你的回答不是很满意或者压根就没听懂,个人觉得应该是缺少自己的一个答题的思路。

二、答题技巧

    第一,按照几种继承模式的从最次的继承模式到最佳的继承模式的顺序去讲

    第二,讲出当前这种继承模式的利弊,相对前一种继承模式解决了什么问题,最关键的代码部分在哪里

以下着重讲一下几种常见的几种继承模式

二、原型链继承

代码示例 

  1. function Parent (sex) {  
  2.     this.sex = sex  
  3.  
  4. Parent.prototype.setSex = function () {}  
  5. function Son (name) {  
  6.     this.name = name  
  7.  
  8. Son.prototype = new Parent()  
  9. var s1 = new Son('DBCDouble')  
  10. console.log(s1) 

结果打印

关键:把子类的原型指向父类的实例,从而继承父类的私有属性和原型属性

优点:

缺点:

四、借用父类构造函数继承

代码示例 

  1. function Parent (sex) {  
  2.     this.sex = sex  
  3.  
  4. Parent.prototype.setSex = function () {}  
  5. function Son (name, age, sex) {  
  6.     Parent.call(this, sex)  
  7.     this.name = name  
  8.     this.age = age  
  9.  
  10. var s1 = new Son('DBCdouble', 25, '男')  
  11. console.log(s1) 

结果打印

关键:在子类构造函数中使用call或者apply调用父类构造函数实现父类私有属性继承(函数复用)

优点:

缺点:

五、组合式继承(原型链继承 + 借用构造函数继承)

代码示例 

  1. function Parent (sex) {  
  2.     this.sex = sex  
  3.  
  4. Parent.prototype.setSex = function () {}  
  5. function Son (name, age, sex) {  
  6.     Parent.call(this, sex)  
  7.     this.name = name  
  8.     this.age = age  
  9.  
  10. Son.prototype = Object.create(Parent.prototype)  
  11. SonSon.prototype.constructor = Son  
  12. var s1 = new Son('DBCdouble', 25, '男')  
  13. console.log(s1) 

打印结果

关键:通过调用父类构造函数,继承父类的属性并保留传参的优点,并通过Object.create(Parent.prototype)来创建继承了父类原型属性的对象,并把这个对象赋给子类的原型,这样的话,既能保证父类构造函数不用执行两次,又能让子类能继承到父类的原型方法

优点:

六、ES6的class继承

ES6中引入了class关键字,class可以通过extends关键字实现继承,还可以通过static关键字定义类的静态方法,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

注意:ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。

代码示例 

  1. class A {  
  2.   constructor (sex) {  
  3.     this.sex = sex  
  4.   }  
  5.   showSex () {  
  6.     console.log('这里是父类的方法')  
  7.   }  
  8.  
  9. class B extends A {  
  10.   constructor (name, age, sex) {  
  11.     super(sex);  
  12.     this.name = name;  
  13.     this.age = age;  
  14.   }  
  15.   showSex () { 
  16.      console.log('这里是子类的方法')  
  17.   }  
  18.  
  19. const b = new B('DBCDOUBLE', 25, '男')  
  20. console.log(b); 

打印结果

关键:使用extends关键字继承父类的原型属性,调用super来继承父类的实例属性,且保留向父类构造函数传参的优点

优点:简单易用,不用自己来修改原型链来完成继承

我们通过将代码从ES6编译到ES5来看看到底,class继承的代码最终会被编译成什么样,如下:

从上图分析得到:

再看经过编译后的extends方法,如下

    1、注意Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或 null。

    2、(.prototype = b.prototype, new ())表达式的执行执行顺序是先执行前者,再返回后者

从上图可知,extends做了以下几件事:

 

来源:前端教程内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯