告别随意改属性!用 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 → 提供对私有属性的安全访问

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

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

相关推荐
焦糖小布丁8 小时前
加http和https访问的网站不同?
前端
人工智能的苟富贵8 小时前
用 Rust 写一个前端项目辅助工具:JSON 格式化器
前端·rust·json
季春二九9 小时前
Edge 卸载工具 | 版本号1.0 | 专为彻底卸载Microsoft Edge设计
前端·microsoft·edge·edge 卸载工具
雨过天晴而后无语9 小时前
HTML中JS监听输入框值的即时变化
前端·javascript·html
座山雕~9 小时前
html 和css基础常用的标签和样式(2)-css
前端·css·html
一勺菠萝丶9 小时前
为什么 HTTP 能访问,但 HTTPS 却打不开?——Nginx SSL 端口配置详解
前端
4Forsee9 小时前
【Android】消息机制
android·java·前端
不爱说话郭德纲9 小时前
UniappX不会运行到鸿蒙?超超超保姆级鸿蒙开发生成证书以及配置证书步骤
前端·uni-app·harmonyos
Olafur_zbj9 小时前
【IC】NoC设计入门 -- 网络接口NI Slave
前端·javascript·php
IT_陈寒9 小时前
React性能优化:10个90%开发者不知道的useEffect正确使用姿势
前端·人工智能·后端