Javascript desestructuración: variables de clase copia de referencia para permitir la asignación y modificación de los valores

votos
0
class MyClass {
  constructor() {
    this.points = [];
    // I need to call this after the components are mounted
    // So keeping the setup separate
    this.setupMyClass();
  }

  setupMyClass() {
    let {points} = this;
    points = [...points, {x: 20, y:20}];

    // ugly code 💩
    // need to repeat 'this.' everytime I use the variable
    // this.points = [...this.points, {x: 20, y: 20}];

    console.log('points', points);
    console.log('this.points', this.points);
  }
}

myClassInstance = new MyClass();

jsFiddle aquí

Salida:

points: [{..}]
this.points: []

Pensé arreglos fueron enviados por referencia, mientras que otros valores son copiados por valor. Esta respuesta es compatible con el mismo. ¿Que esta pasando aqui?

Necesito acceder a las variables de MyClassuna manera ordenada, ¿cómo lo hago?

Publicado el 20/10/2018 a las 10:34
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
3

Esto es porque

[...points, {x: 20, y:20}];

creado una nueva matriz.

let {points} = this;

originalmente apunta a la matriz de puntos que pertenecen a la instancia de clase, pero

points = [...points, {x: 20, y:20}];

cambia la referencia.

Se puede utilizar .pushpara mantener la referencia como:

points.push({x: 20, y:20});

EDIT para explicar más detallada-mente:

[...points, {x: 20, y:20}]Crea una nueva matriz, por lo que la asignación de la nueva matriz de puntos no cambia los datos de la pointsvariable (pensar puntero) puntos a, sino más bien cambia el puntero a una nueva posición de memoria.

Respondida el 20/10/2018 a las 10:41
fuente por usuario

votos
2

Cuando se utiliza let {points} = this;, la pointsvariable contiene un valor y ese valor es la referencia a la matriz. Así que cuando se modifica una propiedad de esa matriz como se hace en la respuesta se ha vinculado, se modifica la matriz de referencia.

Pero en el caso de que utilice points = [...points, {x: 20, y:20}];. Aquí se asigna un nuevo valor (en referencia a la matriz de nueva creación) a points, por lo que la referencia a la matriz de edad se ha ido.

En este caso puede simplemente usar this.points = [...points, {x: 20, y:20}];con el fin de asignarlo al this, o empujar a su objeto directamente a this.pointsusar this.points.push({x: 20, y:20}). (En este último caso, no es necesario utilizar una asignación desestructurada en el primer lugar.)

Respondida el 20/10/2018 a las 10:43
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more