Javascript传递一个函数，存储其引用，将其值更改为另一个函数

Question

I have ObjectA, and objectB.

I want to take control inside ObjectA when ObjectB has finished its tasks.

So I have () :

ObjectB = function () 
  {
    this.loaded;  // it will be a fun 
    load_end = function () { this.loaded();} 
  } 

and also I have :

ObjectA.set_load_fun = function (ext_fun) { ext_fun = ObjectA.fake_fun;} 

and the code would be :

ObjectA.set_load_fun (ObjectB.loaded);
ObjectB.load();
.....
// when ObjectB has finished calls load_end, and then calls this.loaded
// but this.loaded is really 'ObjectA.fake_fun'
// 

I don't want to write a event listener.... (or maybe I want to write 'builtin' events??) I want to do the same as ajax, filereader, etc.

 xhr.onload     = function(evt) {  };
 xhr.onprogress = function (evt) {};

( In this case, I have not to define addeventlistener (xhr,"onload");}

I simply would want to write

 ObjectB.loaded = ObjectA.fake_fun 
 ObjectB.loaded = global_object.function;
 ObjectB.loaded = mynamespaced.bla.bla.bla.function;

I hope I had explained well....

Any help would be appreciated

Answer 1

If I understood your question well, nearly everything looks good. You just need to assign loaded function to objectB, so you need to pass objectB into set_load_fun method or just assign this function.

eg 1:

ObjectA.set_load_fun = function (obj) { obj.loaded = ObjectA.fake_fun;} ;
ObjectA.set_load_fun (ObjectB);
ObjectB.load();

eg 2:

ObjectB.loaded = ObjectA.fake_fun;
ObjectB.load();

Also if you need to use 'this' keyword to address ObjectA in your loaded function you need to use bind function.

I created JsFiddle example for you. Hope it will help.

Answer 2

You need to wrap the function so it does contains the object in which context you want to evaluate the function.

var A =  {
    prop: "i am in A",
    loaded: function ()  {
        console.log(this.prop); 
    }
}

var B =  {
    call_func: function (fn) {
       fn(); 
    }
}

B.call_func(A.loaded); // in console you will see undefined instead of "i am in A",
//because the function will be evaluated in context of window object

You need to wrap the loaded function so it is evaluated in context of A.

B.call_func(function () {
     A.loaded(); 
}); // now you will see in console "i am in A"

So as you can see, in your code you can't use ObjectB.loaded = ObjectA.fake_fun; if the fake_fun needs to be evaluated in context of ObjectA . You need to change it to ObjectB.loaded = function () { ObjectA.loaded(); }; ObjectB.loaded = function () { ObjectA.loaded(); };

Answer 3

Ok, as far as I understand you want to add a call back function to the loaded variable of objectB and then call it after some time as this.loaded();

Now there can be more than one way of doing that but you want to use it as ObjectB.loaded = fun;

and so instead of

ObjectA.set_load_fun (ObjectB.loaded);

send

ObjectA.set_load_fun (ObjectB);

and use it as :

ObjectA.set_load_fun = function (obj) { obj.loaded = ObjectA.fake_fun;} 

the reason you need to do that is because the if completely change the reference being passed then the original object remains unaffected. for more clarity read pass by value and reference in javascript.