学习 JavaScript 从吃透变量提升开始

前言

JavaScript是web开发人员必须学习的一门语言， 想学好JavaScript，要先练好内功 ，只有内功深厚，我们才能走得更远。

• 先引入一段代码：

var myName = "lyl"
console.log(myName); // 变量提升

console.log(myName); //undefined
var myName = "lyl"

我们大家都知道代码是逐行运行的，所以第一段代码很好理解运结果为 lyl。 那么问题来了，为什么第二段代码先输出myName的值再声明myName 运行程序没有报错反而输出undefined呢？

下面就要给大家引入JavaScript里一个重要的概念：变量提升

• 变量提升：

  1. 概念：

     一个JS代码文件的运行分为编译阶段和执行阶段，而变量提升发生在编译阶段，当JS文件被编译时，会把变量的声明部分"提升"到代码的开头 并给这个变量赋值undefined

  上面的文字可能有些抽象，下面我用一张图片来模拟变量提升过程

看完这张图你可能又会问一个问题 为什么myName ＝ undefined 而不是null呢？

这就又涉及到js的一个知识点：变量的类型由值决定

这样一来我们就能很好地理解为什么这段代码会输出undefined了

• 下面增加一点难度再看一个例子

    showName(); // 函数showName被执行了
    console.log(showName); //Function : showName
    function showName() { 
     console.log('函数showName被执行了');    
 }

    showName(); // TypeError: showName is not a function
    console.log(showName);
    var showName = function(){ 
    console.log('函数showName被执行了');
 }

看完第一段代码你可能又会问，不是变量提升吗？怎么换成函数也不会报错呢？

• 函数提升

  有了上面变量提升的说明，函数提升就能比较轻松的理解了，但函数提升与变量提升还是有区别的，函数提升是将整个函数声明提升到了代码开头

  下面我依然用一张图来模拟函数的变量提升

理解了函数提升，我们再来看第二段代码，为什么同样是声明一个函数第二段代码却报错了呢？

我们从代码中可以看出第二段代码是以函数字面量的形式来创建一个函数，而这种方式创建函数包括了声明和赋值两部分，这就相当于我们上文讲到的变量提升，代码文件在编译阶段只把 var showName提升到了开头并赋值undefined 没有把后面的赋值语句一起提升

下面我依然用一张图来模拟函数字面量的变量提升

• 最后用一道例题来巩固一下变量提升的知识

console.log(showName);
showName();
var showName = function(){
    console.log(2);
}

function showName () {
    console.log(1);
}
showName()

解题思路我依然用一张图为大家表示出来

• 小结

1. 代码是逐行运行的
2. 代码文件运行时分为两个阶段，编译阶段和执行阶段
3. 变量的类型由值来决定
4. 所谓的变量提升， 是指在JS代码执行中， Javascript引擎(V8)，把变量的声明部分和函数的声明部分提升到开头的行为，同时会给变量设置默认值undefined