当前位置:首页 > JavaScript

js实现weakmap

2026-01-31 15:20:07JavaScript

WeakMap 的基本概念

WeakMap 是 JavaScript 中的一种集合类型,允许将对象作为键名。与普通的 Map 不同,WeakMap 的键名必须是对象,且键名是弱引用,不会阻止垃圾回收机制对键名对象的回收。当键名对象被回收后,对应的键值对会自动从 WeakMap 中移除。

创建 WeakMap

使用 new WeakMap() 构造函数可以创建一个空的 WeakMap。WeakMap 的键必须是对象,值可以是任意类型。

const weakMap = new WeakMap();
const keyObj = {};
weakMap.set(keyObj, 'value associated with keyObj');

WeakMap 的常用方法

WeakMap 提供了三个主要方法:setgethas,以及一个 delete 方法。与 Map 不同,WeakMap 不支持迭代或直接访问所有键值对。

const weakMap = new WeakMap();
const keyObj = {};

// 设置键值对
weakMap.set(keyObj, 'some value');

// 获取值
console.log(weakMap.get(keyObj)); // 输出: 'some value'

// 检查键是否存在
console.log(weakMap.has(keyObj)); // 输出: true

// 删除键值对
weakMap.delete(keyObj);
console.log(weakMap.has(keyObj)); // 输出: false

WeakMap 的特性

WeakMap 的键名是弱引用,不会阻止垃圾回收。当键名对象没有其他引用时,垃圾回收器会自动回收该对象,并从 WeakMap 中移除对应的键值对。

let keyObj = {};
const weakMap = new WeakMap();
weakMap.set(keyObj, 'value');

// 移除对 keyObj 的引用
keyObj = null;

// 垃圾回收后,weakMap 中的键值对会自动移除

WeakMap 的应用场景

WeakMap 常用于存储与对象关联的私有数据或元数据,而不会影响对象的生命周期。例如,可以在不修改对象本身的情况下,为其附加额外的信息。

const privateData = new WeakMap();

class MyClass {
  constructor() {
    privateData.set(this, { secret: 42 });
  }

  getSecret() {
    return privateData.get(this).secret;
  }
}

const instance = new MyClass();
console.log(instance.getSecret()); // 输出: 42

WeakMap 与 Map 的区别

WeakMap 和 Map 的主要区别在于键名的引用强度。Map 的键名是强引用,会阻止垃圾回收,而 WeakMap 的键名是弱引用,不会阻止垃圾回收。此外,WeakMap 不支持迭代或直接访问所有键值对。

const map = new Map();
const weakMap = new WeakMap();
let keyObj = {};

map.set(keyObj, 'map value');
weakMap.set(keyObj, 'weakmap value');

// 移除对 keyObj 的引用
keyObj = null;

// map 仍然保留键值对,weakMap 的键值对会被回收

注意事项

WeakMap 的键名必须是对象,不能是原始值(如字符串、数字等)。尝试使用非对象作为键名会抛出错误。

js实现weakmap

const weakMap = new WeakMap();
weakMap.set('primitive', 'value'); // 抛出 TypeError

浏览器兼容性

WeakMap 是 ES6 引入的特性,现代浏览器和 Node.js 环境均支持。在不支持的环境中,可以通过 polyfill 实现类似功能。

标签: jsweakmap
分享给朋友:

相关文章

js 实现继承

js 实现继承

原型链继承 通过让子类的原型对象指向父类的实例来实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Par…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…