2017-12-31 25 views
0

SO私はのようになりますJSオブジェクト..動的にJavaScriptでオブジェクトのプロパティを設定する方法

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は悪い...右か?)を使用する必要があります。 プロパティを動的に設定するより良い方法はありますか?

+0

を経由して渡されたオプションは、車輪の再発明しないで、機能はそのためにあります: '$ .extend(これ、のparams)'や 'Object.assign(これをチェック、params) 'in vanilla JS(ES6) – Thomas

+0

[名前として変数を使用してJavaScriptオブジェクトにプロパティを追加するにはどうすればよいですか?](https://stackoverflow.com/questions/695050/how-do-i-add-a-property-to- a-javascript-object-a-variable-as-the-name) –

答えて

0

を望む:

ここ
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>

+0

これは意味があります、ありがとう! –

1

たとえば、私はちょうどこのようにそれを行うこと助けます、ノー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/

0

オブジェクトを作成中に$.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>

関連する問題