Question

So, I was reading up on John Resig’s blog, saw his micro-templating javascript engine and decided to try and implement my own template management system for javascript, to deepen my understanding of prototype inheritance. However, the minute I started writing it, I ran into a problem.

To start off, here is my base code:

function template_manager() { };

template_manager.prototype = {
    tags: {},
    templates: {},
    output: {},
    default_template: "default",
    set: function (tags, template_name) {
        template_name = "Greetings!";
        //template_name = this._util.template(this.nothing, this.default_template);
        console.log(template_name);
    },
    get: function(tags, template_name) {
        console.log("Getting");
    },
    unset: function(tags, template_name) {
        console.log("Removing");
    },
    render: function(template_name) {
        console.log("Rendering");
    },
    //_util goes here
};

// Take it for a quick test drive.
test = new template_manager;
test.set();
test.get();
test.unset();
test.render();

Then I started working on some common code, and I decided to put it into a utility object:

    _util: {
        // Used to set the default values for optional arguments
        optional: function(obj, def_value) {
            return (typeof obj === "nothing") ? obj : def_value;
        },
        template: function(template_name) {
            return this._util.optional(template_name, this.default_template);
        },
    },

And now, when I try to call my _util.template() function in my set() function I of course get an error because this points to the _util object rather than the template_manager object. I’ve take a look at the jQuery extend method, and I think that I understand what it’s doing. My question is, do I need to implement my own / use jQuery’s extend method, or is there another way for me to call the template_manager object from my _util object?

(P. S. I’ve looked at Douglas Crockford’s article on prototype inheritance, and I think the answer is there, but I’m afraid I don’t fully understand it yet.)

Answer 1

You can use call or apply i.e.

template_manager.prototype = {
    set: function (tags, template_name) {
        template_name = "Greetings!";
        template_name = this._util.optional.call(this, this.nothing, this.default_template);
        console.log(template_name);
    }
}

See “Getting Out of Binding Situations in JavaScript” article for more explicit explanation.