Javascript 有人能解释一下函数在另一个函数中的这种行为吗？

我试图理解Javascript中的词汇范围。在下面的示例中，我在另一个函数中编写了一个函数。当我运行这个时，我希望在第一个警报中弹出“爸爸”，在第二个警报中弹出“妈妈”。但实际情况是，第一个弹出窗口显示“未定义”，第二个弹出窗口显示“妈妈”

function first(){
  var x = "dad"; 
  function second(){
    alert(x);
    var x = "mom";
    alert(x);
  }
  second();
}
first();

---

有人能解释一下为什么父函数中定义的变量“x”在子函数中不可见吗？奇怪的是，当我删除子函数中变量“x”的声明时，它工作得很好。是否有人能深入了解这里有效的词法范围场景？

在'second'中的

var x

声明了一个变量'x'，该变量将变量'x'隐藏在外部函数中。“second”函数中对“x”的任何引用都会引用该变量，即使它在声明之前。声明之前的变量值将为“未定义”

---

您可以查阅“吊装”了解更多信息。请参阅：

在

警报

后使用

var

语句，在

秒

中重新声明

x

。这使得它与第一个中声明的不同

此外，JavaScript使用了一种称为提升的技术。当在作用域中声明变量时，在预执行过程中将该声明移动到作用域的顶部。如果在一条语句中执行声明和赋值，则该声明将与赋值分离。声明被移动到范围的顶部，导致一个未定义的变量，而assignment被保留在原来的位置

预传递后的结果代码如下所示（我在这里只展示了变量的提升，而不涉及函数）

因此，在第一个

alert

中，您的

x

是新的且未定义的，而在第二个中，它已定义。同时，

first

中的

x

值保持不变

为了得到您期望的结果，并在两个函数中保持相同的

x

，您需要从

second

中删除

var

声明并保留赋值：

function first(){
    var x = "dad"; 
    function second(){
        alert(x);
        x = "mom";
        alert(x);
    }
    second();
}
first();

---

@Darkhogg提升是词汇范围界定工作的基础，在我看来，一旦理解它，它就是美丽的。

function first(){
    var x = "dad"; 
    function second(){
        alert(x);
        x = "mom";
        alert(x);
    }
    second();
}
first();