修改在回调中传递的变量

Question

How can i modified/update a variable passed inside a callback ?

Example:

 function App() { this.components = {}; this.queue = {}; } App.prototype.import = function (name, cb) { if (this.components[name]) { return cb(this.components[name]); } if (!this.queue[name]) { this.queue[name] = []; } // push to queue this.queue[name].push(cb); }; App.prototype.export = function (name, data) { let that = this; // set components instance this.components[name] = data; // call queue ? if (this.queue[name]) { // call each import request this.queue[name].forEach(function (cb) { cb(that.components[name]); }); // clean up delete this.queue[name]; } }; App.prototype.reload = function (name, data) { console.log("Reload module %s", name); delete this.components[name]; this.components[name] = data; }; var app = new App(); app.import("module1", function(data){ console.log("Imported module1"); setInterval(function(){ console.log(data, app.components["module1"]); }, 1000); }); setTimeout(function(){ app.export("module1", {data: "Hello World"}) }, 1000); setTimeout(function(){ app.reload("module1", {data: "Changed data"}); }, 5000); 

If you run this snipet you can see: app.components.module1 is updated but not the callback scope. How can i solve this ?

I want if the app.components.module1 is updated the variable in the cb too.

Answer 1

You cannot delete the object as you will loose reference. However you could mutate it:

App.prototype.reload = function (name, data) {
  console.log("Reload module %s", name);
  Object.keys(this.components[name]).forEach(key =>{
    delete this.components[name][key];
  });
  Object.assign(this.components[name],data);
};

(That wont work with primitive types and isnt the best code design)

Or you implement sth like a Listener pattern:

class Listener {
 constructor(){
    this.listeners = new Map();
  }
  on(event,handler){
    if( this.listeners.has(event) ){
      this.listeners.get(event).push(handler);
    }else{
      this.listeners.set(event,[handler]);
    }
  }

  trigger(event, ...params){
    (this.listeners.get(event) || []).forEach( handler => handler(...params));
  }
}

So one can do:

const loader = new Listener();
loader.on("sth",console.log);

loader.trigger("sth",{a:1});