動的にJavaScriptでオブジェクトのプロパティを設定する方法

Question

SO私はのようになります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

を望む：

ここ

that[i]=val; 

完全に動作するサンプル：

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

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

Answer 2

たとえば、私はちょうどこのようにそれを行うこと助けます、ノーevalの

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 3

オブジェクトを作成中に$.extendを使用して、デフォルトのオプションをマージするだけで、それを設定するには、各オプションをループする必要はありませんあなたの関数内でこのようなオプションのセットを作成し、渡されたオプションでそれらをマージPARAM、

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

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