Verwenden Sie die JavaScript -Prototyp -Funktion zum Initialisierungsvariablen in 'This' Kontext

Question

Ich finde es schwierig, es in Worten zu erklären. Hier ist ein Code -Ausschnitt, den ich ausprobiere, aber Firefox/Firebug geht in Tailspin!

Ich versuche zu folgen Dies und Dies als Leitfaden. Was ich hier versuche, ist

1. new myObject.method ('String', optionsArray);

2. OptionsArray -Elemente werden mit dem Prototyp -Funktionssatz iteriert und gespeichert ()

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

   Und in meinem HTML -Seitenskriptblock habe ich

   window.onload = function () {
   
           var options = [
           {    property1: {
                   show: true,
                   min: 0,
                   max: 100
               }
           },
           {
               currentValue: {
                   show: true,
                   colour: 'black'
               }
           }
       ];
   
   var myObj = new MyObj.Method('someDivId',options);
   }
   

Bitte beraten Sie, ob ich den Code über Komplize bin. Ich denke, es würde helfen, nach HasownProperty zu suchen.

Answer 1

Dies sollte eine sauberere Art sein, das zu erreichen, was Sie wollen:

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

Notiz: Für was hasOwnProperty geht es um bitte siehe hier.

Answer 2

Ich habe eine Erklärung für MyObj und entfernte den Funktionsnamen initialise da Sie offensichtlich diese Funktion als Eigentum von deklarieren MyObj. Ihr endgültiger Code ist dann wie unten und das läuft für mich gut. Bitte beachten Sie, dass Sie kann nicht Rufen Sie tatsächlich die Funktion auf, bis Sie die Prototyp -Funktion deklariert haben, da das Objekt sonst keine Vorstellung von der Set Funktion.

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

Dies sollte Problem mit dem Problem sein, ist, dass Sie Ihre hatten myobj = new myobj ... Außerhalb Ihres Onload -Ereignisses und der Optionen war aus dem Zielfernrohr herausgekommen, da es als private Variable für die anonyme Funktion deklariert wurde, die an das Onload -Ereignis gebunden war.

Ich habe auch die Art und Weise behoben, wie Sie die Werte in die Eigenschaften kopiert haben, da sie die Namen der Eigenschaft verdoppelten und es ein bisschen chaotisch gemacht haben.