JavaScript：在函数中初始化全局变量

Question

我有一个问题，对于您经验丰富的JavaScript程序员（我更多是后端/数据库开发人员）来说，这可能很明显。 所以，如果这太简单了，请多多包涵！

我有以下代码：

var skill = "JavaScript";

function printSkill() {
    console.log(skill); // <-- This prints undefined
    var skill = "Java"; // <-- How can this possibly work?
    console.log(skill); // <-- This prints "Java"
}

printSkill();

输出为：

未定义
Java的

我知道可以运行此代码，因为未编译 JavaScript，而是在运行时对其进行解释（例如，在C ++中不会编译）。 但是为什么这个代码行得通呢？ 例如，为什么要使用undefined日志记录而不是"JavaScript"记录，这对于例如C ++的作用域规则将是显而易见的选择。 而且，第二个日志为什么会显示“ Java”，这也是undefined吗？

Answer 1

JavaScript分两步进行解析。 首先，它找到所有函数和变量声明，然后执行代码。 这对编译器而言，您的代码如下所示：

// declaration
var skill = undefined; 

// declaration
function printSkill() {

    // declaration
    var skill = undefined;

    // execution
    console.log(skill);
    skill = "Java";
    console.log(skill);
}

// execution
skill = "JavaScript";
printSkill();

这种现象被许多人称为“吊装”，但它们并不是完全“提起”的。 这就是编译器遍历代码的方式。

解决您的问题：

• 如果您打算将范围内的skill替换为Java ，则在对它进行任何操作之前将声明和定义移到最上面。

• 如果要替换全局skill ，请在函数内部的skill上删除var 。

Answer 2

这称为作用域和提升。 javascript中有两种类型的作用域，它们是全局作用域和函数作用域。在javascript函数中创建自己的作用域。

因此，您的代码等效于以下代码：

var skill;  // hoisted at the top of global scope and undefined

skill = "JavaScript";  // value assigned to it

function printSkill() {

    var skill;   //--> Hoisted at the top of function's scope and it is undefined 

    console.log(skill); // <-- So this prints undefined

     skill = "Java"; // <-- here it is assigned a value "java"

    console.log(skill); // <-- This prints "Java"

}

printSkill();

现在printSkill()的第二个技能变量。 它有自己的作用域，称为函数作用域，并且此函数内部定义的所有变量都放在其包装函数作用域的顶部， 而不是全局作用域 。

所以，当你CONSOLE.LOG（） variable skill里面pritSkill()首先它看起来在功能scope.If它没有找到它，然后它会查找在范围chain.In的情况下发现的技能悬挂在顶部该函数但未分配任何值。因此， 首先 console.log（）打印未定义。

在第二个console.log() ，找到分配了技能的技能值，然后打印出分配给技能的值

---

在您的代码中，如果要初始化全局skill变量，则无法声明与全局变量名称相同的其他任何变量。如上所述，由于吊装，声明顺序不计算在内。应该写。

注意：在代码中到处声明全局变量被认为是不好的编码习惯

var skill = "JavaScript";

function printSkill() {
    console.log(skill); // <-- This prints "javascript"
    skill = "Java"; // <-- assign value "Java" to global "skill" variable
    console.log(skill); // <-- This prints "Java"
}

printSkill();

Answer 3

这是幕后发生的事情：

var skill = "JavaScript";

function printSkill() {
    var skill; // skill is undefined and scoped to printSkill,
               // it is no longer the same `skill` variable
    console.log(skill); // <-- This prints undefined
    skill = "Java"; // <-- How can this possibly work?
    console.log(skill); // <-- This prints "Java"
}

printSkill();

这称为可变提升 。

Answer 4

不要使用var关键字来创建全局范围：

var skill = "JavaScript"; // global variable

function printSkill() {
    console.log(skill); // <-- This prints JavaScript
    skill = "Java"; // remove "var" to keep it global
    console.log(skill); // <-- This prints "Java"
}

printSkill();

问题在于声明它：

var skill = "Java";

在函数内部，您可以将此skill变量的分数局部化为函数范围。 因此，在函数内部，第一个print语句为您提供了undefined因为那时本地变量是不确定的。

Answer 5

当您的代码运行时，此功能称为javascript中的提升功能，您的代码将变为：

var skill; function printSkill() {
    var skill;
    console.log(skill); // <-- This prints undefined
    var skill = "Java"; // <-- How can this possibly work?
    console.log(skill); // <-- This prints "Java" }

var skill = "JavaScript";
printSkill();