Разрушение Javascript: копировать переменные класса по ссылке, чтобы позволить присваивать и изменять значения

Question

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 здесь

Вывод:

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

Я думал, что массивы были отправлены по ссылке, в то время как другие значения копируются по значению.Этот ответ поддерживает то же самое.Что здесь происходит?

Мне нужен аккуратный доступ к переменным MyClass, как мне это сделать?

Answer 1

При использовании let {points} = this; переменная points содержит значение, и это значение является ссылкой на ваш массив.Поэтому, когда вы редактируете свойство этого массива, как это делается в связанном ответе, вы изменяете ссылочный массив.

Но в вашем случае вы используете points = [...points, {x: 20, y:20}];.Здесь вы присваиваете новое значение (ссылка на вновь созданный массив) на points, и поэтому ссылка на старый массив исчезает.

В этом случае вы можете просто использовать this.points = [...points, {x: 20, y:20}];, чтобыприсвойте его this или вставьте объект прямо в this.points, используя this.points.push({x: 20, y:20}).(Для последнего вам не нужно использовать назначение деструктурирования в первую очередь.)

Answer 2

Это потому, что

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

создал новый массив.

let {points} = this;

изначально указывает на массив точек, принадлежащий экземпляру класса, но

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

изменяет ссылку.

Вы можете использовать .push, чтобы сохранить ссылку как:

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

РЕДАКТИРОВАТЬ, чтобы объяснить более многословно:

[...points, {x: 20, y:20}] создает новый массив, поэтому назначение нового массива точкам не приводит к изменению данных переменной points (думаю указатель) указывает , а скорее изменяет сам указатель на новую памятьместо.