Using javascript prototype function to initialise variable in 'this' context

Question

I'm finding it difficult to explain in words, so here's a snippet of code I'm trying out but Firefox/firebug goes into tailspin!

I'm trying to follow this and this as a guide. What I'm trying to do here is

new MyObject.Method('string',optionsArray);

optionsArray items are iterated and saved using the prototype function Set()

if(typeof(MyObj) == 'undefined') MyObj= {};
    MyObj.Method = function initialise(id,options) 
{
    this.id = id;
    this.options = options;
    this.properties ={};

    for (var i = 0; i < this.options.length; i++)  // =>options.length=2 (correct)
    {
        var obj = this.options[i];  
        //get the keynames, pass with values to Set() to update properties
        for (var keys in obj) 
        {
            console.log(keys);  //=> correctly prints 'property1' and 'currentValue'
            this.Set(keys,obj); //=> this is i guess where it enters a loop?
        }
    }
}

//sets properties
MyObj.Method.prototype.Set = function (name, value) 
{
    this.properties[name.toLowerCase()] = value;
}

and in my html page script block, i have

window.onload = function () {

        var options = [
        {    property1: {
                show: true,
                min: 0,
                max: 100
            }
        },
        {
            currentValue: {
                show: true,
                colour: 'black'
            }
        }
    ];

var myObj = new MyObj.Method('someDivId',options);
}

please advise if I'm over complicating the code. I think checking for hasOwnProperty would help.

It's almost impossible to tell what it is you're trying to do here. That code really doesn't make much sense. The "Set" function is on the prototype object for something called "Gauge.Speedometer" and so will have nothing at all to do with "MyObj" or "MyObj.Method". — Pointy
– Pointy, Commented Jan 21, 2011 at 13:21
you are calling MyObj.Method before the options array is initialised or even declared, was this intentional or just a typo? — roryf
– roryf, Commented Jan 21, 2011 at 13:35
also, you're not declaring MyObj at all, so the first line of that snippet will throw an error. — roryf
– roryf, Commented Jan 21, 2011 at 13:37
@Ab that doesn't correct it all, the MyObj.Method call will execute immediately, while the options array won't be created until the window.onload event is fired. — roryf
– roryf, Commented Jan 21, 2011 at 13:38

Ivo Wetzel · Accepted Answer · 2011-01-21 14:46:10Z

This should be a cleaner way of achieving what you want:

function MyObj(id, options) { // a function that will get used as the constructor
    this.id = id;
    this.options = options;
    this.properties = {};
    this.set(options); // call the set method from the prototype
}

MyObj.prototype.set = function(options) { // set the options here
    for(var i = 0, l = options.length; i < l; i++) {
        var obj = this.options[i];
        for(var key in obj) {
            if (obj.hasOwnProperty(key)) { // this will exclude stuff that's on the prototype chain!
                this.properties[key] = obj[key];
            }
        }
    }
    return this; // return the object for chaining purposes
                 // so one can do FooObj.set([...]).set([...]);
};

var test = new MyObj('simeDivId', [...]); // create a new instance of MyObj
test.set('bla', [...]); // set some additional options

Note: For what hasOwnProperty is about please see here.

Exelian · Accepted Answer · 2011-01-21 13:46:18Z

I made a declaration for MyObj and removed the function name initialise since you're obviously declaring this function to be a property of MyObj. Your final code will then be like below, and that runs for me just fine. Please note that you cannot actually call the function until after you declare the prototype function because else the object will have no notion of the Set function.

var MyObj = {};

MyObj.Method = function (id,options)
{
    this.id = id;
    this.properties ={};

    for (var i = 0; i < options.length; i++)  // =>options.length=2 (correct)
    {
        var obj = options[i];  
        //get the keynames, pass with values to Set() to update properties
        for (var keys in obj) 
        {
            console.log(keys);  //=> correctly prints 'property1' and 'currentValue'
            this.Set(keys,obj); //=> this is i guess where it enters a loop?
        }
    }
}

MyObj.Method.prototype.Set = function (name, value) 
{
    this.properties[name.toLowerCase()] = value;
}

var options = [
    {    property1: {
            show: true,
            min: 0,
            max: 100
        }
    },
    {
        currentValue: {
            show: true,
            colour: 'black'
        }
    }
];

var myObj = new MyObj.Method('someDivId',options);

Tom Tu · Accepted Answer · 2011-12-10 14:44:17Z

var MyObj = {};

MyObj.Method = function initialise(id,options) {

    this.id = id;
    this.options = options;
    this.properties = {};

    for (var i = 0; i < this.options.length; i++)
    {
        var obj = this.options[i];  
        for (var keys in obj) {

            this.Set(keys,obj[keys]); 

            //*fix obj => obj[keys] 
            // (and it should be singular key rather then keys

        }
    }

    console.log(this.properties) // will output what you want
}

//sets properties
MyObj.Method.prototype.Set = function (name, value) {
    this.properties[name.toLowerCase()] = value;
}


var options = [{
    property1: {
        show: true,
        min: 0,
        max: 100
    }
},{
    currentValue: {
        show: true,
        colour: 'black'
    }
}];

var myObj = new MyObj.Method('someDivId',options);

this should work problem is you had your myObj = new MyObj... outside your onload event and options was out of its scope as it was declared as private variable to the anonymous function bound to the onload event.

I've fixed also the way you was copying the values to the properties as it doubled the names of the property and made it a bit messy.

Collectives™ on Stack Overflow

Using javascript prototype function to initialise variable in 'this' context

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related