Question

所以我有一个类似于......的JS对象。

var Monitor=function(parent,params={}){
    this.parent=null;
    this.canvas=null;
    this.width=600;
    this.height=400;
    this.backColor="#252525";
    this.lineColor="#0171a7";
    this.lineWidth=4;
    this.radius=3;

    /* 2017-12-31 **********************************
    Innitialize the monitor class
    ***********************************************/
    this.init=function(parent,params){
        var that=this;
        this.parent=parent;

        //Loop through params and set them.
        $.each(params,function(i,val){
            eval("that."+i+"="+val);
        })
        return this;
    };

    this.init(parent,params);
}

并将其称为......

mc=new Monitor(
    $("#monitors"),
    {
        "width":800;
        "height":600,
    }
);

我想在循环中动态设置属性。

然而，要使它工作，我必须使用eval（Eval是邪恶的......对吧？）。那么有更好的动态设置属性的方法吗？

Answer 1

一个例子，我希望能帮到你，没有评估

var parent="monitor",
params = {width:600, height:400};

var Monitor = function(parent,params){
    alert(parent);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
        alert(key + " -> " + params[key]);
        }
        }

}

Monitor(parent,params);

https://fiddle.jshell.net/skppt6go/

Answer 2

就这样做：

 that[i]=val;

这里是完整的工作样本：

＆＃13;

var Monitor=function(parent,params={}){
    this.parent=null;
    this.canvas=null;
    this.width=600;
    this.height=400;
    this.backColor="#252525";
    this.lineColor="#0171a7";
    this.lineWidth=4;
    this.radius=3;

    /* 2017-12-31 **********************************
    Innitialize the monitor class
    ***********************************************/
    this.init=function(parent,params){
        var that=this;
        this.parent=parent;

        //Loop through params and set them.
        $.each(params,function(i,val){
           // eval("that."+i+"="+val);
          that[i]=val;
        })
        return this;
    };

    this.init(parent,params);
}
 

mc=new Monitor(
    $("#monitors"),
    {
        "width":800,
        "height":600
    }
);
debugger;
console.dir(mc.height);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

在你的函数中创建一组这样的选项，并将它们与你传递的选项合并，同时创建一个你不需要遍历每个选项的对象来设置它只需使用$.extend并合并默认值通过param传递选项的选项，

＆＃13;

var Monitor = function(params) {
 
  let defaults = {
    parent: null,
    canvas: null,
    width: 600,
    height: 400,
    backColor: "#252525",
    lineColor: "#0171a7",
    lineWidth: 4,
    radius: 3
  };

  let options = $.extend({}, defaults, params);

  /* 2017-12-31 **********************************
  Innitialize the monitor class
  ***********************************************/
  this.init = function() {
      console.log(options);    
    return this;
  };

  this.init();
}


mc = new Monitor({
  parent: $("#monitors"),
  width: 800,
  height: 600,
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如何在JavaScript中动态设置对象的属性

3 个答案: