javascript-objects - 使用 javascript 原型函数在“this”上下文中初始化变量

Question

我发现很难用语言来解释，所以这是我正在尝试的一段代码，但 Firefox/firebug 进入了混乱状态！

我试图按照这个和这个作为指导。我在这里想做的是

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

2. 使用原型函数 Set() 迭代和保存 optionsArray 项

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

   在我的 html 页面脚本块中，我有

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

请告知我是否过度复杂化代码。我认为检查 hasOwnProperty 会有所帮助。

Answer 1

这应该是实现您想要的更清洁的方式：

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

注意：有关内容hasOwnProperty，请参见此处。

Answer 2

我声明MyObj并删除了函数名initialise，因为您显然是在声明这个函数是MyObj. 然后，您的最终代码将如下所示，并且对我来说运行得很好。请注意，在声明原型函数之前，您不能实际调用该函数，因为否则该对象将没有Set函数的概念。

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

这应该可行的问题是您的myObj = new MyObj...在您的 onload 事件之外，并且 options 超出了其范围，因为它被声明为绑定到 onload 事件的匿名函数的私有变量。

我还修复了您将值复制到属性的方式，因为它使属性名称加倍并使其有点混乱。