告别随意改属性!用 ES6 Class 实现数据封装

JS 封装与私有属性:用 class 实现数据安全

在面向对象编程(OOP)中,封装是核心概念之一。它的目标就是:

保证对象内部数据的安全性,避免被外部随意修改。

在 JavaScript 中,我们可以使用 类(class)+ 私有属性(#开头) 来实现封装。


私有属性的语法

class 中,使用 # 开头的变量表示私有属性

这些属性只能在类的内部访问,外部无法直接修改或读取。

复制代码

class Person { // 定义私有属性 #name #age #gender constructor(name, age, gender) { this.#name = name this.#age = age this.#gender = gender } }


提供安全的访问方式

为了让外部能够"间接"访问私有数据,我们通常提供 gettersetter 方法。

这就是 封装的精髓 ------ 不直接暴露属性,而是通过方法来做校验安全访问

复制代码

class Person { #name #age #gender constructor(name, age, gender) { this.#name = name this.#age = age this.#gender = gender } // getter:安全获取数据 get age() { return this.#age } // setter:安全修改数据 set age(value) { if (value > 0 && value <= 120) { this.#age = value } else { console.warn('年龄不合法!') } } // 普通方法 sayHello() { console.log(`大家好,我是${this.#name},今年${this.#age}岁,性别:${this.#gender}`) } } const p1 = new Person('Linxi', 18, '女') p1.sayHello() console.log(p1.age) // 18 p1.age = 200 // 警告:年龄不合法!


常见错误点

  1. 私有属性必须先声明再使用

    复制代码

    class A { #x // 必须先写在类里 constructor(x) { this.#x = x } }

  2. 外部不能直接访问私有属性

    复制代码

    const a = new A(10) console.log(a.#x) // 语法错误,直接访问会报错

  3. getter / setter 建议简化命名

    不要写 get getAge() 这种,直接 get age() 即可,使用时更自然:

    复制代码

    console.log(p1.age) // getter p1.age = 20 // setter


小结

  • #属性名 → 声明私有属性,只能在类内部使用

  • getset → 提供对私有属性的安全访问

  • 封装的本质 → 限制数据的访问范围 + 提供安全的读写方式

通过这种方式,我们就能让对象的数据更安全,也让代码更具扩展性。

相关推荐
祀爱12 分钟前
ControllerBase 类将对象转换为 JSON 格式并返回前端的方法
前端·json·asp.net
huangdong_15 分钟前
有什么软件可以下载淘宝和天猫店铺的商品图片?——从工具推荐到技术原理的完整解答
java·前端·数据库
2401_8784545316 分钟前
前端性能优化复习
前端·性能优化
Tiffany_Ho17 分钟前
Derek-Callan-business-english: 用现代前端技术打造高效商务英语学习平台
前端·typescript·node.js
weixin_BYSJ198718 分钟前
springboot鹿邑县旅游网站99312(源码+文档)
java·javascript·spring boot·python·django·flask·php
晓得迷路了25 分钟前
栗子前端技术周刊第 131 期 - pnpm 11.3、npm 11.16.0、Astro 6.4...
前端·javascript·css
kyriewen9 小时前
微软用Go重写TypeScript编译器,速度提升10倍,网友:这是“背叛”还是“救赎”?
前端·typescript·ecmascript 6
Ceelog9 小时前
久坐党自救指南:屏幕前 8 小时,身体到底在经历什么
前端·后端
西陵9 小时前
Agent 为什么会陷入 Doom Loop?OpenClaw 的破解之道
前端·人工智能·ai编程