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

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

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

相关推荐
Dontla4 小时前
React教程(React入门教程)(React组件、JSX、React Props、React State、React事件处理、Hooks、高阶组件HOC)
前端·react.js·前端框架
PineappleCoder4 小时前
前端水印收官篇:ECharts 图表水印实战 + Ant Design Vue/Canvas 方案选型指南
前端·echarts
速易达网络5 小时前
Nodejs+html+mysql实现轻量web应用
前端·mysql·html
05Nuyoah5 小时前
Day 02 HTML的基础
前端·javascript·css·html·firefox·jquery·html5
不宕机的小马达5 小时前
【Web前端|第一篇】HTML、CSS与JavaScript
前端·css·html
小红帽6155 小时前
HTML,CSS,JS三者的功能及联系
javascript·css·html
路光.5 小时前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
一点一木5 小时前
⚡ GitHub 热榜速报 | 2025 年 09 月 第 3 周
前端·人工智能·github