变量声明提升和函数声明提升

目录

变量声明提前

函数声明提升

函数的两种创建方式

---

什么叫变量提升？

       原则上变量应该先声明后使用，但是程序员小白常常忘记声明就使用了变量，这样做js代码在执行的时候不报错，只是返回了一个undefined。这种情况就是变量提升。

      计算机执行的时候会把未声明就使用的变量隐式的放到代码的最顶端。需要注意的是变量虽然发生了提升，但是给变量赋的值是不会随之提升的，所以就会得到结果undefined。

什么是函数提升？

       与变量提升的意思差不多，先使用函数，后再声明函数，这种违背逻辑的事情在JavaScript中是允许的，这门语言就是这么灵活。

       与变量提升不同的是，函数的返回值也会随之提升，所以你会发现在<script>标签中的任何地方都能调用函数并且使用函数的返回值。

变量声明提前

JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前（hoisting），即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子：
注释：声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。
 

var scope = 'global';
function f(){
    console.log(scope);
    var scope = 'local';
    console.log(scope);
}

由于函数内声明提升，所以上面的代码实际上是这样的

var scope = 'global';
function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

经过这样变形之后，答案就就非常明显了。由于scope在第一个console.log(scope)语句之前就已经定义了，但是并没有赋值，因此此时scope的指是undefined.第二个console.log(scope)语句之前，scope已经完成赋值为’local’，所以输出的结果是local。

函数声明提升

函数的两种创建方式

• 函数声明
• 函数表达式

函数声明语法

f('superman');
function f(name){
    console.log(name);
}

运行上面的程序，控制台能打印出supemran。
函数表达式语法

f('superman');
var f= function(name){
    console.log(name);
}

运行上面的代码，会报错Uncaught ReferenceError: f is not defined(…),错误信息显示说f没有被定义。

为什么同样的代码，函数声明和函数表达式存在着差异呢？
这是因为，函数声明有一个非常重要的特征：函数声明提升，函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，所以可以把函数声明放在调用它的语句后面。如下面例子，最终的输出结果应该是什么？：

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

可能会有人觉得最后输出的结果是1。让我们来分析一下，这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升，函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到底部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。因此上面的函数可以转换成下面的样子:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出：2

所以最终的输出结果是：2。在原来的例子中，函数声明虽然是在函数表达式后面，但由于函数声明提升到顶部，因此后面getName又被函数表达式的赋值操作给覆盖了，所以输出2。