JavaScript代码技巧：foo.x的值是什么

Question

我在GitHub前端面试问题集中发现了这个问题：var foo = {n: 1};var bar = foo;foo.x = foo = {n: 2};问题：foo.x的值是什么？答案是undefined。我已经进行了一些研究，并且我理解这个问题（如果我错了，请纠正我）：var foo = {n: 1};声明一个foo属性n等于1 的对象。var bar = foo;声明一个对象bar，该对象引用与相同的对象foo。foo.x = foo = {n: 2}; 我相信等于 foo.x = (foo = {n: 2});然后我foo.x等于undefined。但是，的值bar.x是object {n:2}。如果bar和foo引用相同的对象，为什么在bar.x得到值却foo.x是undefined？真正发生了foo.x = foo = {n: 2};什么？

Answer 1

foo.x = foo = {n: 2};

判定foo.x是指一种属性x的的{n: 1}目的，分配{n: 2}给foo，并分配的新值foo- {n: 2}-为属性x的的{n: 1}对象。

重要的是，foo这foo.x指的是之前确定foo的变化。

参见ES5规范的11.13.1节：

令lref为评估LeftHandSideExpression的结果。

令rref为评估AssignmentExpression的结果。

赋值运算符从右到左关联，因此您得到：

foo.x = (foo = {n: 2})

首先评估左侧，然后评估右侧。

Answer 2

foo.x = foo = {n：2};

此处foo指的是赋值之前即执行语句之前的{n：1}对象。

该语句可以重写为foo.x =（foo = {n：2}）;

在对象方面，以上语句可以重写为 {n：1} .x =（{n：1} = {n：2}）;

由于分配仅从右到左发生。因此，这里我们只需要在执行开始之前检查foo是否指向哪个对象。

在解决RHS时： foo = {n：2} ; 现在foo指的是{n：2}；

回到我们剩下的问题：

foo.x = foo;

现在，LHS上的foo.x仍然是{n：1} .x，而RHS上的foo是{n：2}。

因此，在执行该语句后，{n：1}将变为{n：1，x：{n：2}}，并且bar仍引用该语句。凡为FOO现在将参照{N：2} 。

因此，在执行foo.x时会给出undefined，因为foo中只有1个值为{n：2}的值。

但是，如果您尝试执行bar.x，它将得到{n：2}。或者，如果您只执行bar，结果将是

对象{n：1，x：对象}

Answer 3

我以为我会添加另一种我认为有用的思考方式。

最后的变量分配等同于write bar.x = foo = {n:2};，因为这些变量只是对内存中同一事物的引用。

换句话说，foo和bar首先都引用相同的对象{n:1}。使用时foo.x =，您正在访问{n:1}该x属性并将其添加到其中。这可以通过任一方法完成，bar或者foo因为它们都指向内存中的同一对象！这没什么区别。

然后，当您完成该行时，foo.x = foo = {n:2}您将通过对象文字语法在内存中创建另一个全新的对象，并设置foo为指向该对象{n:2}，而不是现在的对象{n:1, x: {n: 2}。但是，这不会影响foo将x属性添加到该属性时所指向的内容。

这非常令人困惑，但是我认为您可以考虑这样一个事实，即变量只是指向内存中的位置/对象的指针，并且对象文字语法不会更改先前存在的对象（即使它们看起来很相似）。它正在创造一个全新的。