⚡ 编程实验室🏗️ HTML🎨 CSS⚡ JavaScript🐍 Python🗄️ SQL☕ Java⚛️ React💚 Vue🟢 Node.js⚙️ C语言🐘 PHP🐹 Go🔷 TypeScript🐬 MySQL🔧 C++🎯 C#🦀 Rust🅱️ Bootstrap💡 jQuery🎸 Django🍃 MongoDB👗 Sass🎪 Kotlin📊 R语言📋 XML📊 Excel🐘 PostgreSQL🐳 Docker🅰️ Angular🎮 游戏🏠 网站首页

JS WeakMap/WeakSet

学习WeakMap · 难度:进阶 · +15XP

JavaScript WeakMap 与 WeakSet 详解

WeakMapWeakSet 是 ES6 引入的弱引用集合类型。它们的键或值是弱引用,不会阻止垃圾回收,适合存储临时数据或私有属性。

WeakMap 与 Map 的区别

特性MapWeakMap
键的类型任意类型只能是对象
引用方式强引用(阻止 GC)弱引用(不阻止 GC)
可迭代支持 for...of不可迭代
size 属性map.size
方法get/set/has/delete/clearget/set/has/delete

WeakMap 使用场景

  1. DOM 节点关联数据:DOM 被移除时自动释放关联数据
  2. 实现私有属性:数据存储在 WeakMap 中,外部无法访问
  3. 缓存计算结果:对象被回收时自动清理缓存
// 场景1:DOM 节点关联(不会造成内存泄漏)
const elementData = new WeakMap();
function setData(element, data) {
  elementData.set(element, data);
}
function getData(element) {
  return elementData.get(element);
}
// DOM 被移除时,关联数据会被自动回收
// 如果用 Map,DOM 移除后仍保留引用,造成泄漏

WeakSet 与私有属性

// WeakSet: 只存储对象,弱引用
const visitedNodes = new WeakSet();
function processNode(node) {
  if (visitedNodes.has(node)) {
    console.log("该节点已处理过");
    return;
  }
  visitedNodes.add(node);
  console.log("节点已处理");
}
// 使用 WeakMap 实现真正私有属性
const _private = new WeakMap();
class User {
  constructor(name, password) {
    _private.set(this, { password });
    this.name = name;
  }
  checkPassword(input) {
    return _private.get(this).password === input;
  }
}
const user = new User("admin", "secret123");
console.log(user.name);          // "admin"
console.log(user.password);      // undefined(私有属性!)
console.log(user.checkPassword("secret123")); // true
Ctrl+Enter
🚀 升级VIP
解锁全部课程+AI助手

🏆 学习排行

加载中...

📊 统计

📖 231 篇
0 完成
🔥 0