前端:JavaScript 实现类

news2024/12/23 18:55:28

文章目录

    • 1. Es6-类-class
    • 2. Es6-class 实现继承
    • 3. Es6-class 静态属性和私有属性
    • 4. Es5-寄生组合式继承

1. Es6-类-class

类是创建对象的模板,用代码封装数据以处理该数据,js中的类建立在原型上。

如何定义类,首先需要关键字 class,之后紧跟着类名,类名首字母需要大写,最后是需要写上大括号。
定义公有属性,直接在类下的大括号下添加对应的变量名即可,可以为变量名设置默认值。

// 类名首字母大写
class 类名{
	公有属性变量
	constructor(arg1){
		this.公有属性变量 = arg1
	}
	// 构造方法
	方法名(){
		// 一些代码逻辑
	}
}

// 调用该类
const abc = new 类名()

如下:

class Student{
   name
    constructor(name){
        this.name = name
    }
    logName(){
        console.log('你好,我的名字是',this.name)
    }
}

const s = new Student('张三')
s.logName()

在这里插入图片描述

2. Es6-class 实现继承

使用关键字 extends,表示当前类继承于某个父类。
使用关键字super,用于访问对象字面量或类的原型上的属性,或调用父类的构造方法。

class Person{
    name
    constructor(name) {
        this.name = name
    }
    logName(){
        console.log('你好,我的名字是',this.name)
    }
}

class Student extends Person{
    age
    constructor(name,age){
        super(name)
        this.age = age
    }
}

const s = new Student('张三',23)

如果子类中定义了与父类同名的方法,那么采用就近原则(重写),即子类调用该方法时调用的是子类下的该方法。

3. Es6-class 静态属性和私有属性

静态:类通过关键字static定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。
私有:类属性在默认情况下是公有的,但是可以使用增加哈希前缀 # 的方法定义私有类字段,声明和访问时也需要加上。定义私有的属性和方法无法在外部进行访问

class Person{
    static pName = '静态属性'
    static logPName(){
        console.log('静态方法')
    }

    #age = '私有属性'
    #logName(){
        console.log('私有方法')
    }

    logName2(){
        console.log(this.#age)
        this.#logName()
    }
}

console.log(Person.pName)
Person.logPName()

const p = new Person()
p.logName2()

4. Es5-寄生组合式继承

通过接用构造函数来继承属性,通过原型链的混合形式来继承方法。

function Person(name){
	this.name = name
}

Person.prototype.logName = function(){
    console.log('我的名字是',this.name)
}

function Stu(name){
    Person.call(this,name)
}
// 继承属性
const prototype = Object.create(Person.prototype,{
    constructor:{
        value:Stu
    }
    // 修改constructor的指向
})
// 继承方法
Stu.prototype = prototype
const s = new Stu('张三')

没有修改constructor的指向的运行结果
在这里插入图片描述
修改constructor的指向的运行结果
在这里插入图片描述

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

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

相关文章

C++之打造my vector篇

目录 前言 1.参照官版,打造vector的基本框架 2.丰富框架,实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸,深度理解代码 迭代器…

iText2KG:显著降低LLM构建知识图谱时的幻觉现象

1. 当前知识图谱构建存在的问题 知识图谱通过捕捉实体之间的关系来构建知识的结构化表示,在分析文本数据集和从结构化异构数据中推断知识方面具有显著优势。比如,知识图谱能够融合来自多个来源的不同数据,提供一个具有凝聚力的信息视角。还能…

【Python进阶】学习Python从入门到进阶,详细步骤,就看这一篇。文末附带项目演练!!!

详细的Python学习路线 1. Python基础 Python安装和环境配置:学习如何在你的操作系统上安装Python,并配置开发环境。变量和数据类型:学习如何定义变量,以及Python中的基本数据类型,如整数、浮点数、字符串等。 Pytho…

【人工智能学习笔记】4_3 深度学习基础之循环神经网络

循环神经网络(Recurrent Neural Network, RNN) 是一类以序列(sequence)数据为输入,在序列的演进方向进行递归(recursion)且所有节点(循环单元)按链式连接的递归神经网络(recursive neural network),循环神经网络具有短期记忆能力 RNN核心思想 RNN的结构 一个典型…

基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行

直接看视频: 基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行_哔哩哔哩_bilibili 模型: 有效提取径流时间序列的信息特征,提高径流预测模型的高维非线性拟合能力和预测性能的稳定性,将卷积神经网络(CNN),双向长短期记忆网络(BiLSTM)和注意力机制(attention)相…

tomcat端口被占用解决方法

在安装目录的conf下修改server.xml文件,修改后保存重启即可

十四、MySQL高级— 分库分表(7)

🌻🌻 目录 一、分库1.1 修改配置 schema.xml1.2 如何选择分库表1.3 SQLyog 连接 mycat 二、水平分表2.1 schema.xml2.2 rule.xml2.3 跨库join2.3.1 ER表2.3.2 全局表 2.4 全局序列2.4.1 本地文件2.4.2 数据库方式(一般都用这个)2.4.3 时间戳方式2.4.4 自…

时间序列预测学习方向总概括

推荐资源: 1.MA、AR、ARIMA 算法小陈-CSDN博客 2.informer论文讲解 【2024最火的两个模型:InformerLSTM两大时间序列预测模型,论文精读代码复现,究极通俗易懂!——人工智能|AI|机器学习|深度学习-哔哩哔哩】 https…

微波无源器件 4 基于高阶定向耦合器的双极化波束形成网络

摘要: 一种Ka频段的双极化3dB定向耦合器被设计用于波束形成网络应用。所提出的解决方案对于紧凑Nolen网络。Nolen结构优于器平面和无损特别具有吸引力。两个平行方波导通过口径阵列耦合,设计用于获得两个正交极化之间的所需耦合和高隔离度。 索引词&…

sql语句的训练2024/9/9

1题 需要看清思路:不是将数据库中的device_id的名字改为user_infors_example,而是在查找的时候,需要将device_id看成user_infors_example来进行查找。 答案 select device_id AS user_infos_example FROM user_profile limit 2 2 当固定查找…

idea报错:java:错误:不支持发行版本5

问题 使用idea创建Maven项目运行是报错:java:错误:不支持发行版本5 解决 1.打开Settings 2.在Java compiler 里面修改和Java版本一致 然后就可以正常运行

租房市场新动力:SpringBoot大学生租房系统

第1章 绪论 1.1 课题背景 互联网发展至今,无论是其理论还是技术都已经成熟,而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。所以各行业,尤其是规模较大的企业和学校等…

erlang学习: Mnesia Erlang数据库2

Mnesia数据库增加与查询学习 -module(test_mnesia).-record(shop, {item, quantity, cost}). -record(cost, {name, price}). -record(design, {info, plan}). %% API -export([insert/3,select/1,start/0]). start() ->mnesia:start().insert(Name, Quantity, Cost) ->…

大模型之三十一-音源分离

大模型之三十一-音乐分离模型 因为TTS模型训练还有几个结果没出,本篇先介绍一下音乐分离模型吧。其实可能你也猜到了,一部分TTS的数据是网上爬来的,这种音频可能会有背景音之类的,这里需要将乐器类的伴奏去掉。所以就此介绍一下本…

U盘格式化怎么办?这4款软件可以帮你进行数据恢复。

如果你的U 盘被格式化,里面的数据就会被清除掉了。有备份的话,就不用担心丢失那些重要的数据;如果没有备份,也有办法解决;可以用电脑自带的一些功能恢复,或者是使用专业的恢复软件。如果大家有需求&#xf…

【软考】信息安全

【软考】信息安全 一.信息安全基础知识 信息安全是保障信息系统和数据的保密性、完整性、可用性、可控性和可追溯性的综合措施。这五个要素是信息安全的基础,缺一不可。 1. 保密性 (Confidentiality) 定义: 保证信息只被授权人员访问。举例: 银行账户信息、医疗…

【JAVA】Tomcat性能优化、安全配置、资源控制以及运行模式超详细

文章目录 一、Tomcat性能优化application.yml配置maxThreads 连接数限制压缩传输AJP禁用 二、JVM方向优化设置并行垃圾回收器查看gc日志文件 三、Tomcat安全配置入侵防范禁用非法HTTP请求方法禁止目录列出防止恶意关闭服务配置HTTPS加密协议HttpOnly标记安全头配置 四、Tomcat资…

Rancher 与 Kubernetes(K8s)的关系

1. 简介 1.1 Kubernetes 作为容器编排平台 Kubernetes 是一个开源平台,用于自动化部署、扩展和管理容器化的应用。它提供了容器调度、自动伸缩、健康检查、滚动更新等功能。 例子:假设您有一个微服务架构的应用程序,需要运行在多个节…

基于arcpro3.0.2版的使用深度学习目标提取之建筑房屋

基于arcpro3.0.2版的使用深度学习目标提取之建筑房屋 采用像素分类方法,像素分类一般把多边形详细轮廓给标注出来, 而目标检测就标注出对象大致矩形框就行, 本次训练结果:采用GPU显卡Nivda 1080 训练模型图 20个周期GPU训练 (一…