Javascript 当在变量中存储getter时，会发生奇怪的事情

对不起，我是日本人，英语不好

这是一个非常简单的vue代码

<template>
  <div id="app">
    <button @click.once="changeObj">
      Click
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      someObj: {
        someStrItem: 'str'
      }
    }
  },
  computed: {
    getObj () {
      return this.someObj
    }
  },
  methods: {
    changeObj () {
      const temp = this.getObj
      console.log(temp) // → { someStrItem: 'newStr' }
      this.someObj.someStrItem = 'newStr'
    }
  }
}
</script>

因为

this.someObj.someStrItem = 'newStr'

之后我会这样做

  const temp = this.getObj
  console.log(temp)

但结果是

{ someStrItem: 'newStr' }

我不知道为什么会这样

其实我通常不会做这种事

而且，我可以预见这种情况的发生，因为我将返回对象的getter存储在变量中

但我不知道原因

---

为什么会发生这种情况？

为什么

temp

应该是

{someStrItem:'}

让我们浏览事件的各个阶段：

您的组件将使用

数据进行实例化

：

{
someObj：{
someStrItem:'str'
}
}

getObj

自动

计算为

{
someStrItem:'str'
}

在

changeObj

中调用

console.log（temp）

时，

this.getObj

仍具有

{
someStrItem:'str'
}
为什么
temp
应该是
{someStrItem:'}

让我们浏览事件的各个阶段：

您的组件将使用
数据进行实例化
：
{
someObj：{
someStrItem:'str'
}
}

getObj
自动
计算为

{
someStrItem:'str'
}

在
changeObj
中调用
console.log（temp）
时，
this.getObj
仍具有
{
someStrItem:'str'
}
我期望console.log（temp）的结果是{someStrItem:'str'}。所以，和你说的一样，但它是{someStrItem:'newStr'}。我想知道为什么会这样。啊，我现在明白你的意思了。这里的问题其实很小——您的代码实际上是按预期工作的。当您
console.log（temp）
时，它确实输出
{someStrItem:'str'}
，但因为
这个.getObj.someStrItem
是惰性计算的，当您记录
temp
时，它只输出
这个.getObj
，而不计算其中的任何内容。它只输出位于
this.getObj
引用处的值。您可以在
console.log（temp）
之后放置一个
debugger
语句来尝试这一点。这将暂停您的代码执行的权利，这将允许您看到它的工作
changeObj（）{const temp=this.getObj；console.log（temp）；debugger；this.someObj.someStrItem='newStr'；}
非常感谢。使用调试器，结果是{someStrItem:“str”}。所以你在写。但是，“lazyly evaluated”对我来说有点难理解…（T_T）我希望console.log（temp）的结果是{someStrItem:'str'}。所以，和你说的一样，但它是{someStrItem:'newStr'}。我想知道为什么会这样。啊，我现在明白你的意思了。这里的问题其实很小——您的代码实际上是按预期工作的。当您
console.log（temp）
时，它确实输出
{someStrItem:'str'}
，但因为
这个.getObj.someStrItem
是惰性计算的，当您记录
temp
时，它只输出
这个.getObj
，而不计算其中的任何内容。它只输出位于
this.getObj
引用处的值。您可以在
console.log（temp）
之后放置一个
debugger
语句来尝试这一点。这将暂停您的代码执行的权利，这将允许您看到它的工作
changeObj（）{const temp=this.getObj；console.log（temp）；debugger；this.someObj.someStrItem='newStr'；}
非常感谢。使用调试器，结果是{someStrItem:“str”}。所以你在写。但是，“懒散地评估”对我来说有点难理解…（T\T）
{ someStrItem: 'newStr' }