Tengo lo siguiente en mi script
var mycolor = 'blue'; var option; option = { grid: { color: mycolor }, axis: { color: mycolor } }Entonces, quiero cambiarlo a rojo. forma habitual sería
option.grid.color = 'red' option.axis.color = 'red' Así funciona; sin embargo, cuando pruebo mycolor='red' , no se actualiza en var option . ¿Cómo puedo en una línea cambiar el color en la opción? Por ejemplo, quiero un comando como option.*.color = red . Gracias
Los objetos son "referencias" hasta que los clones, así que esto funciona:
var myColor = { color: 'blue' }; var option; option = { grid: myColor, axis: myColor, }; console.log(option); // { grid: { color: 'blue' }, axis: { color: 'blue' } } myColor.color = 'red'; console.log(option); // { grid: { color: 'red' }, axis: { color: 'red' } } Tenga en cuenta que no reasigna la variable myColor aquí, eso no funcionaría; en su lugar, establece la propiedad de color dentro del objeto que se usa dos veces en las opciones, actualizando así el valor dentro del objeto al que se hace referencia en las opciones también.
Lo que intenta hacer no es asignar una variable a la opción, sino simplemente pasar el valor a las propiedades del objeto.
Puede usar un setter en el objeto de opción.
option = { grid: { color: "red", }, axis: { color: "red", }, set color(color) { this.grid.color = color; this.axis.color = color; }, }; console.log(option.grid.color); console.log(option.axis.color); option.color = "blue"; console.log(option.grid.color); console.log(option.axis.color); Editar: actualice todas las propiedades con el color del nombre en el objeto
option = { grid: { color: "red", }, axis: { color: "red", }, set allColor(color) { const setColor = obj => { if ( typeof obj === "object" && !Array.isArray(obj) && obj !== null ) { Object.keys(obj).forEach(key => { if (key === "color") { obj[key] = color; } setColor(obj[key]); }); } }; setColor(this); }, get allColor() { return null; }, }; console.log(option); option.allColor = "blue"; console.log(option);