동적으로 자바 스크립트에서 객체의 속성을 설정하는 방법

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 is evil ... right?)을 사용해야합니다. 속성을 동적으로 설정하는 더 좋은 방법은 무엇입니까?

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

예, 나는 그냥 이런 식으로 할 것을 도움 당신, 아니 평가

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>