javascript - javascript中函数对象内部如何进行变量内存分配？

Question

变量是如何在 JavaScript 函数外部和内部确定作用域、初始化和使用的？我写了以下代码:

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return x;
        }
        return { x:x, getx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.x=10;
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>

我读到，在 JS 执行中，首先扫描代码以查找所有变量声明，然后执行函数。

计算器对象内部定义的 var x 是整数值类型。

getx 是嵌套函数，并且根据闭包，即使在执行 getx 返回后也可以访问变量“x”。

calculator.x 的第一个输出是 expected=5;<​​

calculator.x 的第二个输出为 expected=10;(因为 x 已修改)

calculator.getx()的第三个输出为=5； (我无法理解这一点)

“x”是值类型，它也应该在函数范围内修改值，并且第三个输出应该=10。我在这里缺少什么？

Answer 1

calculator.x = 10 

将 x 添加到函数的属性
计算器现在引用对象 { x:x, getx } 并且您要更改的值不是变量 x 而是计算器的属性 x
要访问属性的更改，您需要输出 this.x

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return this.x;
        }
        return { x:x, getx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.x=10;
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>

为了证明这一点，请看下面的代码，显然变量 x 没有被更改，而是属性被更改，而 getx 无法访问

<div id="output">
</div>

<script>
var calculator = function()
{
        var x = 5;
        getx = function(){
           return x;
        }
        setx = function(a){
          x = a;
        }
        return { x:x, getx, setx };
}();
document.getElementById("output").innerHTML = calculator.x;
calculator.setx(10);
document.getElementById("output").innerHTML += " "+ calculator.x + " "+calculator.getx();
</script>