当前位置: 首页 > news >正文

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 类允许我们定义 gettersetter 方法,这有助于封装数据并控制属性的读取和修改方式。

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数据结构与算法全书框架考试题型的分值分布如何? 本次内容概述绪论第一节概览什么是数据、数据元素,数据项,数据项的值?什么是数据结构?分哪两种集合形式(逻辑和存储)&#xff1f…...

富文本 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.下面&#xff08; &#xff09;属于顺磁性材料。 A. 铜 B. 水 C. 空气 答案&#xff1a;C 2.事故照明一般采用&#xff08; &#xff09;。 A. 日光灯 B. 白炽灯 C. 压汞灯 答案&#xff1a;B 3.人体同时接触带电设备或线路中的两相导体时&#xff0c;电流从一相通过人体流…...

[免费]基于Python的Django博客系统【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的基于Python的Django博客系统&#xff0c;分享下哈。 项目视频演示 【免费】基于Python的Django博客系统 Python毕业设计_哔哩哔哩_bilibili 项目介绍 随着互联网技术的飞速发展&#xff0c;信息的传播与…...

Cannot resolve symbol ‘XXX‘ Maven 依赖问题的解决过程

一、问题描述 在使用 Maven 管理项目依赖时&#xff0c;遇到了一个棘手的问题。具体表现为&#xff1a;在 pom.xml 文件中导入了所需的依赖&#xff0c;并且在 IDE 中导入语句没有显示为红色&#xff08;表示 IDE 没有提示依赖缺失&#xff09;&#xff0c;但是在实际使用这些依…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

Elastic 获得 AWS 教育 ISV 合作伙伴资质,进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...