javascript - 对象引用如何在 javascript 内部工作

Question

我是 javascript 的新手。我写了简单的代码:

var temp = {}
var arr = []

temp['a'] = ['a']
arr.push(temp)
console.log(arr);

正如预期的那样，它打印:

[ { a: [ 'a' ] } ]

但是，当我将以下行附加到之前的代码时:

temp['b'] = ['b']
arr.push(temp);
console.log(arr);

我本以为它会打印:

[ { a: [ 'a' ] }, { a: [ 'a' ], b: [ 'b' ] } ]

但它打印:

[ { a: [ 'a' ], b: [ 'b' ] }, { a: [ 'a' ], b: [ 'b' ] } ]

意外结果的完整代码: 可变温度 = {} 变种 arr = []

temp['a'] = ['a']
arr.push(temp)
console.log(arr);

temp['b'] = ['b']
arr.push(temp);
console.log(arr);

为什么数组的第一个元素被更新了？

下面的代码给了我预期的结果:

var temp = {}
var arr = []

temp['a'] = ['a']
arr.push(temp)
console.log(arr);

temp = {};
temp['a'] = ['a']
temp['b'] = ['b']
arr.push(temp);
console.log(arr);

添加 temp = {} 在这里有何帮助？

Answer 1

Javascript 中的对象通过引用 传递。也就是说，只创建一个对象，可以使用表示该对象的符号，但它始终指代同一个对象。

让我们深入了解一下:

如果我理解你的例子是正确的，这部分

var temp = {}
var arr = []

temp['a'] = ['a']
arr.push(temp)
console.log(arr);

创建一个局部变量 temp，您可以向其中添加 ['a']。然后将其插入 arr。

所以在这一点上，arr 引用对象 temp 并且看起来像这样:

[ { a: [ 'a' ] } ]

当你这样做时:

temp['b'] = ['b']
arr.push(temp);
console.log(arr);

指向包含 ['a'] 的原始对象的 temp 符号被更新，因此 arr 也将被更新, 所以 arr 在那个时候包含这个:

[ { a: [ 'a' ], b: [ 'b' ] }, { a: [ 'a' ], b: [ 'b' ] } ]

最后，

然后您改为这样做:

temp = {};
temp['a'] = ['a']
temp['b'] = ['b']
arr.push(temp);
console.log(arr);

这会创建一个单独的全局变量temp，您可以在其中添加['a'] 和 ['b']。这是全局的，因为它在声明/初始化中没有 var 关键字。然后将其插入 arr。但是，由于它是一个全局变量而不是原始的 local 变量，因此您会看到:

 [ { a: [ 'a' ] }, { a: [ 'a' ], b: [ 'b' ] } ]