我可以在javascript中模拟一个类似C的指针数组吗？

Question

I'd like to be able to store the addresses of a bunch of different variables in an array. This allows me to access the variables by name or iterate through them if I need to. Is this possible in JS?

(function(ns){

    ns.obj = new function(){

        var foo = "foo";
        var bar = "bar";

        //i really want this:
        //var ary = [&foo, &bar];
        var ary = [foo, bar];


        this.print = function() {
            console.log( foo );
            console.log( bar );
        }

        this.setFoo = function( newFoo ) {
            //i really want this:
            //*(ary[0]) = newFoo;
            ary[0] = newFoo;
        }

        this.printAry = function() {
            for( var i=0; i < ary.length; ++i ) {
                console.log( ary[i] );
            }
        }
    };

}(window.ns = window.ns || {}) );

ns.obj.print();
ns.obj.setFoo("newfoo!");
ns.obj.printAry();
ns.obj.print();

I looked at this:

JavaScript array of pointers like in C++

But I'd like to be able to use an element of ary on the LHS of an assignment and I don't think that example works in this situation.

WHY ON EARTH DO I WANT TO DO THIS?

A lot of comments so far have (rightfully) asked why I'd want to do this. I'm dealing with a proprietary API that involves an asynchronous object initialization mechanism. Basically I create an instance of an object and then pass it to this initializer to be able to actually use it. The initializer includes a field for an onSuccess handler to notify of successful initialization. My fully initialized object is passed as an argument into this success handler so that I can grab a reference to it.

I'm then free to initialize my next object. It looks kinda like this:

     var a = new api.ApiObject();
     var b = new api.ApiObject();
     var c = new api.ApiObject();
     var d = new api.ApiObject();

     //omg this is ugly
     api.initializeObject( {
         objToInit: a,
         onSuccess: function(args) {
             a = args.obj;
             api.initializeObject( {
                 objToInit: b,
                 onSuccess: function(args) {
                     b = args.obj;
                     api.initializeObject( {
                         objToInit: c,
                         onSuccess: function(args) {
                             c = args.obj;
                             api.initializeObject( {
                                 objToInit: d,
                                 onSuccess: function(args) {
                                     d = args.obj;
                                 }
                             } );
                         }
                     } );
                 }
             } );
        }
    } );

    a.doCoolStuff();
    //and so on

This deeply nested mess just gets worse as I add more api.ApiObjects() . So what do I do to fix this? I can't change the API, but maybe a recursive function could help:

    //maybe a recursive function could make this more concise?
    function doInitialize( ary ) {
        api.initializeObject( {
            objToInit: ary[0];
            onSuccess: function(args) {
                //i'd like to assign this passed in reference to my local
                //reference outside this function (var a, b, etc).  
                //An array of pointers would be useful here.
                //how else can I get this assigned out, cuz this doesn't work...
                ary[0] = args.obj;
                if( ary.length > 1 ) {
                    ary.splice( 0, 1 );
                    doInitialize( ary );
                }
            }
        }
    }

    doInitialize( [a,b,c,d] );

    //this won't work because I don't have a reference to the fully initialized object
    a.doCoolStuff();

So maybe the better question is: is there an established pattern to deal with asynchronous success chaining like this? I think I've seen other public JS frameworks (like dojo) use this sort of onSuccess chaining... how do I make this not ugly?

Answer 1

I might suggest that if your primary purpose for this is convenience as regards nesting of asynchronous callbacks, that you should consider a deferred/promise system.

I've written a couple of different promise libraries by hand.
jQuery comes with one built in (as do most "ajax libraries").

Here's what this might look like, in a better world:

doThingOne()
    .then(doThingTwo)
    .then(doThingThree)
    .then(launch);

Assuming that doThingOne returns a promise.

A more familiar looking interface for people who use jQuery (or most other promise-using large libraries), might look like this:

var imageLoader = $.Deferred(),
    loading     = imageLoader.promise();

loading
    .done(gallery.render.bind(gallery))
    .done(gallery.show.bind(gallery));

var img = new Image(),
    url = "...";

img.onload  = function () { imageLoader.resolve(img); };
img.onerror = function () { imageLoader.reject("error message"); };
img.src = url;

Very basically, the Deferred above will hold two private arrays (one for "success", one for "failure"), and will extend an interface which allows the async part of the application to "succeed" or "fail", and will pass in whatever is chosen to be data/a callback/etc.

It also extends a promise method, which returns a promise object, containing subscription functions for the two private arrays. So you pass the promise object around to interested parties, and they subscribe callbacks to be iterated through, on success/failure of the async operation (and passed anything which is passed to the .resolve / .reject method of the operation).

This might seem like an inversion or extension of just adding a custom-event/listener/etc... And it is.

The benefit of the abstraction is that the interface is cleaner.

Hiding this stuff inside of object interfaces, and just passing async promise-objects around can make your code look 100% synchronous:

var images  = ImageLoader(),
    gallery = ImageGallery(),
    photo;


photo = images.load("//url.com/image.png"); // assuming `.load` returns a promise object
gallery.show(photo); // just a promise object, but internally,
                     //`.show` would subscribe a private method to the promise object

And doing things like having three separate async operations, which can arrive in any order, but must all be successful before advancing, then you can have something like this (again jQuery, but doing it by hand is possible, too).

$.when(promise_obj_1, promise_obj_2, promise_obj_3)
.done(nextPhase);

nextPhase, of course, being a callback which you anticipate to be fired if all three promises are successfully completed.

I'd be happy to provide implementation details for a barebones promise system, if you're like me, and don't like using different libraries without first understanding how each piece works on its own, and being able to replicate its functionality, without copying code.

Answer 2

The answer to the first part of your question is to use an object. You're thinking in C which doesn't have iteratable structs so C programmers reach for arrays. In JS objects are iteratable. So you should write it as:

ary = { foo : 'foo', bar : 'bar' }

Or if we look at your second example:

var apis = {
    a : new api.ApiObject(),
    b : new api.ApiObject(),
    c : new api.ApiObject(),
    d : new api.ApiObject()
}

---

Now, as for the second part of your question. Your pseudo recursive code (pseudo because it's not really recursive in the stack sense since it's async) will now work with the apis object above. But you pass the keys instead of the object:

doInitialize( ['a','b','c','d'] );

Obviously, the bit above can be done dynamically by iterating through the apis object. Anyway, in the onSuccess part of the code you assign the result like this:

apis[ary[0]] = args.obj;

Oh, and obviously the objToInit should now be apis[ary[0]] .

Now doing this should work as you expect:

apis.a.doCoolStuff();