涉及面试题:

  • 原型如何实现继承?
  • Class 如何实现继承?
  • Class 本质是什么?

⾸先先来讲下 class ,其实在 JS 中并不存在类, class 只是语法糖,本质还是函数。

  class Person {}
Person instanceof Function // true

组合继承 --- 组合继承是最常⽤的继承⽅式。

  function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
  • 以上继承的⽅式核⼼是在⼦类的构造函数中通过 Parent.call(this) 继承⽗类的属性, 然后改变⼦类的原型为 new Parent() 来继承⽗类的函数。
  • 这种继承⽅式优点在于构造函数可以传参,不会与⽗类引⽤属性共享,可以复⽤⽗类的函数,
  • 但是也存在⼀个缺点就是在继承⽗类函数的时候调⽤了⽗类构造函数,导致⼦类的原型上多了不需要的⽗类属性,存在内存上的浪费。

寄⽣组合继承 --- 这种继承⽅式对组合继承进⾏了优化,组合继承缺点在于继承⽗类函数时调用了构造函数,我们只需要优化掉这点就⾏了。

      function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
configurable: true
}
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
  • 以上继承实现的核心就是将⽗类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的⽗类属性问题,还能正确的找到子类的构造函数。

Class 继承 --- 以上两种继承方式都是通过原型去解决的,在 ES6 中,我们可以使⽤ class 去实现继承,并且实现起来很简单。

            class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
} class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true
  • class 实现继承的核心在于使用 extends 表明继承⾃哪个⽗类,并且在子类构造函数中必须调⽤ super ,

    因为这段代码可以看成 Parent.call(this, value) 。

原型继承和 Class 继承的更多相关文章

  1. javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  2. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  3. HTML5学习笔记(十六):原型、类和继承【JS核心知识点】

    理解原型 在JavaScript中,只要声明了一个函数,就会为该函数创建一个名为prototype的属性,该属性指向当前函数的原型对象. 而函数的原型对象有一个constructor属性,该属性指向刚 ...

  4. javascript精髓篇之原型链维护和继承.

    一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...

  5. 明白JavaScript原型链和JavaScrip继承

    原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...

  6. JS高级. 03 混入式继承/原型继承/经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链

    继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...

  7. JavaScript ES5类 原型 原型链 组合、原型、寄生式继承

    ES5类 原型  原型链 继承 JavaScript中,原型是相对于构造函数(类)的叫法(或者说概念),原型链是相对于构造函数(类)的实例对象的叫法. 对于JavaScript对象,如果在对象自身上找 ...

  8. c++ 接口继承和实现继承

    所谓接口继承,就是派生类只继承函数的接口,也就是声明:而实现继承,就是派生类同时继承函数的接口和实现. 我们都很清楚C++中有几个基本的概念,虚函数.纯虚函数.非虚函数. 虚函数: 虚函数是指一个类中 ...

  9. 深入浅出javascript(十二)继承——构造函数继承和组合继承

    #题记: 有一水果类,抽象出属性包括:name(水果品种),price(价格),id(ID号).现有两个子类,分别为苹果,桔子,希望继承水果父类. 一.构造函数继承 构造函数继承相当把父类的属性在子类 ...

  10. JavaScript 继承——三种继承方法及其优劣

    原文地址   本文内容 目的 继承的第一步--最简单的继承 私有变量/成员和原型 三种继承方式及其优劣 基本的原型继承 Yahoo JavaScript 模块模式 创建闭包的构造函数 三种方法的代码执 ...

随机推荐

  1. Word技巧:ALT+X快捷键

    Word技巧:ALT+X快捷键 在Word中输入数字,然后使用键盘快捷键「ALT + X」,即可快速生成一个文字图形. 部分数字的对比参照: 2564 ╤ 2582 ▂ 2600 2618 ☘ 256 ...

  2. js获取当前日期的前七天,月份+日(数组)

    1.定义一个空对象. let dayArr = []: 2.时间格式化  function formatterDate(date,fmt){     let nowDate = {       yyy ...

  3. 狐漠漠养成日记 Cp.00001 开始养成计划

    开始养成计划 今天是我开始这个"狐漠漠养成计划"的第一天(划掉). 看来是昨天出门前忘记保存了,昨天写的几百字内容全都没有了,今天其实已经是计划开始的第二天了. 因为昨天晚上出去喝 ...

  4. uniapp中使用echarts点击图例与tooltips无反应

    只需要在项目main.js文件中加上 window.wx = {} // echarts中tooltips点击无反应与点击图例无反应解决方法 即可

  5. PLC入门笔记4

    逻辑指令及其应用 基本逻辑指令 续电器 PLC 公式 扩展逻辑指令 1.置位和复位线圈 置位ON/复位OFF (SET/RST) 不推荐置位复位线圈  可以用更好的方式去表达.. 2.能流取反开关 取 ...

  6. shell脚本基本介绍

    1.编程介绍 驱动 硬件默认是不能使用的 CPU控制硬件.不同的厂家硬件设备之间需要进行指令沟通,我们需要驱动程序来进行"翻译": 更趋近与开发的工程师,要学习"汇编语言 ...

  7. 使用idea从零编写SpringCloud项目-zuul

    带着问题学习是最好的,什么是网关?使用网关的好处是什么?怎么使用网关 网关:是系统对外的唯一入口,是介于客户端和服务端的中间层,处理非业务功能,提供路由的请求,鉴权,监控,缓存,限流等 网关的好处:可 ...

  8. Jmeter检查点

    一.Response Assertion(响应断言) 1. 添加响应断言 对Web请求的响应结果进行验证,Response Assertion配置参数 2. 输入需要匹配的字符串 此处对于访问Baid ...

  9. 9.15 2020 实验 2:Mininet 实验——拓扑的命令脚本生成

    一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写   二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. ...

  10. 持续集成环境(4)-Jenkins凭证管理

    凭据可以用来存储需要密文保护的数据库密码.Gitlab密码信息.Docker私有仓库密码等,以便 Jenkins可以和这些第三方的应用进行交互. 安装Credentials Binding插件 要在J ...