【问题标题】:Why my global variable is not accessible within a function? [duplicate]为什么我的全局变量在函数中不可访问? [复制]
【发布时间】:2013-07-03 20:42:50
【问题描述】:

我认为 myColor 可以从 sayColor() 本地上下文访问,但即使我在第一次警报后声明 myColor 也不是。为什么?

var myColor = "blue";
function sayColor() {
    alert(myColor); //undefined expected blue
    var myColor = "green";
    alert(myColor); //green
}
sayColor();

【问题讨论】:

    标签: javascript


    【解决方案1】:

    这里发生的事情称为“吊装”。使用var 和函数语句的变量声明被“提升”到其包含范围的顶部。 (请注意,从 ES6 开始,letconst 具有不同的语义。)因此,在浏览器看来,您的代码实际上如下所示:

    var myColor = "blue";
    function sayColor() {
        var myColor;
        alert(myColor); //undefined expected blue
        myColor = "green";
        alert(myColor); //green
    }
    sayColor();
    

    来自MDN

    变量的每个定义实际上是在其作用域顶部的变量声明和在定义所在位置的赋值。

    【讨论】:

    • 这……不直观也不有用。为什么他们还没有解决这个问题?我希望在声明变量的代码中声明变量。
    【解决方案2】:

    您正在使用同名的局部变量隐藏全局变量 myColor。从函数中删除 var 关键字以查看全局变量。

    var myColor = "blue";
    function sayColor() {
        alert(myColor);
        myColor = "green"; // Omit the "var" keyword.
        alert(myColor);
    }
    sayColor();
    

    Javascript 仅具有函数作用域,并且在函数中声明的所有变量都被提升到顶部,因此它们在整个函数中都可用。 OP 原始版本中的第一个警报是使用未初始化、提升的局部变量,这就是它打印 undefined 的原因。

    【讨论】:

    • 是的,但不应该在第一个警报中可用,因为它尚未声明?
    • @AlfredoOsorio 不,这不是函数在 JavaScript 中的工作方式。变量在声明它们的整个函数中都是可见的。
    • 变量声明被提升到函数顶部。它实际上是:function sayColor(){ var myColor; alert(myColor); myColor = "green"; alert(myColor); }
    • @NagaJolokia 现在确实如此。
    【解决方案3】:

    您再次在函数内设置变量。浏览器在赋值之前读取函数,这会导致未定义的结果。

    它是正确的。

    var myColor = "blue";
    function sayColor() {
        alert(myColor); //undefined expected blue
        myColor = "green";
        alert(myColor); //green
    }
    sayColor();
    

    【讨论】:

      【解决方案4】:

      因为你要再次声明它。

       var myColor = "green";
      

      在 JavaScript 中,解释器在执行函数之前,会扫描整个函数以查找 var ... 语句。这就是为什么你的 myColor 变量甚至在你的函数的第一条语句执行之前就被重置的原因。

      【讨论】:

        猜你喜欢
        • 2019-05-04
        • 1970-01-01
        • 2021-06-20
        • 1970-01-01
        • 1970-01-01
        • 2019-11-08
        • 2020-10-12
        • 2012-02-26
        • 2017-05-11
        相关资源
        最近更新 更多