JavaScript WeakMap深度解析：构建高效内存敏感型应用

const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { name });
    }
    
    getName() {
        return privateData.get(this).name;
    }
}

// 使用示例
const user = new User('张三');
console.log(user.getName()); // "张三"
console.log(user.name); // undefined

const nodeMetadata = new WeakMap();

function attachMetadata(node, data) {
    nodeMetadata.set(node, data);
}

document.querySelectorAll('.item').forEach(node => {
    attachMetadata(node, {
        timestamp: Date.now(),
        viewCount: 0
    });
});

const cache = new WeakMap();

function getCachedInstance(obj) {
    if (!cache.has(obj)) {
        cache.set(obj, new ExpensiveObject(obj));
    }
    return cache.get(obj);
}

// 自动清理未被引用的实例

const observers = new WeakMap();

function observe(target, callback) {
    if (!observers.has(target)) {
        observers.set(target, new Set());
    }
    observers.get(target).add(callback);
}

function notify(target) {
    observers.get(target)?.forEach(cb => cb());
}

const shapeData = new WeakMap();
const canvas = document.getElementById('canvas');

class Shape {
    constructor(x, y) {
        this.element = document.createElement('div');
        shapeData.set(this.element, this);
        canvas.append(this.element);
    }
}

// 点击获取关联的Shape实例
canvas.addEventListener('click', (e) => {
    const shape = shapeData.get(e.target);
    if (shape) shape.select();
});

function runDemo() {
const output = document.getElementById(‘memoryOutput’);
output.innerHTML = ”;

// 创建大对象
const bigObject = {
data: new Array(1000000).fill(‘test’)
};

// 使用WeakMap关联
const weakMap = new WeakMap();
weakMap.set(bigObject, ‘关联数据’);

output.innerHTML += ‘WeakMap已创建关联
‘;
output.innerHTML += `当前关联状态: ${weakMap.has(bigObject)}
`;

// 移除引用
bigObject = null;
setTimeout(() => {
output.innerHTML += ‘等待GC后关联状态: ‘ + weakMap.has(bigObject);
}, 1000);
}