【ES6】—类与继承

在这里插入图片描述

一、 定义类

class People {constructor (name, age) {this.name = namethis.age = age}showName () {console.log(this.name)}
}
let p1  = new People('xiaoxiao', 30)
console.log(p1)
// People {name: 'xiaoxiao', age: 30}

小节:

  1. 使用class关键字声明类
  2. 使用constructor 构造器声明动态属性
  3. 在类的第一层级声明动态方法

二、 继承类的动态属性和方法

class People {constructor (name, age) {this.name = namethis.age = age}showName () {console.log(this.name)}
}
let p1  = new People('xiaoxiao', 30)
console.log(p1)
// People {name: 'xiaoxiao', age: 30}class Coder extends People {constructor (name, age, company) {super(name, age) // 继承属性this.company = company // 当前类自有属性}showCompany () {console.log(this.company)}
}
let c1 = new Coder('xiaoxiao', 18, '小米')
console.log(c1)
c1.showName()
c1.showCompany()

小节:
继承类的声明: class + 子类名 + extends + 父类名
动态属性接收继承:construtor + super (需要被继承的属性)
动态方法的继承: 根据子类继承父类自动继承
子类调用父类的动态方法: 实例. 方法名

三、顶层属性设置与获取

class People {constructor (name, age){this.name = namethis.age = agethis._sex = -1 // 0 : 男, 1: 女}get sex () {if (this._sex === 0) {return '男'} else if (this._sex === 1) {return '女'} else {return 'error'}}set sex (value) {if (value === 0 || value === 1) {this._sex = value}}
}
let p1 = new People ('xiaoxiao', 18)
p1.sex = 1
console.log(p1.sex)class Coder extends People {constructor (name, age, company) {super(name, age) // 继承属性this.company = company // 当前类自有属性}showCompany () {console.log(this.company)}
}
let c1 = new Coder('张三',20, '腾讯')
c1.sex = 0
console.log(c1.sex)

小节:

  1. 顶层属性通过 中间值声明变量、设置变量、获取变量来实现
  2. 顶层属性和构造函数的属性区别在于,顶层属性可以处理业务逻辑,并在类里面的第一层; 构造函数属性无法处理业务逻辑,并在构造器里面的第一层
  3. 顶层属性会自动被子类继承,构造函数的属性,需要手动使用super 关键字接收继承

四、静态方法和静态属性

1.静态方法

class People {constuctor (name, age) {this.name = namethis.age = age}static say () {return '你好'}
}
let p1 = new People ('xiaoxiao', 18)
console.log(People.say())
// 你好
class Coder extends People {constructor (name, age, company) {super(name, age) // 继承属性this.company = company // 当前类自有属性}showCompany () {console.log(this.company)}
}
console.log(Coder.say())
// 你好

小节:
静态方法声明:再类第一个层级使用static关键字声明
静态方法调用:使用类名.方法名 调用
子类自动继承父类的静态方法,使用子类名.方法名调用

2. 静态属性

class People {constuctor (name, age) {this.name = namethis.age = age}
}
People.count = 1
console.log('父类静态属性', People.count)
class Coder extends People {constructor (name, age, company) {super(name, age) // 继承属性this.company = company // 当前类自有属性}showCompany () {console.log(this.company)}
}
console.log('子类继承父类的静态属性', Coder.count)

小节:
静态属性声明:类名.属性名 = 值
静态属性调用: 类名.属性名
子类继承父类: class 子类名 extends 父类名
子类调用继承静态属性: 子类.属性名

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

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

相关文章

linux离线安装rdbtools,需先安装python

离线安装python3 下载python包,下载地址:https://www.python.org/ftp/python/ 我选的是https://www.python.org/ftp/python/3.9.0/Python-3.9.0.tgz 将文件上传至linux服务器,解压 tar -xf Python-3.9.0.tgz cd Python-3.9.0 mkdir /usr/l…

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测

时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测 目录 时序预测 | MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-BiGRU时间卷积双向门控循环单元时间序列预测&a…

XSS漏洞及复现

一、什么是XSS 跨站脚本( Cross-site Scripting )攻击,攻击者通过网站输入框输入payload(脚本代码 ),当用户访问网页时,恶意payload自动加载并执行,以达到攻击者目的( 窃取cookie、恶意传播、钓鱼欺骗等)为了避免与HTML语言中的C…

沉浸式VR虚拟实景样板间降低了看房购房的难度

720 全景是一种以全景视角为特点的虚拟现实展示方式,它通过全景图像和虚拟现实技术,将用户带入一个仿佛置身其中的沉浸式体验中。720 全景可以应用于旅游、房地产、展览等多个领域,为用户提供更为直观、真实的体验。 在房地产领域&#xff0c…

深入了解Docker镜像操作

Docker是一种流行的容器化平台,它允许开发者将应用程序及其依赖项打包成容器,以便在不同环境中轻松部署和运行。在Docker中,镜像是构建容器的基础,有些家人们可能在服务器上对docker镜像的操作命令不是很熟悉,本文将深…

ssm园区停车管理系统源码和论文

ssm园区停车管理系统源码和论文104 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm 摘 要 网络技术和计算机技术发展至今,已经拥有了深厚的理论基础,并在现实中进行了充分运用&#x…

七、高并发内存池--Page Cache

七、高并发内存池–Page Cache 7.1 PageCache的工作原理 PageCache是以span的大小(以页为单位)和下标一一对应为映射关系的哈希桶,下标是几就说明这个哈希桶下挂的span的大小就是几页的,是绝对映射的关系。因为PageCache也是全局只有唯一一个的&#x…

Vue2项目练手——通用后台管理项目第三节

Vue2项目练手——通用后台管理项目 首页组件布局个人信息展示使用的组件App.vueHome.vue 列表信息展示使用的组件Home.vue 订单统计Home.vue 数据的请求axios的基本使用二次封装文件目录src/api/index.jssrc/utils/request.jsHome.vue 首页组件布局 个人信息展示 使用的组件 …

多应用模式下,忽略项目的入口文件,重写Apache规则

多应用模式下,忽略项目的入口文件,重写Apache规则 首先,我的项目是具有两个应用,admin和index,同时给它们绑定了域名,但是每次访问时都需要加入项目的入口文件地址 index.php ,为了忽略这个入口文件,只能通…

Windows安装FFmpeg说明

下载地址 官网 Download FFmpeg Csdn ffmpeg安装包,ffmpeg-2023-08-28-git-b5273c619d-full-build.7z资源-CSDN文库 解压安装,添加环境变量 命令行输入ffmpeg 安装成功

2023开学礼《乡村振兴战略下传统村落文化旅游设计》北农馆藏许少辉八一新书

2023开学礼《乡村振兴战略下传统村落文化旅游设计》北京农学院图书馆许少辉八一新书

react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react

文章目录 react快速开始(三)-create-react-app脚手架项目启动;使用VScode调试react一、create-react-app脚手架项目启动1. react-scripts2. 关于better-npm-runbetter-npm-run安装 二、使用VScode调试react1. 浏览器插件React Developer Tools2. 【重点】用 VSCode …

44、基于 AOP 的错误处理,相当于异常拦截处理

基于 springboot 自动配置的 spring mvc 错误处理,就是演示项目报错后,跳转到自定义的错误页面 ★ 两种错误处理方式 方式一: 基于Spring Boot自动配置的错误处理方式,只要通过属性文件即可配置错误处理行为。 提供自定义的错误…

手写Mybatis:第7章-SQL执行器的定义和实现

文章目录 一、目标:SQL执行的定义和实现二、设计:SQL执行的定义和实现三、实现:SQL执行的定义和实现3.1 工程结构3.2 SQL执行实现的关系图3.3 执行器的定义和实现3.3.1 Executor 接口3.3.2 BaseExecutor 抽象基类3.3.3 SimpleExecutor 简单执…

GPU版本pytorch(Cuda12.1)安装教程

我们通过Pytorch官网安装torch的时候,会发现常常由于网速问题安装不成功,下面提供一种简单的方法可以成功安装Cuda12.1,亲测有效。 目录 一、常规方法 二、有效方法 2.1 创建并激活虚拟环境 2.2 添加清华源 2.3 安装torch 一、常规方法…

xsschallenge通关(11-15)

level 11 老规矩&#xff0c;先查看源码&#xff0c;做代码审计&#xff1a; <?php ini_set("display_errors", 0); $str $_GET["keyword"]; $str00 $_GET["t_sort"]; $str11$_SERVER[HTTP_REFERER]; $str22str_replace(">&quo…

Linux centos7 bash编程(小练习)

一、打印九九乘法口诀 这一个for循环嵌套的小练习&#xff0c;难度不大。提供一种写法&#xff0c;供参考&#xff1a; #!/bin/bash # 文件名&#xff1a;99table.sh # 打印输出九九乘法口诀表 for i in {1..9} do for ((j1;j<$i;j)) do …

雅思写作 三小时浓缩学习顾家北 笔记总结(三)

目录 顾家北饥饿网100个句子翻译 "Heritage sites threatened by urban development" "Heritage sites are threatened by urban development." We should not ignore face-to-face communication. We cannot ignore face-to-face communication. So…

使用Python对数据的操作转换

1、列表加值转字典 在Python中&#xff0c;将列表的值转换为字典的键可以使用以下代码&#xff1a; myList ["name", "age", "location"] myDict {k: None for k in myList} print(myDict) 输出&#xff1a; {name: None, age: None, loca…

给oracle逻辑导出clob大字段、大数据量表提提速

文章目录 前言一、大表数据附&#xff1a;查询大表 二、解题思路1.导出排除大表的数据2.rowid切片导出大表数据Linux代码如下&#xff08;示例&#xff09;&#xff1a;Windows代码如下&#xff08;示例&#xff09;&#xff1a;手工执行代码如下&#xff08;示例&#xff09;&…