Type Error when using prototypes

Question

I'm just getting started on Prototypes, and I'm trying to test different things on a website I'm developing. But I stumbled upon an error and I'm not sure why, because I was using that property before and it worked.

I ain't no experienced JavaScript developer, I'm still learning, but here's what I got:

var defaults = {
    local_storage_key   : "Cluster",
    plugin_navigation   : ".navigation",
    plugin_wrapper      : "content-wrapper",
    iqns_class          : ".iqn"
}

var Clusters = function(environment, options){

    this.options = $.extend({}, defaults, options);

    this.environment = environment;

    this.viewport = $(window);

    this.viewport_width = this.viewport.width();
    this.viewport_height = this.viewport.height();

    this.data_key = this.options.local_storage_key;

    this.iqns_class = this.viewport.find(this.options.iqns_class);

    this.iqn = this.iqns_class.parent();

    this.shop_initiated = false;

    this.plugin_navigation = this.options.plugin_navigation;

    this.plugin_wrapper = this.options.plugin_wrapper;

    this.initiate_plugin(this.plugin_navigation, {
        containerID : this.plugin_wrapper,
        first       : false,
        previous    : false,
        next        : false,
        last        : false,
        startPage   : this.get_local_storage_data(),
        perPage     : 6,
        midRange    : 15,
        startRange  : 1,
        endRange    : 1,
        keyBrowse   : false,
        scrollBrowse: false,
        pause       : 0,
        clickStop   : true,
        delay       : 50,
        direction   : "auto",
        animation   : "fadeInUp",
        links       : "title",
        fallback    : 1000,
        minHeight   : true,
        callback    : function(pages) {
            this.set_local_storage_data(pages.current);
        }
    });

    this.initiate_auxiliars();

    this.set_environment();

};

Clusters.prototype.set_local_storage_data = function(data_val) {
    return localStorage.setItem(this.data_key, data_val);
};

Clusters.prototype.get_local_storage_data = function() {
    return +(localStorage.getItem(this.data_key) || 1);
};

Clusters.prototype.shop_iqns_selected_class = function() {
    var self = this;
    if (this.viewport_width < 980) {
        $(this.iqns_class).each(function(index, element) {
            var element = $(element);
            $(self.iqn).on('click', function() {
                if (element.hasClass('selected')) {
                    element.removeClass('selected');
                } else {
                    element.addClass('selected');
                }
            });
        });
    }
}

Clusters.prototype.initiate_plugin = function(plugin_navigation, plugin_options) {
    return $(plugin_navigation).jPages(plugin_options);
}

Clusters.prototype.initiate_auxiliars = function() {
    return this.shop_iqns_selected_class();
}

Clusters.prototype.set_environment = function() {
    if(this.environment == "Development") {
        less.env = "development";
        less.watch();
    }
}

var cluster = new Clusters("Development");

I'm sure there's something I'm doing wrong or misunderstood about Prototyping, because otherwise I wouldn't get any errors. I'm just asking for some opinions or some directions on what I'm doing wrong, and what I should do or shouldn't do.

This is the error I get:

Uncaught TypeError: Object #<Object> has no method 'set_local_storage_data' on line 53

Answer 1

As you are using a callback function, the this keyword won't reference the cluster object any more. The callback will be executed in some other context, which "has no method 'set_local_storage_data'".

To avoid that, you can either bind() the function to your cluster object, or you use a local variable in the constructor's scope to reference the cluster object:

var that = this;
this.initiate_plugin(
    ...,
    function(pages) {
        that.set_local_storage_data(pages.current);
    }
);