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

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

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

Answer 1

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.

Answer 2

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);

Answer 3

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.