前端 class 类常用修饰符

2025-09-19
福建
本文字数：1399 字
阅读完需：约 5 分钟

在 JavaScript 的 class 类中，public、private、readonly 和 static 是常用的修饰符。

1. public（公开的）

● 作用：属性和方法默认是公开的，可以在类内部、外部和子类中随意访问和修改。● 示例：

class Person {  name = "小明"; // 默认是 public  public age = 18; // 显式声明 public（TS 写法，JS 中不写默认就是 public）    greet() {    console.log(`我是 ${this.name}`); // 内部能访问  }}
const p = new Person();p.name = "小红"; // 外部能修改p.greet();       // 外部能调用

复制代码

2. private（私有的）

● 作用：只能在当前类的内部访问，外部和子类都无法访问或修改。用 # 前缀（JS 原生语法）或 TypeScript 的 private 关键词。● 类比：私有变量就是 class 自己的秘密小金库，关起门来自己随便用（读/写都行），但外人绝对碰不到。● 示例：

class Person {  #age = 0; // js原生语法，私有变量，外部碰不到  // private age: number;  // ts语法
  constructor(age) {    this.#age = age; // 内部初始化（修改）  }
  birthday() {    this.#age++; // 内部修改（加1岁）  }
  getAge() {    return this.#age; // 内部读取  }}
const person = new Person(18);person.birthday();console.log(person.getAge()); // 19
// 外部直接访问person.#age = 20; // 报错console.log(person.#age); // 报错

复制代码

3. readonly（只读的）

● 作用：属性只能在声明时或构造函数中初始化一次，之后不可修改（类似常量）。TypeScript 专有关键词。● 类比：你的身份证号，出生时确定后就再也不能改了。● 示例（TypeScript）：

class Car {  readonly id: string;  constructor() {    this.id = "CAR-001"; // ✔构造函数中可以赋值  }}
const car = new Car();car.id = "XXX"; // 报错，外部不能修改

复制代码

4. static（静态的）

● 作用：属于类本身，而不是类的实例。通过类名直接访问（类名.xxx），实例不能访问。● 类比：全公司共享的工具（比如打印机），不需要每人单独买一台。● 示例：

class MathUtils {  static PI = 3.14; // 静态属性
  static sum(a, b) { // 静态方法    return a + b;  }}
console.log(MathUtils.PI);    // ✔3.14（通过类名访问）console.log(MathUtils.sum(1, 2)); // ✔3
const util = new MathUtils();util.sum(1, 2); // 报错，实例不能调用静态方法

复制代码

总结

实际开发中：● 公开数据用 public（默认不写就行）● 隐藏敏感数据用 private（或加 # 前缀）● 定义常量用 readonly（TS 专有）● 共享工具方法用 static。

行业拓展

分享一个面向研发人群使用的前后端分离的低代码软件——JNPF。

基于 Java Boot/.Net Core 双引擎，它适配国产化，支持主流数据库和操作系统，提供五十几种高频预制组件，内置了常用的后台管理系统使用场景和实用模版，通过简单的拖拉拽操作，开发者能够高效完成软件开发，提高开发效率，减少代码编写工作。

JNPF 基于 SpringBoot+Vue.js，提供了一个适合所有水平用户的低代码学习平台，无论是有经验的开发者还是编程新手，都可以在这里找到适合自己的学习路径。

此外，JNPF 支持全源码交付，完全支持根据公司、项目需求、业务需求进行二次改造开发或内网部署，具备多角色门户、登录认证、组织管理、角色授权、表单设计、流程设计、页面配置、报表设计、门户配置、代码生成工具等开箱即用的在线服务。

发布于: 2025-09-19阅读数: 3

秃头小帅oi

关注

摸个鱼，顺便发点有用的东西 2023-06-19 加入

互联网某厂人（重生版）

发布

暂无评论

创作场景

前端 class 类常用修饰符

1. public（公开的）

2. private（私有的）

3. readonly（只读的）

4. static（静态的）

总结

行业拓展

秃头小帅oi

评论