ES6 类语法:JavaScript 的现代化面向对象编程
Hi,我是布兰妮甜 !ECMAScript 2015,通常被称为 ES6 或 ES2015,是 JavaScript 语言的一次重大更新。它引入了许多新特性,其中最引人注目的就是类(class)语法。尽管 JavaScript 一直以来都支持基于原型的继承,但新的类语法提供了一种更加直观和易于理解的方式来定义对象构造函数以及它们之间的继承关系。本文将深入探讨
ES6 类语法,包括它的基本用法、静态方法、继承机制以及私有属性等高级特性。
文章目录
- 一、基础用法
- 二、静态成员
- 三、继承
- 四、getter 和 setter 方法
- 五、类的其他特性
- 六、结论
一、基础用法
1. 定义一个简单的类
在 ES6 中,class 关键字用于声明一个新的类。每个类都有一个构造函数(constructor),它是实例化时自动调用的方法,用来初始化对象的状态。
// 定义一个名为 Person 的类
class Person {// 构造函数constructor(name, age) {this.name = name;this.age = age;}// 实例方法greet() {console.log(`Hello, my name is ${this.name}`);}
}// 创建一个 Person 类的新实例
const person = new Person('Alice', 30);
person.greet(); // Hello, my name is Alice
2. 类表达式 vs 类声明
除了上面提到的类声明形式外,还可以使用类表达式来定义类,这允许我们将类赋值给变量或作为参数传递给函数。
// 类表达式
const Animal = class {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
};const animal = new Animal('Dog');
animal.speak(); // Dog makes a noise.
二、静态成员
静态成员与类本身关联而不是具体的实例。它们通常用来创建工具函数或工厂方法,可以直接通过类名调用,而不需要先创建实例。
class MathUtil {static add(a, b) {return a + b;}static subtract(a, b) {return a - b;}
}console.log(MathUtil.add(5, 7)); // 12
console.log(MathUtil.subtract(10, 4)); // 6
三、继承
ES6 类支持基于 extends 关键字的单继承模式,子类可以从父类继承属性和方法,并可以重写这些成员以实现多态性。
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类的构造函数this.breed = breed;}speak() {console.log(`${this.name} barks.`);}
}const d = new Dog('Mitzie', 'Poodle');
d.speak(); // Mitzie barks.
3.1 超类访问
在子类中,可以通过 super() 来调用父类的构造函数,或者使用 super 来引用父类的方法或属性。
class Parent {constructor(value) {this.value = value;}method() {console.log(`Parent method called with ${this.value}`);}
}class Child extends Parent {constructor(value) {super(value); // 调用父类构造函数}method() {super.method(); // 调用父类方法console.log(`Child method called`);}
}const child = new Child('test');
child.method();
// 输出:
// Parent method called with test
// Child method called
四、getter 和 setter 方法
ES6 类允许我们定义 getter 和 setter 方法,这有助于封装数据并控制属性的读取和修改方式。
class Book {constructor(title, author) {this._title = title;this._author = author;}get title() {return this._title.toUpperCase();}set title(newTitle) {if (typeof newTitle === 'string') {this._title = newTitle;} else {console.error('Title must be a string.');}}
}const book = new Book('Great Expectations', 'Charles Dickens');
console.log(book.title); // GREAT EXPECTATIONS
book.title = 'Oliver Twist';
console.log(book.title); // OLIVER TWIST
4.1 私有属性
从 ES2020 开始,JavaScript 支持私有字段(private fields),这些字段只能在类内部访问,外部无法直接操作。
class Counter {#value = 0;increment() {this.#value++;console.log(this.#value);}reset() {this.#value = 0;}
}const counter = new Counter();
counter.increment(); // 1
counter.reset();
counter.increment(); // 1
// counter.#value; // SyntaxError: Private field '#value' must be declared in an enclosing class
五、类的其他特性
5.1 类的静态属性
除了静态方法之外,你也可以为类添加静态属性。静态属性同样属于类本身而不是其实例。
class Example {static property = 'static value';static getProperty() {return this.property;}
}console.log(Example.property); // static value
console.log(Example.getProperty()); // static value
5.2 静态初始化块
从 ES2022 开始,可以在类中使用静态初始化块来执行一些初始化逻辑,这些逻辑仅会在类首次被加载时运行一次。
class Database {static #instance;static {console.log('Initializing database...');Database.#instance = new Database();}constructor() {if (Database.#instance) {throw new Error('Use Database.getInstance()');}// 初始化数据库连接等...}static getInstance() {return Database.#instance;}
}// const db1 = new Database(); // Throws error
const db2 = Database.getInstance();
5.3 公共类字段
ES6 还引入了公共类字段的概念,允许我们在类体中直接声明实例属性,而无需在构造函数中手动设置。
class User {name = 'Guest'; // 默认用户名email;constructor(email) {this.email = email;}
}const user = new User('user@example.com');
console.log(user.name); // Guest
console.log(user.email); // user@example.com
六、结论
ES6 类语法极大地简化了 JavaScript 中的面向对象编程,使得代码更加结构化和易于维护。随着标准的发展,越来越多的新特性被加入到类系统中,如私有字段、静态属性和支持模块化的改进等。掌握这些知识对于现代 Web 开发者来说是非常重要的,无论是构建小型库还是大型应用,类语法都提供了强大的工具来帮助组织和管理代码。
以上就是关于 ES6 类语法的详细讲解。希望这篇文章能够帮助你更全面地理解这一关键特性,并将其应用于实际项目开发之中。
相关文章:
ES6 类语法:JavaScript 的现代化面向对象编程
Hi,我是布兰妮甜 !ECMAScript 2015,通常被称为 ES6 或 ES2015,是 JavaScript 语言的一次重大更新。它引入了许多新特性,其中最引人注目的就是类(class)语法。尽管 JavaScript 一直以来都支持基于…...
Sprintboot原理
配置优先级 Springboot中支持的三种配置文件: application.propertiesapplication.ymlapplication.yaml java系统属性:-Dxxxxxx 命令行参数:-xxxxxx 优先级:命令行参数>java系统属性>application.properties>applicat…...
OpenHarmony 5.0.2 Release来了!
版本概述 OpenHarmony 5.0.2 Release版本对标准系统的能力进行持续完善,以快速迭代的方式推出API 14,相比5.0.1 Release版本,重点做出了如下特性新增或增强: 进一步增强ArkUI、图形图像的能力,提供更多组件的高级属性…...
Qt 控件与布局管理
1. Qt 控件的父子继承关系 在 Qt 中,继承自 QWidget 的类,通常会在构造函数中接收一个 parent 参数。 这个参数用于指定当前空间的父控件,从而建立控件间的父子关系。 当一个控件被设置为另一控件的子控件时,它会自动成为该父控…...
使用小尺寸的图像进行逐像素语义分割训练,出现样本不均衡训练效果问题
在使用小尺寸图像进行逐像素语义分割训练时,确实可能出现样本不均衡问题,且这种问题可能比大尺寸图像更显著。 1. 小尺寸图像如何加剧样本不均衡? (1) 局部裁剪导致类别分布偏差 问题:遥感图像中某些类别(如道路、建…...
0.91英寸OLED显示屏一种具有小尺寸、高分辨率、低功耗特性的显示器件
0.91英寸OLED显示屏是一种具有小尺寸、高分辨率、低功耗特性的显示器件。以下是对0.91英寸OLED显示屏的详细介绍: 一、基本参数 尺寸:0.91英寸分辨率:通常为128x32像素,意味着显示屏上有128列和32行的像素点,总共409…...
读书笔记--分布式服务架构对比及优势
本篇是在上一篇的基础上,主要对共享服务平台建设所依赖的分布式服务架构进行学习,主要记录和思考如下,供大家学习参考。随着企业各业务数字化转型工作的推进,之前在传统的单一系统(或单体应用)模式中&#…...
HTML5 新的 Input 类型详解
HTML5 引入了许多新的输入类型,极大地增强了表单的功能和用户体验。这些新的输入类型不仅提供了更好的输入控制,还支持内置的验证功能,减少了开发者手动编写验证逻辑的工作量。本文将全面介绍 HTML5 中新增的输入类型,并结合代码示…...
ESP32-CAM实验集(WebServer)
WebServer 效果图 已连接 web端 platformio.ini ; PlatformIO Project Configuration File ; ; Build options: build flags, source filter ; Upload options: custom upload port, speed and extra flags ; Library options: dependencies, extra library stor…...
Case逢无意难休——深度解析JAVA中case穿透问题
Case逢无意难休——深度解析JAVA中case穿透问题~ 不作溢美之词,不作浮夸文章,此文与功名进取毫不相关也!与大家共勉!! 更多文章:个人主页 系列文章:JAVA专栏 欢迎各位大佬来访哦~互三必回&#…...
Golang笔记——常用库context和runtime
大家好,这里是Good Note,关注 公主号:Goodnote,专栏文章私信限时Free。本文详细介绍Golang的常用库context和runtime,包括库的基本概念和基本函数的使用等。 文章目录 contextcontext 包的基本概念主要类型和函数1. **…...
2000-2020年各省第二产业增加值占GDP比重数据
2000-2020年各省第二产业增加值占GDP比重数据 1、时间:2000-2020年 2、来源:国家统计局、统计年鉴 3、指标:行政区划代码、地区名称、年份、第二产业增加值占GDP比重 4、范围:31省 5、指标解释:第二产业增加值占GDP比重…...
unity商店插件A* Pathfinding Project如何判断一个点是否在导航网格上?
需要使用NavGraph.IsPointOnNavmesh(Vector3 point) 如果点位于导航网的可步行部分,则为真。 如果一个点在可步行导航网表面之上或之下,在任何距离,如果它不在更近的不可步行节点之上 / 之下,则认为它在导航网上。 使用方法 Ast…...
Day24-【13003】短文,数据结构与算法开篇,什么是数据元素?数据结构有哪些类型?什么是抽象类型?
文章目录 13003数据结构与算法全书框架考试题型的分值分布如何? 本次内容概述绪论第一节概览什么是数据、数据元素,数据项,数据项的值?什么是数据结构?分哪两种集合形式(逻辑和存储)?…...
富文本 tinyMCE Vue2 组件使用简易教程
参考官方教程 TinyMCE Vue.js integration technical reference Vue2 项目需要使用 tinyMCE Vue2 组件(tinymce/tinymce-vue)的第 3 版 安装组件 npm install --save "tinymce/tinymce-vue^3" 编写组件调用 <template><Editorref"editor"v-m…...
强化学习在自动驾驶中的实现与挑战
强化学习在自动驾驶中的实现与挑战 自动驾驶技术作为当今人工智能领域的前沿之一,正通过各种方式改变我们的出行方式。而强化学习(Reinforcement Learning, RL),作为机器学习的一大分支,在自动驾驶的实现中扮演了至关重要的角色。它通过模仿人类驾驶员的决策过程,为车辆…...
记录 | MaxKB创建本地AI智能问答系统
目录 前言一、重建MaxKBStep1 复制路径Step2 删除MaxKBStep3 创建数据存储文件夹Step4 重建 二、创建知识库Step1 新建知识库Step2 下载测试所用的txtStep3 上传本地文档Step4 选择模型补充智谱的API Key如何获取 Step5 查看是否成功 三、创建应用Step1 新建应用Step2 配置AI助…...
特种作业操作之低压电工考试真题
1.下面( )属于顺磁性材料。 A. 铜 B. 水 C. 空气 答案:C 2.事故照明一般采用( )。 A. 日光灯 B. 白炽灯 C. 压汞灯 答案:B 3.人体同时接触带电设备或线路中的两相导体时,电流从一相通过人体流…...
[免费]基于Python的Django博客系统【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的基于Python的Django博客系统,分享下哈。 项目视频演示 【免费】基于Python的Django博客系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 随着互联网技术的飞速发展,信息的传播与…...
Cannot resolve symbol ‘XXX‘ Maven 依赖问题的解决过程
一、问题描述 在使用 Maven 管理项目依赖时,遇到了一个棘手的问题。具体表现为:在 pom.xml 文件中导入了所需的依赖,并且在 IDE 中导入语句没有显示为红色(表示 IDE 没有提示依赖缺失),但是在实际使用这些依…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...
React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构
React 实战项目:微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇!在前 29 篇文章中,我们从 React 的基础概念逐步深入到高级技巧,涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...
aardio 自动识别验证码输入
技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”,于是尝试整合图像识别与网页自动化技术,完成了这套模拟登录流程。核心思路是:截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...
【Java多线程从青铜到王者】单例设计模式(八)
wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本,sleep也是可以指定时间的,也就是说时间一到就会解除阻塞,继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒),wait能被notify提前唤醒…...
