2

有人可以解释下面的突变行为吗：

function test () {
  let data = {}

  const run  = () => {
    console.log(data)
  }

  const update = () => {
    data = {}
  }

  return {
    container: {
      data
    },
    run,
    update
  };
}

const { container, run, update } = test();

update(); // run an update to reset value to {}

container.data.test = { result: 'test' }; // try to mutate the data

run(); // it will still return {} instead { data: {test: {result: 'test'}} }

我希望更新对象会导致函数内部的数据对象发生变异。但看起来情况并非如此，就好像它创建了一个新对象一样。

4

2 回答 2

1

当您调用该test()函数container.data并data指向同一个对象时：

container.data -----> {} <------ data

但在以下声明之后：

container.data.test = { result: 'test' };

container.data指向不同的对象：

container.data -----> { result: 'test' } 
data           -----> {}

但data仍指向空对象，并且此data变量由run()函数记录。

这里要知道的重要一点是，重新分配给container.data 也不会重新分配给data变量。

于 2021-08-31T13:12:28.187 回答
1 
const { container, run, update } = test();

这将创建一个新对象，其中包含变量的当前值data并分配它。

update(); // run an update to reset value to {}

这会将data变量的值更改为新对象。

container.data.test = { result: 'test' }; // try to mutate the data

这会改变最初分配给data并复制到从 返回的新对象的对象test()。

它对现在是数据值的新对象没有影响。

换句话说：

  return {
    container: {
      data
    },
    run,
    update
  };

... 复制数据的值并且不创建对data变量的引用。

于 2021-08-31T13:11:13.887 回答