JavaScript WeakRef 模式：内存高效的对象管理

            // The 'root' is a set of globally accessible objects, like the 'window' object.
// Let's create an object.
let largeObject = {
  id: 1,
  data: new Array(1000000).fill('some data') // A large payload
};

// We create a strong reference to it.
let myReference = largeObject;

// Now, even if we 'forget' the original variable...
largeObject = null;

// ...the object is NOT eligible for garbage collection because 'myReference'
// is still strongly pointing to it. It is reachable.

// Only when all strong references are gone is it collected.
myReference = null;
// Now, the object is unreachable and can be collected by the GC.
            

              
                Copy
              
            
          

            const targetObject = { name: 'My Target' };
const weakRef = new WeakRef(targetObject);
            

              
                Copy
              
            
          

            let userProfile = { userId: 123, theme: 'dark' };
const userProfileRef = new WeakRef(userProfile);

// To access the object, we must dereference it.
let retrievedProfile = userProfileRef.deref();

if (retrievedProfile) {
  console.log(`User ${retrievedProfile.userId} has the ${retrievedProfile.theme} theme.`);
} else {
  console.log('User profile has been garbage collected.');
}

// Now, let's remove the only strong reference to the object.
userProfile = null;

// At some point in the future, the GC may run. We cannot force it.
// After GC, calling deref() will yield undefined.
setTimeout(() => {
  let finalCheck = userProfileRef.deref();
  console.log('Final check:', finalCheck); // Likely to be 'undefined'
}, 5000);
            

              
                Copy
              
            
          

            // Anti-pattern: Don't do this!
const myObjectRef = weakRef.deref();

// If myObjectRef is not null, it's now a strong reference.
// The object won't be collected as long as myObjectRef exists.

// Correct pattern:
function operateOnObject(weakRef) {
  const target = weakRef.deref();
  if (target) {
    // Use 'target' only within this scope.
    target.doSomething();
  }
}
            

              
                Copy
              
            
          

            // 1. Create a registry with a cleanup callback.
const registry = new FinalizationRegistry(heldValue => {
  // This callback is executed after the target object is collected.
  console.log(`An object has been collected. Cleanup value: ${heldValue}`);
});

// 2. Create an object and register it.
(() => {
  let anObject = { id: 'resource-456' };

  // Register the object. We pass a 'heldValue' that will be given
  // to our callback. This value MUST NOT be a reference to the object itself!
  registry.register(anObject, 'resource-456-cleaned-up');

  // The strong reference to anObject is lost when this IIFE ends.
})();

// Sometime later, after the GC runs, the callback will be triggered, and you'll see:
// "An object has been collected. Cleanup value: resource-456-cleaned-up"
            

              
                Copy
              
            
          

            const unregisterToken = { id: 'my-token' };
registry.register(anObject, 'some-value', unregisterToken);

// Later, if we clean up explicitly...
registry.unregister(unregisterToken);
// Now, the finalization callback will not run for 'anObject'.
            

              
                Copy
              
            
          

            class WeakRefCache {
  constructor() {
    this.cache = new Map();
  }

  set(key, largeObject) {
    // Store a WeakRef to the object, not the object itself.
    this.cache.set(key, new WeakRef(largeObject));
    console.log(`Cached object with key: ${key}`);
  }

  get(key) {
    const ref = this.cache.get(key);
    if (!ref) {
      return undefined; // Not in cache
    }

    const cachedObject = ref.deref();
    if (cachedObject) {
      console.log(`Cache hit for key: ${key}`);
      return cachedObject;
    } else {
      // The object was garbage collected.
      console.log(`Cache miss for key: ${key}. Object was collected.`);
      this.cache.delete(key); // Clean up the stale entry.
      return undefined;
    }
  }
}

const cache = new WeakRefCache();

function processLargeData() {
  let largeData = { payload: new Array(2000000).fill('x') };
  cache.set('myData', largeData);
  
  // When this function ends, 'largeData' is the only strong reference,
  // but it's about to go out of scope.
  // The cache only holds a weak reference.
}

processLargeData();

// Immediately check the cache
let fromCache = cache.get('myData');
console.log('Got from cache immediately:', fromCache ? 'Yes' : 'No'); // Yes

// After a delay, allowing for potential GC
setTimeout(() => {
  let fromCacheLater = cache.get('myData');
  console.log('Got from cache later:', fromCacheLater ? 'Yes' : 'No'); // Likely No
}, 5000);
            

              
                Copy
              
            
          

            class DataBroadcaster {
  constructor() {
    this.subscribers = [];
  }

  subscribe(component) {
    // Store a weak reference to the component.
    this.subscribers.push(new WeakRef(component));
  }

  notify(data) {
    // When notifying, we must be defensive.
    const liveSubscribers = [];
    for (const ref of this.subscribers) {
      const subscriber = ref.deref();
      if (subscriber) {
        // It's still alive, so notify it.
        subscriber.update(data);
        liveSubscribers.push(ref); // Keep it for the next round
      } else {
        // This one was collected, don't keep its WeakRef.
        console.log('A subscriber component was garbage collected.');
      }
    }
    // Prune the list of dead references.
    this.subscribers = liveSubscribers;
  }
}

// A mock UI Component class
class MyComponent {
  constructor(id) {
    this.id = id;
  }
  update(data) {
    console.log(`Component ${this.id} received update:`, data);
  }
}

const broadcaster = new DataBroadcaster();

let componentA = new MyComponent(1);
broadcaster.subscribe(componentA);

function createAndDestroyComponent() {
  let componentB = new MyComponent(2);
  broadcaster.subscribe(componentB);
  // componentB's strong reference is lost when this function returns.
}

createAndDestroyComponent();

broadcaster.notify({ message: 'First update' });
// Expected output:
// Component 1 received update: { message: 'First update' }
// Component 2 received update: { message: 'First update' }

// After a delay to allow for GC
setTimeout(() => {
  console.log('\n--- Notifying after delay ---');
  broadcaster.notify({ message: 'Second update' });
  // Expected output:
  // A subscriber component was garbage collected.
  // Component 1 received update: { message: 'Second update' }
}, 5000);
            

              
                Copy
              
            
          

            // Let's simulate a native binding.
const native_bindings = {
  open_file(path) {
    const handleId = Math.random();
    console.log(`[Native] Opened file '${path}' with handle ${handleId}`);
    return handleId;
  },
  close_file(handleId) {
    console.log(`[Native] Closed file with handle ${handleId}. Resource freed.`);
  }
};

const fileRegistry = new FinalizationRegistry(handleId => {
  console.log('Finalizer running: a file handle was not explicitly closed!');
  native_bindings.close_file(handleId);
});

class ManagedFile {
  constructor(path) {
    this.handle = native_bindings.open_file(path);
    // Register this instance with the registry.
    // The 'heldValue' is the handle, which is needed for cleanup.
    fileRegistry.register(this, this.handle);
  }

  // The responsible way to clean up.
  close() {
    if (this.handle) {
      native_bindings.close_file(this.handle);
      // IMPORTANT: We should ideally unregister to prevent the finalizer from running.
      // For simplicity, this example omits the unregisterToken, but in a real app, you'd use it.
      this.handle = null;
      console.log('File closed explicitly.');
    }
  }
}

function processFile() {
  const file = new ManagedFile('/path/to/my/data.bin');
  // ... do work with the file ...
  // Developer forgets to call file.close()
}

processFile();

// At this point, the 'file' object is unreachable.
// Sometime later, after the GC runs, the FinalizationRegistry callback will fire.
// Output will eventually include:
// "Finalizer running: a file handle was not explicitly closed!"
// "[Native] Closed file with handle ... Resource freed."
            

              
                Copy
              
            
          

            class ObjectLifecycleTracker {
  constructor(name) {
    this.name = name;
    this.liveObjects = new Set();
    this.registry = new FinalizationRegistry(objectId => {
      console.log(`[${this.name}] Object with id '${objectId}' has been collected.`);
      // Here you could update metrics or internal state.
    });
  }

  track(obj, id) {
    console.log(`[${this.name}] Started tracking object with id '${id}'`);
    const ref = new WeakRef(obj);
    this.liveObjects.add(ref);
    this.registry.register(obj, id);
  }

  getLiveObjectCount() {
    // This is a bit inefficient for a real app, but demonstrates the principle.
    let count = 0;
    for (const ref of this.liveObjects) {
      if (ref.deref()) {
        count++;
      }
    }
    return count;
  }
}

const widgetTracker = new ObjectLifecycleTracker('WidgetTracker');

function createWidgets() {
  let widget1 = { name: 'Main Widget' };
  let widget2 = { name: 'Temporary Widget' };
  widgetTracker.track(widget1, 'widget-1');
  widgetTracker.track(widget2, 'widget-2');

  // Return a strong reference to only one widget
  return widget1;
}

const mainWidget = createWidgets();

console.log(`Live objects right after creation: ${widgetTracker.getLiveObjectCount()}`);

// After a delay, widget2 should be collected.
setTimeout(() => {
  console.log('\n--- After delay ---');
  console.log(`Live objects after GC: ${widgetTracker.getLiveObjectCount()}`);
}, 5000);

// Expected Output:
// [WidgetTracker] Started tracking object with id 'widget-1'
// [WidgetTracker] Started tracking object with id 'widget-2'
// Live objects right after creation: 2
// --- After delay ---
// [WidgetTracker] Object with id 'widget-2' has been collected.
// Live objects after GC: 1
            

              
                Copy