变量声明系列之ES5(变量提升)

比眉伴天荒 2022-05-31 13:10 292阅读 0赞

变量声明恐怕是我们日常开发中最最经常遇到的了，那今天我们就来总结下现在js一共有哪几种变量声明的方式以及各个声明方式的特点。这个变量声明系列分两篇文章，一篇写ES5(var，function)的变量声明方式及其特点，下一篇写ES6的变量声明方式（let，const，class，import）及其特点。

ES5变量声明方式有var, function。通过这两种方式声明的变量特点就是具有“变量提升”的效果，一般想法是一个变量是先声明后使用，然而如果采用var 或者function声明的变量和函数(函数表达式不会提升)具有提升的效果。下面详细说明变量提升究竟是怎么产生的。

代码在引擎中运行之前都会经历**词法分析**阶段，这个阶段会将由字符组成的字符串分解成若干(对编程语言而言)有意义的**代码块**，而这些小的代码块我们可以称他们为**词法单元，**举个栗子给大家，比如：var age = 27;这一句通常会被分解为var、age、=、27、；空是否会被当做词法单元取决于空格在这门语言中是否有意义。接下来是**语法分析**阶段会将这些词法单元解析成一个树结构我们将这个树结构称之为“抽象语法树”。然后编译器会进行如下处理，首先遇到var age,编译器会询问当前作用域是否已近存在一个改名字的的变量，如果是的，编译器就会忽略该声明，如果不是的话就会要求在当前作用域的集合中声明一个新的变量，并且为这个变量命名为age。但是不会立刻给他赋值，赋值是在运行的时候才做的事情。**编译阶段**实际会吧所有的var声明的变量提升到前面。即var age = 27; 可以近似的看成var age;（编译阶段）age = 27;(运行阶段)。所以就会产生“变量提升”的效果了。

关于变量提升需要注意这几点：

*  在js中用var ,function声明的变量都将被提到函数的最顶部。（**但是不会初始化**）
 *  函数声明的优先级大于变量声明的优先级（**function > var** ）
 *  在函数内部变量提升的优先级会小于函数参数（**函数参数 > 函数内部变量提升**）

下面辅以例子来具体说明：

console.log(a)
        var a = 3;

运行结果如下:

![20180226002126236][]

实际上等同于运行下列代码:

var a;
        console.log(a)
        a = 3;

打印出a的时候，a已近声明(变量提升的效果)但是并未赋值，自然就是undefined了，如果没有变量提升的效果此处就会报一个reference erro的错误类型了。

再看如下代码:

看看运行结果：

![20180226002843533][]

下面我们来分下下为什么是这个结果呢。？

先var 和function都具有变量提升且根据我们上面的第二条原则function > var 所以第一次打印console.log(f)此时的f是一个函数；

接下来是运行f()自然就会得到f函数内打印的字符串'I am function f'再接下来就是给f赋值了此时的f = 27;打印f就会得到数字27,然后又将f的值改为2，再运行f()而此时f已近不是一个函数了，所以控制台会抱一个typeError的错误，表示我们对f的用法错了（关于各个错误类型我们后面会有一篇文章专门说明）。

下面再看看我们所说的第三点：

code:

var age = 0;
       function foo(age) {
           console.log(age);
           var age = 20;
       }
    
        foo(27)
        console.log(age)

![20180226003908744][]

在函数foo中此时传入的参数age=27，根据我们上述的第三点即函数参数 > 函数内部变量提升。所以在函数内部打印出的age是传入的参数27,最后一句打印出的age自然就是0了。

有关于函数表达式是否会有变量提升，我看了很多人写的博客是说函数表达式并不会有变量提升，我并不赞同这个观点，我觉得函数表达式也会产生变量提升，事实上只要是用var 与function声明的变量都会产生变量声明，但切记用var 声明的变量不会立马赋值。看如下代码。

code:

console.log(foo)
        
        var foo = function () {
            console.log('I am a function foo')
        }

![20180226004725680][]

实际上在这儿运行的代码等同下面的代码：

var foo;
        console.log(foo)
        
        foo = function () {
            console.log('I am a function foo')
        }

所以函数表达式也同样有变量提升的效果。

[20180226002126236]: /images/20220531/614fbe2e68924b38936fbeeeb870be9a.png
[20180226002843533]: /images/20220531/d18c9b5e0956402e81d718c708a24e37.png
[20180226003908744]: /images/20220531/09e79e1391e84ba5b0f93ba638b4dbd2.png
[20180226004725680]: /images/20220531/1703f2b66e314924bdc1d0c5957e123b.png