JavaScript之局部变量

引入

在笔者讲解JavaScript变量的时候就曾提到，最好每个变量都用var进行声明，再对其赋值或进行其他运算操作，否则JS会有容错机制，将其自动声明成全局变量。这样可能带来变量冲突。那时我们还引入了一个strict模式来强制每个变量都经过var声明

那么这个“全局变量”到底意味着什么呢？与之相对的“局部变量”又该如何理解呢？本期就将进行函数体内“局部变量”的讲解，争取理解变量作用域并避免变量冲突。

1. 函数体内声明的变量

在变量内部用var声明的变量属于该函数的局部变量，其只能在该函数内调用，在函数外调用会报错：

function test1() {
    var x = 1;
    return x + 1;//返回x+1的值——2
}
x = x + 1; // ReferenceError! 报错，意味着x无法在函数体外被引用

1.1 并列函数局部变量

按照这个道理，我们其实可以按照习惯，在各个函数里的特定情况下用同一个变量名。比如我们习惯先设x：

function test1() {
    var x = 1;
    return x + 1;
}
function test2() {
    var x = 'A';
    return x + 'B';
}

如上图，我们在函数内部用的变量都是x，但是他们不会相互冲突，因为x都是由var声明的，是"局部变量"，只在各自的函数体内生效

1.2 嵌套函数局部变量

那么我们能认为只要是不同的函数，他们各自的变量就不相互共享吗？

显然不是，因为函数有嵌套关系，嵌套在内层的函数本质上也是外层函数的一部分，所以外层函数的局部变量也可以用于内部嵌套的函数——

function test1() {
    var x = 1;
    function test2() {
        var y = x + 1; // 执行成功。test2可以调用test1的变量x
    }
    var z = y + 1; // ReferenceError!报错。因此我们知道test1不可以调用test2的变量y!
}

需要注意的是，嵌套函数相互使用同一个变量也是允许的。不会发生冲突——

function test1() {
    var x = 1;
    function test2() {
        var x = 'a';
        console.log(x); // 'a'
    }
    console.log(x); // 1
}

上面的例子中，我们用的都是同一个变量x，但是在不同的地方调用的时候，我们发现并没有冲突，在外层调用的时候是外层赋值的值“a”，在内层调用的是内层赋值的1

可以理解成js在内层解读函数的时候会短暂屏蔽外层的变量,在回到外层的时候恢复

或者我们直接就当作不管是并列函数还是嵌套函数,函数体内的局部变量都不会相互冲突,而对于嵌套函数而言,内层函数还可以调用外层函数的变量

2. 函数体内变量声明的"优先性"

JavaScript有个比较特别的特性——函数体变量声明优先性

这是什么意思呢？

在该函数体内声明的变量会被全部提前到函数定义的开头

我们举个例子：

'use strict';
function test1() {
    var x = 'Hello ' + y;
    console.log(x);
    var y = 'world';
}
test1();

我们在一开始就声明我们的模式为strict模式，这样可以保证我们不var的时候不会声明任何变量。上面的代码在声明x的时候引用了y，但是并没有报错。看来js把y的var提前了。

但是输出的结果并不是我们想要的Hello world，而是Hello undefined。说明提前的只有y的声明，并不包括y的赋值，y的赋值还是要在原先的位置进行。

所以广大前端人啊，不妨一开始该声明的变量就都声明了吧，免得出现什么奇怪的报错。

毕竟举手之劳减少自己之后大把修复bug的时间，何乐而不为？