2017-12-31 12 views
0

SO habe ich ein JS-Objekt, das etwas aussieht ..Wie Eigenschaften eines Objekts in JavaScript dynamisch setzen

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

und nennen Sie es mit ...

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

ich festlegen möchten die Eigenschaften dynamisch in einer Schleife.

Um es jedoch zur Arbeit zu bringen, muss ich eval (Eval ist böse ... oder?) Verwenden. Also gibt es eine bessere Möglichkeit, Eigenschaften dynamisch festzulegen?

+0

Sie das Rad nicht neu erfinden, es gibt eine Funktion für das check out '$ .extend (this, params)' oder 'Object.assign (dies , params) 'in Vanille JS (ES6) – Thomas

+0

Mögliches Duplikat von [Wie füge ich eine Eigenschaft zu einem JavaScript-Objekt hinzu, indem ich eine Variable als Name verwende?] (Https://stackoverflow.com/questions/695050/how-do-i-add-a-property-to- a-javascript-object-using-a-variable-as-the-name) –

Antwort

0

Just do it wie folgt aus:

that[i]=val; 

Hier wird die volle Arbeitsprobe:

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

Nun, das macht Sinn, danke! –

1

Ein Beispiel möchte ich, dass Ihnen helfen, keine 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

eine Reihe von Optionen, wie diese in Ihrer Funktion erstellen und kombinierte sie mit Ihren gebenen Optionen, während ein Objekt zu schaffen Sie nicht einer Schleife durch jede Option der Standardoptionen festlegen benötigen nur $.extend nutzen und verschmelzen mit die übergebenen Optionen über 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>

Verwandte Themen