为什么分配属性会导致“错误：超出最大调用堆栈大小”错误？ [复制]

Question

我正在尝试使用 Mozilla 的文档更好地理解 JavaScript getters：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

我将文章IDE中的代码sn-p修改成这样：

const obj = {
  get log() {
    return this.log = 1;
  }
};

console.log(obj.log);

它起作用了，产生了这个：

> 1

但是当我尝试将return 行分开时：

const obj = {
  get log() {
    this.log = 1;
    return this.log;
  }
};

console.log(obj.log);

它出错了：

Error: Maximum call stack size exceeded

我不明白为什么这些看似等效的 sn-ps 代码的行为会有所不同。对 JavaScript 新手有什么建议吗？

感谢您的宝贵时间??????????

更新：
@CertainPerformance 的回答为我清除了一切。

我将添加以下示例代码，以便我以后更容易理解。

这就是第二个版本不起作用的原因：

const obj = {
  get log() {
    this.log = 100;
    return this.log; // will go back to line 2 `get log()`
  }
};

console.log(obj.log);

第一个版本有效，因为它正在调用返回分配值的 setter，因此不会递归调用 getter。

如果有理由需要第二个版本，那么使用不同的属性名称将避免递归调用。

const obj = {
  get log() {
    this._log = 100;
    return this._log;
  }
};

console.log(obj.log);
console.log(obj._log);

Answer 1

当log 是一个getter，但你没有关联的setter，做

return this.log = 1;

尝试以 setter 的身份访问 log（因为它是 setter/getter 属性） - 但不存在 setter，所以它也可以

• 在草率模式下静默失败
• 在严格模式下抛出错误

'use strict';
const obj = {
  get log() {
    return this.log = 1;
  }
};

console.log(obj.log);

相反，做

return this.log;

也调用log 上的getter。但是你已经在log 的getter 中，导致无限循环。

您可能希望对内部属性和外部属性使用不同的属性名称 - 例如 _log，或使用私有字段，或类似的名称。