在回调[prototype]中访问类方法的正确方法

Question

I'm using prototype 1.7 and building a class that will essentially take a list of divs and builds a tab interface.

var tabs = Class.create({
    initialize: function(container, options) {
        this.options = Object.extend({
            // additional options
            tabsRendered: null,
        }, options || {});

        // init code

        if( this.options.tabsRendered ) {
            this.options.tabsRendered();
        }
    },

    // additional methods

    setCurrent: function(link){
        //adds a .current class to tab clicked and its corresponding section
    }
};

new vtabs( 'products', {
    tabsRendered: function(){
        if( window.location.hash != "" ) {
            var link = $$( 'a[href$="' + window.location.hash + '"]');
            this.setCurrent(link);
        } 
    }
});

My question relates to my tabsRendered custom callback. When the callback runs, this.setCurrent(link) does nothing.

If I pass this into the callback, my custom callback works as expected.

if( this.options.tabsRendered ) {
    this.options.tabsRendered(this);
}

My guess is that passing this into the callback is not best practice. So, how would I allow access to a method from within a callback?

Thanks

Answer 1

The problem is that tabsRendered is unbound . With Prototype you'll have to bind anonymous functions using bind() . After // init code do:

if (Object.isFunction(this.options.tabsRendered))
  this.options.tabsRendered = this.options.tabsRendered.bind(this);

After that you can call this.options.tabsRendered() and within that once-anonymous function, this will refer to the right object. For details on binding see the Prototype API docs .

EDIT: As commented: it's correct that anonymous functions aren't the only ones affected. It's the this from the scope from which a function was defined.