JavaScript变量声明与定义的区别及作用域深度解析

方予

发布时间：2026-10-15 | 4人浏览过

原创

本文详细解析JavaScript中变量的声明与定义区别，深入剖析var关键字如何影响全局与局部作用域，揭示隐式全局变量的陷阱，并说明JavaScript为何缺乏块级作用域及其带来的变量提升现象。

变量声明与定义的辨析

在JavaScript中，理解“声明”与“定义”的差异是掌握变量的基础。通常认为，“声明”仅指创建变量名，而未赋值；“定义”则包含声明且赋予初始值。例如：

// 仅声明，此时值为 undefined
var name;

// 声明并赋值，即定义了该变量
var num = 11;
var password = "yangjiang";

核心规则：var关键字与作用域机制

JavaScript的作用域主要分为全局和局部两种。其核心行为由是否使用var关键字决定，以下四点构成了理解JS作用域的基石。

第1步：显式局部变量可屏蔽同名全局变量

当在函数内部使用var声明一个与全局变量同名的局部变量时，该局部变量会在函数作用域内有效隐藏（shadow）全局变量。读取时优先访问局部变量。

复制代码代码如下:

var scope1 = "global";//全局变量
function checksScope(){
    var scope1 = "local";//局部变量，屏蔽外部
    document.write(scope1); //输出: local
}
checksScope();

第2步：省略var导致隐式全局变量

若在函数内未使用var直接赋值，JavaScript引擎会将其视为全局变量的声明或修改（前提是执行了该函数）。这是一个常见的陷阱，可能导致意想不到的全局状态污染。

场景一：函数已执行

当函数checkScopeA被调用后，内部的scope2和myscope均成为全局变量。

复制代码代码如下:

scope2 = "globalAAAAA"; // 假设已在外面定义或在此处隐式定义全局
function checkScopeA(){
    scope2 = "localAAAAA"; // 修改全局变量scope2
    document.write(scope2 + ","); // 输出: localAAAAA,
    myscope = "myLocalAAAAA";   // 隐式创建新全局变量
    document.write(myscope);     // 输出: myLocalAAAAA
}
checkScopeA();
document.write(scope2); // 输出: localAAAAA (已被修改)
document.write(myscope); // 输出: myLocalAAAAA (新全局变量)

场景二：函数未执行

如果上述函数未被调用，则函数体内的赋值操作不会发生。scope2保持原全局值，而myscope因从未在全局或函数作用域中真正被声明过，尝试读取将报错。

复制代码代码如下:

scope2 = "globalAAAAA";
function checkScopeA(){
    scope2 = "localAAAAA";
    myscope = "myLocalAAAAA";
}
// 注释掉 checkScopeA();
// document.write(scope2); // 输出: globalAAAAA
// document.write(myscope); // ReferenceError: myscope is not defined

第3步：函数嵌套与作用域链

JavaScript支持函数嵌套，每个函数都有独立的作用域。内部函数可以访问外部函数的变量，但若内部也声明了同名变量，则内部作用域会覆盖外部。

复制代码代码如下:

var scope3 = "global scope";
function checkScopeB(){
    var scope3 = "local scope"; // 覆盖全局
    function nested(){
        var scope3 = "nested scope"; // 覆盖checkScopeB的local
        document.write(scope3); // 输出: nested scope
    }
    nested();
}

第4步：无块级作用域与变量提升

这是JavaScript最容易令人困惑的特性之一：**没有块级作用域**。只要是在同一个函数体内，无论if、for还是其他代码块，其中用var声明的变量都属于该函数的整个作用域。**注意：var声明会被“提升”到函数顶部，但赋值保留在原位**。

这意味着，即使变量在代码块的末尾声明，它在开头也是存在的，只是值为undefined。

示例1：循环与条件判断中的变量可见性

复制代码代码如下:

function test(o){
    var i = 0; // 作用域全函数
    if(typeof o == "object"){
        var j = 0 ; // 作用域全函数，不仅限于if块
        for(var k=0;k<10;k++){
            document.write("k="+k);
        }
        // 此处k依然可见，且值为10
        document.write("For loop outside k:" + k);
    }
    // 即使if不执行，j依然存在，但未赋值
    document.write("j的值:" + j);
}

若传入对象test({})，if执行，j被赋值为0。若什么都不传test()，if不执行，但j已被提前声明，因此输出j的值:undefined而非报错，也非猜测的0。

示例2：经典的变量提升陷阱

下面的例子直观展示了var sssss虽然写在后面，但在前面访问时会打印undefined而不是全局的"全局变量"，因为局部声明遮蔽了全局声明。

复制代码代码如下:

var sssss = "全局变量";
function f(){
    // 这里的var sssss提升到了函数顶部，所以这里读到的是局部的undefined
    document.write(sssss); // 输出: undefined 
    var sssss = "局部变量";
    document.write(sssss); // 输出: 局部变量
}