javascript - 为什么这个非常棘手的计算属性名称函数会按照它的方式工作？

Question

@raina77ow 最近帮我找出计算属性名称。作为 their answer to my question 的一部分，他们分享了一段非常棘手的代码，展示了 JavaScript 有趣的方面:​​

const increment = (() => { let x = 0; return () => ++x })();
const movingTarget = { toString: increment };
const weirdObjectLiteral = { [movingTarget]: 42 };
console.log( weirdObjectLiteral[movingTarget] ); // undefined

当我在节点 CLI 中运行该示例时，最后一行不断输出 undefined，而 increment 中的值 x 不断递增。

如果我们将 const movingTarget = { toString: increment }; 替换为 const movingTarget = { [toString]: increment };，此行为将停止发生，并且相反，我们得到 42 的输出，并且 increment 中的 x 保持不变。

有人可以帮助我理解为什么会这样吗？是什么让 JavaScript 以这种方式工作？

相关问题:increment 中的函数中的 x 是否存在，直到我们从内存中显式删除 increment ？

Answer 1

让我们评估以下对象字面量:

 {[toString]: increment }

toString 是指向 window.toString (一个函数)的标识符 正如答案所概述的那样， toString 将被调用为对象键总是字符串:

 {[toString.toString()]: increment }

现在结果是这样的:

 {["function() { [native code] }"]: increment }

现在，如果我们在此对象上调用 toString()，标准的 Object.prototype.toString 将在 {[movingTarget]: 42} 中被调用 部分，结果是 [Object object](一如既往):

 let x = 0;
 let movingTarget = { ["function() { [native code] }"]: () => ++x };

 console.log(
  movingTarget.toString(), // [Object object]
  {[movingTarget]: 42} // {["[Object object]"]: 42}
 );

这就是移动目标不再移动的原因。在原始代码中，设置了对象的 toString，每当 movingTarget 变成字符串时都会调用它:

 let x = 0;
 let movingTarget = { toString: () => ++x };
 console.log(
   movingTarget.toString(), // 1
   "" + movingTarget, // 2
  {[movingTarget]: 42} // { 3: 42 }
 );