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 engine detection 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?

Read developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/… — Bergi
– Bergi, Commented Feb 12, 2013 at 23:49

Halcyon · Accepted Answer · 2013-02-12 23:40:27Z

5

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.

answered Feb 12, 2013 at 23:40

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

randmath Over a year ago

Okay, so how would I go about that? I can't put a conditional statement inside of a variable scope. And outside of the scope, I can't use this. If I use myObj, myObj is not yet defined. Any ideas on how to correctly do this, while staying inside of the immediately invoking function expression?

randmath Over a year ago

Could I set the prototype to a function instead of a sub-object? Like: myObj.prototype = function() { ... if statements... ...methods... }? Or does prototype have to be an object?

Bergi Over a year ago

@randmath: No, it does not need to be, but a function is certainly a bad idea. Why would you do that?

randmath Over a year ago

Because a function can have conditional statements, but an object can't, because it expects another variable and it's value. Or am I wrong? Is there a way to do this that I'm not aware of?

bfavaretto Over a year ago

@randmath It really looks like you're looking for a constructor function. See my answer.

bfavaretto · Accepted Answer · 2013-02-13 00:04:27Z

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/.

answered Feb 13, 2013 at 0:04

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related