0

0

JavaScript中利用闭包实现对象私有变量的经典方案

舞姬之光

舞姬之光

发布时间:2026-03-16 14:53:33

|

747人浏览过

|

来源于php中文网

原创

JavaScript中无原生私有字段语法(ES2022前),闭包是最经典可靠的私有变量实现方式:变量封闭于函数作用域,仅通过特权方法间接访问;WeakMap可结合原型复用方法并隔离私有状态;ES2022起支持#语法级私有字段,更简洁高效。

javascript中利用闭包实现对象私有变量的经典方案

JavaScript中没有原生的私有字段语法(ES2022之前),闭包是实现真正私有变量最经典、最可靠的方式——变量被封闭在函数作用域内,外部无法直接访问,只能通过返回的特权方法间接操作。

基本模式:构造函数 + 闭包封装

在构造函数内部声明变量,返回一个对象,其方法引用这些变量。由于词法作用域,这些方法能持续访问构造函数内的局部变量,而外部无法绕过方法直接读写。

  • 私有变量定义在函数体内,不是 this 属性,不挂载到实例上
  • 所有“公有方法”都定义在闭包内,共享对私有数据的访问权
  • 每次调用构造函数都会创建独立的闭包环境,保证实例间私有状态隔离

示例:

function Counter() {
  let count = 0; // 私有变量,外部不可见
<p>return {
increment() { count++; },
decrement() { count--; },
value() { return count; }
};
}</p><p>const c1 = Counter();
const c2 = Counter();
c1.increment();
console.log(c1.value()); // 1
console.log(c2.value()); // 0 —— 互不影响</p>

结合原型与闭包:兼顾复用与私有

纯闭包方式每次实例化都新建方法,内存开销略大。可将公有方法放在原型上,同时用闭包保存私有数据映射表(如 WeakMap),实现方法复用与私有状态分离。

立即学习Java免费学习笔记(深入)”;

社研通
社研通

文科研究生的学术加速器

下载
  • WeakMap 键必须是对象,值可任意,适合绑定实例与私有数据
  • 私有数据仅对闭包内方法可见,WeakMap 自身不暴露给外部
  • 原型方法通过 WeakMap.get(this) 获取对应私有状态,保持逻辑清晰

示例:

const privateData = new WeakMap();
<p>function Person(name) {
privateData.set(this, { name: name || 'anonymous', _age: 0 });
}</p><p>Person.prototype.getName = function() {
return privateData.get(this).name;
};</p><p>Person.prototype.setAge = function(age) {
if (age >= 0) {
privateData.get(this)._age = age;
}
};</p><p>Person.prototype.getAge = function() {
return privateData.get(this)._age;
};</p>

ES6 类 + # 私有字段(现代替代方案)

虽然闭包方案经典可靠,但 ES2022 起已支持真正的语法级私有字段(#name)。它比闭包更简洁、更易读,且被引擎深度优化。

  • # 开头的字段和方法只能在类内部访问,运行时强制检查
  • 无需手动管理 WeakMap 或闭包,语义明确,调试友好
  • 仍建议在需要兼容老环境(如 IE、旧版 Node.js)时回退到闭包或 WeakMap 方案

示例:

class BankAccount {
  #balance = 0;
<p>constructor(initial) {
this.#balance = initial || 0;
}</p><p>deposit(amount) {
if (amount > 0) this.#balance += amount;
}</p><p>getBalance() {
return this.#balance;
}
}</p>

注意事项与常见误区

闭包实现私有性虽强大,但需注意边界问题:

  • 不要在闭包内返回私有变量的引用(如数组、对象),否则外部仍可修改内容
  • 避免在循环中创建闭包并绑定索引(如 for(var i...)),应使用 let 或立即执行函数修正作用域
  • 私有变量无法被 JSON.stringify 序列化,也不参与 for...in 遍历,这是设计使然,不是 bug
  • 调试时 Chrome DevTools 可显示闭包变量(Closure scope),但无法在控制台直接修改,确保了安全性

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

457

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

549

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

83

2025.09.10

chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

1079

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

849

2023.11.06

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

C++多线程并发控制与线程安全设计实践
C++多线程并发控制与线程安全设计实践

本专题围绕 C++ 在高性能系统开发中的并发控制技术展开,系统讲解多线程编程模型与线程安全设计方法。内容包括互斥锁、读写锁、条件变量、原子操作以及线程池实现机制,同时结合实际案例分析并发竞争、死锁避免与性能优化策略。通过实践讲解,帮助开发者掌握构建稳定高效并发系统的关键技术。

4

2026.03.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号