JavaScript学习笔记二：变量与作用域详解

JavaScript变量声明的本质区别

在JavaScript中，声明变量主要有两种形式：var a = 1; 和直接赋值 a = 1;（前提是未先用var声明）。虽然两者都能创建变量，但其作用域归属截然不同：

• 使用 var 声明： 变量被限制在当前作用域（如果是函数内则为局部，顶层则为全局）。
• 直接赋值： 如果该变量在之前未被声明，JavaScript引擎会将其作为全局变量处理，即使是在函数内部执行。

JavaScript的一个特性是函数内部可以直接读取全局变量。例如：

var n = 999;
function f1() {
    alert(n);
}
f1(); // 弹出 999

反之，函数外部的作用域无法直接访问函数内部的局部变量：

function f1() {
    var n = 999;
}
alert(n); // ReferenceError: n is not defined

变量作用域链与执行原理

理解作用域链的关键在于掌握变量的查找规则和执行顺序。当代码中使用一个变量时，JavaScript引擎会从当前执行环境的最近层开始向上查找：

1. 先在当前函数块（作用域）中查找；
2. 若未找到，则沿作用域链向上级函数块查找；
3. 若一直追溯到顶层代码仍未找到定义，则抛出未定义错误。

以下案例展示了这一过程及“变量提升”的影响：

var x = '000 ';
document.writeln(x); // 输出 '000 '
a();

function a() {
    var x = 'aaa ';
    function b() {
        document.writeln(x); // 输出 undefined
        var x = 'bbb ';
        document.writeln(x); // 输出 bbb
    }
    b();
    document.writeln(x); // 输出 aaa
}

第1步：分析()内部的()执行逻辑

在()函数体内需要输出x时，由于()内部存在var声明的x变量，根据变量提升机制，该变量声明会被移至函数顶部，但赋值仍停留在原处。因此，在赋值语句执行前访问x，其值为undefined。这是新手最容易混淆的点。

第2步：确认后续输出状态

继续执行后，x被赋值为'bbb'，第二次输出即为'bbb'。最后回到a()函数作用域，此时b()内部的操作不影响a()中的x，故最终输出a()定义的'aaa'。

再看一个涉及全局与局部变量修改的案例：

var x = "global";
function f() {
    var x = 'f1';
    function f2(){
        x = 'f2'; // 修改的是f()作用域内的x
        alert(x); // 返回 "f2"
        alert(window.x); // 返回 "global"
    }
    f2();
    alert(x); // 返回 "f2"
}
f();
alert(x); // 返回 "global"，全局变量未被改变

解释：f2()作为嵌套函数，拥有独立的作用域。当其在内部对x进行赋值且未使用var声明时，它会向上查找x的定义。由于父函数f()中已定义x，因此修改的是f()中的局部变量，而非全局window.x。这再次证明了就近原则的重要性。

给新手的最佳实践建议

为了避免全局变量污染导致的应用冲突，建议遵循以下规范：

第1步：减少全局变量，使用对象封装

Douglas Crockford曾指出：“把你踩在全局的那些乱七八糟的脚印都归于一人名下，能显著降低与其他应用、小工具或JS库冲突的可能性。”

不推荐的写法：

var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- 也是 window.name

推荐的封装写法：

var DudeNameSpace = {
    name : 'Jeffrey',
    lastName : 'Way',
    doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

将所有相关变量和方法归集到一个命名空间对象下，有效隔离了全局环境。

第2步：合并长列变量声明

当需要声明多个同作用域的变量时，建议使用逗号分隔，而非多次使用var。这样既能保持代码整洁，也能清晰界定同一作用域内的变量组。

冗余写法：

var someItem = 'some string';
var anotherItem = 'another string';
var oneMoreItem = 'one more string';

简洁写法：

var someItem = 'some string',
    anotherItem = 'another string',
    oneMoreItem = 'one more string';

以上就是JavaScript变量声明与作用域链的详细内容，更多关于JavaScript基础教程的资料请关注本站其它相关文章！