JavaScript - Using object prototypes to extend the usage of a method?

Question

I am very new to JavaScript, and when working with my object's prototype I try to call the current object to extend a method but it is not working. So I google'd my problem but didn't really get anywhere as it is practically impossible to phrase. However, I found the this keyword which I thought should work but didn't. Here's what I have:

(function( window, document, undefined ) {
    var myObj = function ( ) { }; // not a noop
    var ua = function() { return navigator.userAgent.toLowerCase(); }
    function noop() { }; // empty noop function

    myObj.prototype = {
        constructor: myObj,
        renderizr: {
            presto: ua().match(/(opera|presto)/i),
            trident: ua().match(/trident/i), // don't parse "msie" as opera uses this sometimes
            webkit: ua().match(/(chrome|safari|webkit)/i),
            gecko: ua().match(/(firefox|gecko)/i), // don't parse "netscape" as a lot of strings use this
            val: '' // keep empty for now
        }
    };

    // renderizr.val extension
    // use this so the user can print the value of
    // the rendering engine instead of using multiple
    // conditional statements.
        if(this.renderizr.presto) { this.renderizr.val = "Presto" }
        else if(this.renderizr.trident) { this.renderizr.val = "Trident") }
        else if(this.renderizr.webkit) { this.renderizr.val = "Webkit") }
        else if(this.renderizr.gecko) { this.renderizr.val = "Gecko") }

    window.myObj = new myObj();
}( window, document ));

This way, you can do alert(myObj.renderizr.val); instead of doing monotonous conditional statements.

I don't want to do generic browser name detection because you're only supposed to test for the features which you need, not the browser. However, some rendering engines have different habits for rendering web pages, so I do want to include in my script. 。 (However, I don't suggest using this, like I said, I just want to get to know javascript and how it works, and it's not working!).

So my question is, what am I doing wrong here and how can I fix it? Why doesn't the this keyword work?

Answer 1

You are using this in a context where you are not in the instance of a myObj object. this will be the global scope (ie. window).

Also, all your code is running immediately, you are not defining any functions in your prototype .

Answer 2

I believe you want those checks inside your constructor:

var myObj = function () {
    // renderizr.val extension
    // use this so the user can print the value of
    // the rendering engine instead of using multiple
    // conditional statements.
    if(this.renderizr.presto) { this.renderizr.val = "Presto" }
    else if(this.renderizr.trident) { this.renderizr.val = "Trident" }
    else if(this.renderizr.webkit) { this.renderizr.val = "Webkit" }
    else if(this.renderizr.gecko) { this.renderizr.val = "Gecko" }
};

Also, you have some extra ) inside your else if statements, causing syntax errors. Check a working version here: http://jsfiddle.net/SnKSB/ .