前端:JavaScript 实现类

文章目录

    • 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{nameconstructor(name){this.name = name}logName(){console.log('你好,我的名字是',this.name)}
}const s = new Student('张三')
s.logName()

在这里插入图片描述

2. Es6-class 实现继承

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

class Person{nameconstructor(name) {this.name = name}logName(){console.log('你好,我的名字是',this.name)}
}class Student extends Person{ageconstructor(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.rhkb.cn/news/423665.html

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

相关文章

聊天组件 Vue3-beautiful-chat

前言 最近很多公司都在搞大模型,类似于 chatgpt 的功能;而 chatgpt 的界面其实就是个对话框。今天就介绍一个不错的对话框组件 Vue3-beautiful-chat 项目框架 vite vue3 TS Vue3-beautiful-chat 使用流程 1、引用三方件 npm install Vue3-beaut…

【JAVA基础】实现Tomcat基本功能

文章目录 TCP/IP协议Socket编程ServletTomcat 在搜索了两三天之后,也是大概弄懂了Tomcat是个什么东西,我们在说Tomcat之前,先来了解一下下面这三个东西: TCP/IP协议 TCP/IP 是互联网通信的基础协议。TCP(传输控制协议…

SpringBoot框架下的房产销售系统开发

第一章 绪 论 1.1背景及意义 房产销售也都将通过计算机进行整体智能化操作,对于房产销售系统所牵扯的管理及数据保存都是非常多的,例如管理员;首页、个人中心、用户管理、销售经理管理、房源信息管理、房源类型管理、房子户型管理、交易订单管…

《Python青少年趣味编程108例》书籍介绍

文章目录 前言为什么选择Python?书籍介绍文章目录配套资源 前言 在这个数字化飞速发展的时代,编程已经成为了一项不可或缺的技能。对于青少年而言,学习编程不仅能够培养逻辑思维、解决问题的能力,还能激发无限创意,让…

【吊打面试官系列-Redis面试题】如果有大量的 key 需要设置同一时间过期,一般需要注意什么?

大家好,我是锋哥。今天分享关于【如果有大量的 key 需要设置同一时间过期,一般需要注意什么?】面试题,希望对大家有帮助; 如果有大量的 key 需要设置同一时间过期,一般需要注意什么? 如果大量的…

Windows terminal使用说明

1 terminal基本介绍 1 下载 从微软商店上下载的方式网速比较慢,一种直接的方式是直接用命令行运行命令 winget install --idMicrosoft.WindowsTerminal -e# Window Terminal 安装以及使用(2021最新) 2 ssh配置 # 使用Windows Terminal进行SSH登录 1 通过label…

安泰功率放大器的使用方法及注意事项有哪些

功率放大器是一种用来增加输入信号功率的电子设备。它在各种电子设备和通信系统中被广泛应用,如音响设备、收发器、无线通信设备等。使用功率放大器时,有一些重要的注意事项需要注意,以确保其正常运行并保护设备。 首先,正确的功率…

【数据结构与算法 | 灵神题单 | 分治(链表)篇】力扣148

1. 力扣148:排序链表 1.1 题目: 给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。 示例 1: 输入:head [4,2,1,3] 输出:[1,2,3,4]示例 2: 输入:head [-1,5,3,4…

Unity程序基础框架

概述 单例模式基类 没有继承 MonoBehaviour 继承了 MonoBehaviour 的两种单例模式的写法 缓存池模块 &#xff08;确实挺有用&#xff09; using System.Collections; using System.Collections.Generic; using UnityEngine;/// <summary> /// 缓存池模块 /// 知识点 //…

C++STL~~stackqueue

文章目录 容器适配器一、stack&queue的概念二、stack&queue的使用三、stack&queue的练习四、总结 容器适配器 什么是适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)&#xff0c;该种模式是将一个类…

Leetcode 移动零

要求将数组中的所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。下面是该题的 C 解决方案&#xff1a; class Solution { public:void moveZeroes(vector<int>& nums) {int nonZeroPos 0; // 记录非零元素应该放置的位置// 遍历数组&#xff0c;…

【北京迅为】《STM32MP157开发板使用手册》- 第三十章Cortex-M4通用定时器实验

iTOP-STM32MP157开发板采用ST推出的双核cortex-A7单核cortex-M4异构处理器&#xff0c;既可用Linux、又可以用于STM32单片机开发。开发板采用核心板底板结构&#xff0c;主频650M、1G内存、8G存储&#xff0c;核心板采用工业级板对板连接器&#xff0c;高可靠&#xff0c;牢固耐…

相图的科学应用,陶瓷材料创新

陶瓷材料因其优异的物理和化学性能&#xff0c;在航空航天、电子、生物医学等多个领域展现出广阔的应用前景。陶瓷材料的性能很大程度上取决于其微观结构&#xff0c;包括晶粒大小、相组成和分布。相图作为描述陶瓷材料在不同条件下的相变行为和相平衡关系的图表反映了陶瓷材料…

Element-ui el-table 全局表格排序

实现效果如下&#xff1a; 一、当页数据排序 如果只想要当前页面排序&#xff0c;只会涉及到前端&#xff0c;只需在<el-table-column>标签上添加 :sortable"true"即可 二、自定义排序 如果想要全局排序&#xff0c;需要自定义排序函数&#xff0c;请求后台排…

Springboot项目打war包运行及错误解决

一,打war包 1. 修改pom.xml 为了不影响原pom.xml, 我复制了一个文件叫pom_war.xml , 需要打war包就采用pom_war.xml进行打war包, 你也可以直接修改pom.xml ① 打包方式改为war 没有就增加此配置 <packaging>war</packaging> ② 排除内嵌tomcat依赖 <de…

怎样在备忘录中添加提醒?怎么设置备忘录提醒

备忘录作为我们日常生活中常用的软件&#xff0c;其记录事项的便捷性已经得到了广泛认可。无论是工作计划、购物清单还是个人日记&#xff0c;备忘录都能帮助我们将这些信息快速记录下来。然而&#xff0c;如果备忘录能够进一步提供提醒功能&#xff0c;那么它将变得更加实用&a…

122.rk3399 uboot(2017.09) 源码分析2-initf_dm(2024-09-09)

这里接着上一篇来吧&#xff1a; https://blog.csdn.net/zhaozhi0810/article/details/141927053 本文主要是dm_init_and_scan函数的分析&#xff0c;这个内容比较复杂&#xff0c;我也是第一次阅读&#xff0c;错误之处在所难免&#xff0c;请多指教。 uboot的dm框架需要了解…

MyBatis 面试题11-27

11、Mybatis 是如何将 sql 执行结果封装为目标对象并返回的? 都有哪些映射形式&#xff1f; Mybatis 在执行 SQL 查询后&#xff0c;会将结果集封装为目标对象并返回。这主要依赖于 Mybatis 的映射机制&#xff0c;它提供了两种主要的映射形式&#xff1a; 第一种&#xff1…

代码质量护航:结合Checkstyle、SpringBoot与Git的最佳实践

在团队开发中&#xff0c;保持一致的代码风格和高质量的代码至关重要。为了提升团队的整体代码质量&#xff0c;防止低质量代码的提交&#xff0c;使用工具对代码进行自动化检查是非常有效的手段之一。在这篇博客中&#xff0c;我将介绍如何通过结合 Checkstyle、Spring Boot 和…

Zotero使用(一)PDF文件导入不会自动识别

上面两种&#xff0c;一种中文&#xff0c;一种英文&#xff0c;会发现&#xff0c;中文的导入进去之后不会自动识别&#xff0c;部分英文也是。不能自动识别就会缺少导出参考文献的功能&#xff0c;怎么办&#xff1f; 发现之前导入喜欢使用PDF格式 可以结合.ris格式&#xf…