Reputation: 17812

Javascript object properties access functions in parent constructor?

So I'm using this pretty standard jquery plugin pattern whereby you can grab an api after applying the jquery function to a specific instance.

This API is essentially a javascript object with a bunch of methods and data.

So I wanted to essentially create some private internal methods for the object only to manipulate data etc, which just doesn't need to be available as part of the API.

So I tried this:

// API returned with new $.TranslationUI(options, container)
$.TranslationUI = function (options, container) {
    // private function?
    function monkey(){
        console.log("blah blah blah");
    }
    // extend the default settings with the options object passed
    this.settings = $.extend({},$.TranslationUI.defaultSettings,options);

    // set a reference for the container dom element
    this.container = container;

    // call the init function
    this.init();
};

The problem I'm running into is that init can't call that function "monkey". I'm not understanding the explanation behind why it can't. Is it because init is a prototype method?($.TranslationUI's prototype is extended with a bunch of methods including init elsewhere in the code)

$.extend($.TranslationUI, {
     prototype: {
            init : function(){
                // doesn't work
                monkey();
                // editing flag
                this.editing = false;
                // init event delegates here for
                // languagepicker
                $(this.settings.languageSelector, this.container).bind("click", {self: this}, this.selectLanguage);
            }
        }
    });

Any explanations would be helpful. Would love other thoughts on creating private methods with this model too.

These particular functions don't HAVE to be in prototype, and I don't NEED private methods protected from being used externally, but I want to know how should I have that requirement in the future.

// Edited based on Matthew's comment So I tried moving the prototype definition based on Matthew's comment. This seems to work now, but still not sure if this is the correct way to be doing this. Thoughts? Obviously it would be cleaner if I move the prototype object into a separate area

$.TranslationUI = function (options, container) {
    function monkey(){
        console.log("blah blah blah");
    }
    // extend the default settings with the options object passed
    this.settings = $.extend({},$.TranslationUI.defaultSettings,options);

    // set a reference for the container dom element
    this.container = container;

    $.extend($.TranslationUI.prototype,
        {
            init : function(){
                monkey();
                // editing flag
                this.editing = false;
                // init event delegates here for
                // languagepicker
                $(this.settings.languageSelector, this.container).bind("click", {self: this}, this.selectLanguage);
            }
        }
    );

    // call the init function
    this.init();
};

So while this works, the crappy part is that I'm re-initing prototype every time that constructor runs. I'm sure that's not efficient. But not sure how else to have the prototype methods have access to private functions/variables of a certain instance.

Upvotes: 2

Answers (3)

Bob Spryn

Reputation: 17812

Alright. So found an answer on stackoverflow, confirmed by Crockford's site.

javascript - accessing private member variables from prototype-defined functions

Essentially, you can't really get access to private functions from the prototype methods. You can via 'privileged' functions, which in turn call private variables and functions, but then you are basically creating a crapload of getters and setters, which might just be doubled in your prototype "public" methods.

So its kind of a lot of work, especially if your stuff doesn't TRULY need to be private.

Upvotes: 1