【JavaScript】两种方法实现继承

JS继承-ES6-基于 class 实现继承

mdn 类

阮一峰 ES6-class

mdn-super

ES6中推出了class类,是用来创建对象的模板。

class可以看作是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class

核心语法:

MDN-类

// 定义类
class Person {// 实例属性namefood// 构造方法,类似于构造函数,new的时候会调用,内部的this就是实例化的对象constructor(name, food) {this.name = namethis.food = food}// 实例方法sayHi() {console.log(`你好,我叫${this.name},我喜欢吃${this.food}`)}
}
const p = new Person('小黑', '西蓝花')
p.sayHi()

总结:

class核心语法:

  1. 通过class 类名{}的形式来定义类
  2. 内部直接写实例属性,可以设置默认值
  3. 实例方法的添加方式为方法名(){}
  4. 构造函数通过constructor进行添加
  5. 通过new 类名()创建实例,会调用构造函数constructor
class Person{namefood='西兰花炒蛋'constructor(name){this.name=name}sayHi(){console.log('你好,我叫:',this.name)}
}

class 实现继承

  1. 子类通过 extends 继承父类
  2. 子类构造函数中通过 super 调用父类构造函数
// 在上一份代码的基础上继续编写下面代码
class Student extends Person {songconstructor(name, food, song) {// 子类构造函数使用this以前必须调用supersuper(name, food)this.song = song}// 添加方法sing() {console.log(`我叫${this.name},我喜欢唱${this.song}`)}
}
const s = new Student('李雷', '花菜', '孤勇者')
s.sayHi()
s.sing()

总结:

class实现继承

  1. 子类通过extends继承继承父类
  2. 子类如果需要重新定义构造函数,必须在内部通过super关键字调用父类的构造函数

class 私有属性,静态属性和方法

  1. 私有属性 / 方法
  2. 静态属性 / 方法
class Person {constructor(name) {this.name = name}// 通过#作为前缀添加的属性会变为私有// 私有属性#secret = '我有一个小秘密,就不告诉你'// 私有方法#say() {// 私有属性可以在console.log('私有的say方法')}info() {// 在类的内部可以访问私有属性调用私有方法console.log(this.#secret)this.#say()}// 通过 static定义静态属性/方法static staticMethod() {console.log('这是一个静态方法')console.log(this)}static info = '直立行走,双手双脚'
}const p = new Person('jack')
console.log(p)
// 外部无法访问 点语法访问直接报错,通过[]无法动态获取
console.log(p['#secret'])
p.info()
// 通过类访问静态属性/方法
Person.staticMethod()
console.log(Person.info)

总结:

class 语法补充

  1. class中私有属性/方法
    1. 定义和使用时需要使用关键字#
    2. 私有属性只能在类的内部使用,外部无法使用(代码中)
    3. Chrome的控制台中为了方便调试,可以直接访问
  2. class中静态属性/方法
    1. 定义和使用时需要使用关键字static
    2. 通过类访问
    3. 静态方法中的this是类

JS继承-ES5-基于原型和构造函数实现继承

ES5-寄生组合式继承

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

  • 组合式继承:借用构造函数,原型链
  • 寄生:父类的原型中,有子类的构造函数

其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。

核心步骤:

  1. 通过构造函数来继承属性
  2. 通过原型链来继承方法
// 继承原型函数
function inheritPrototype(son, parent){const prototype = object.create(parent.prototype)prototype.constructor = sonson.prototype = prototype
}// 父类构造函数
function Parent(name) {this.name = namethis.foods = ['西蓝花', '西葫芦', '西红柿']
}Parent.prototype.sayHi = function () {console.log(this.name, `我喜欢吃,${this.foods}`)
}// 子类借用父类的构造函数,将 this,name 参数传递给父类
function Son(name, age) {Parent.call(this, name)this.age = age
}
// 完成原型继承
inheritPrototype(Son,Parent)
// 可以继续在原型上添加属性/方法
Son.prototype.sayAge = function () {console.log('我的年龄是', this.age)
}const son1 = new Son('jack', 18)
const son2 = new Son('rose', 16)

总结:

ES5-寄生组合式继承

  1. 寄生组合式继承的核心步骤是:通过构造函数来继承属性,通过原型链来继承方法
  2. 寄生组合式继承和组合式继承的区别是:原型链的继承并没有调用父类的构造函数,而是直接基于父类的原型创建一个新副本实现继承

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/656454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【pytest系列】- assert断言的使用

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

【AI视野·今日Robot 机器人论文速览 第七十六期】Fri, 12 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Fri, 12 Jan 2024 Totally 12 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Topology-Driven Parallel Trajectory Optimization in Dynamic Environments Authors Oscar de Groot, Laura Ferranti, Dari…

WPOpenSocial实现WordPress的QQ登录

个人建站不可避免的需要自己搭建用户数据库的问题,可用户却往往因为注册繁琐而放弃浏览您的网站,由此可见,一个社交账号一键登录方式尤为重要。选择适合您网站需求的社交插件,可以提升用户互动,增加社交分享&#xff0…

分布式场景怎么Join

背景 最近在阅读查询优化器的论文,发现System R中对于Join操作的定义一般分为了两种,即嵌套循环、排序-合并联接。 考虑到我的领域是在处理分库分表或者其他的分区模式,这让我开始不由得联想我们怎么在分布式场景应用这个Join逻辑&#xff…

《Linux C编程实战》笔记:管道

从这节开始涉及进程间的通信,本节是管道。 管道是一种两个进程间进行单向通信的机制。因为管道传递数据的单向性,管道又称之为半双工管道。。管道的这一特点决定了其使用的局限性。 数据只能由一个进程流向另一个进程;如果要进行全双工通信…

计算机组成原理学习| Day1

学习目标: 博主介绍: 27dCnc 专题 : 计算机组成原理 👍👍👍👍👍👍👍👍👍👍👍👍 ☆*: .。. o(≧▽≦)o .&#x…

分享4款不能错过的修改照片尺寸的软件!

在当今这个数字化时代,照片已经成为我们分享生活、表达观点的重要方式。但是,你是否曾遇到过这样的问题:一张精美的照片因为尺寸不合适而无法在朋友圈中展现出最佳效果?不用担心,今天我们就来聊聊那些可以帮助你轻松修…

获取鼠标点击图片时候的坐标,以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求,需要对图片的固定几个位置分别做一个点击事件,响应不同的操作,如下图,需要点击红色区域,弹出不同的提示框: 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…

JVM-类的生命周期

类的生命周期概述 类的生命周期描述了一个类加载、使用、卸载的整个过程。整体可以分为: 加载 连接,其中又分为验证、准备、解析三个子阶段 初始化 使用 卸载 加载阶段 加载(Loading)阶段第一步是类加载器根据类的全限定名通过不同的渠道以二进制流的方…

【JavaScript】fetch

fetch Response Headers ajax&axios&fetch的关系: ajax:ajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。 axios:axios 是一个基于 Promise 的 HTTP 客户端,可以在浏览器和 Node…

STM32——中断系统和外部中断EXTI

一、中断 1.1中断系统 中断系统是管理和执行中断的逻辑结构; 1.2中断 系统在执行主程序过程中,出现了特定的触发条件(触发源),系统停止执行当前程序,转而去执行中断程序,执行完毕后&#xf…

什么是原型链?如何继承?

原型: 每个对象都可以有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。查找特定属性的时候,我们先去这个对象里去找,如果没有的话就去它的原型对象里面去,如果还是没…

OllyDebug的使用方法. IDA Pro分析程序的控制流图,可以找到不同的函数入口点. 在汇编代码中定位特定函数可能是一个耗时且复杂的过程

实战 “OllyDbg” 是一个流行的Windows平台上的汇编级调试器,用于调试和分析二进制程序,尤其是用于逆向工程目的。使用OllyDbg的基本步骤如下: 安装和打开OllyDbg:首先,您需要在您的计算机上安装OllyDbg。完成安装后&…

HCIA学习作业五

拓扑图: PC端 PC1>ipconfig PC2>ipconfig PC3>ipconfig PC4>ipconfig PC>ping PC1>ping 192.168.1.125 PC1>ping 192.168.1.254 PC1>ping 192.168.1.253 PC2>ping 192.168.1.125 PC2>ping 192.168.1.253 PC3>ping 192.168.1.126…

java程序员怎么完善自己各个方面的能力?

java程序员怎么完善自己各个方面的能力? 在开始前我分享下我的经历,刚入行时遇到一个好公司和师父,给了我机会,两年时间从3k薪资涨到18k的, 我师父给了一些java学习方法和资料,让我不断提升自己,感谢帮助…

Python计算机二级/Python期末考试 刷题(一)

收集了一些经典Python计算机二级和Python期末考试题库 整理不易,大家点赞收藏支持一下 祝大家计算机二级和期末考试都高分过 目录 一、填空 二、选择 三、程序设计 一、填空 1.序列元素的编号称为索引,索引值从【1】开始,访问序列元素时将…

vue 使用 v-viewer 用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。

作者连接 npm: npm install v-viewerlegacy viewerjs main.js 引入: // 引入Viewer插件 import VueViewer, { directive as viewerDirective } from v-viewer; // 引入Viewer插件的图片预览器的样式 import viewerjs/dist/viewer.css; // 使用Viewer图片…

Pull模式和Push模式

Pull模式是一种消息消费模式,其中客户端主动从服务端拉取数据。 优点:客户端可以根据自己的消费能力来消费数据,不存在消息堆积的情况。 缺点:消息处理可能不及时,可能存在大量无效请求,客户端需要考虑拉取…

python对图片或文件的操作

一. base64 与图片的相互转换 1. base64 转图片 import base64 from io import BytesIO from PIL import Image# base64 编码的图像数据(示例) base64_data "iVBn9DHASKJDjDsdSADSf8lgg"# 将 base64 编码的字符串解码为二进制数据 binary_d…

不同的强化学习模型适配与金融二级市场的功能性建议

DQN ES DDPG A2C TD3 SAC QMIX MADDPG PPO CQL IMPALA 哪个模型适合进行股票操作 在考虑使用哪种模型进行股票操作时,需要考虑模型的特点、适用场景以及实现复杂度等因素。以下是对您列出的几种强化学习模型的简要概述,以帮助您做出选择: DQ…