前言

    好几天没有写笔记了，说好的每天一更呢......

    不过写起来真的太麻烦了（抓头发）

    目前已经完成了菜鸟教程的HTML+CSS基础课程的学习，现阶段正在学习JavaScript，同时打算同步看一本CSS书，毕竟感觉只在菜鸟教程上学习完，依然是个菜鸟。。。

    JavaScript，就目前的学习情况来看感觉和其他编程语言类似，许多基础语法没必要再学习了，但仍有许多特性，比如今天要跟大家分享的JavaScript变量提升

正文

何为变量提升呢？

    函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。也就是说，将函数声明以及变量声明放在代码块的最前端。下面我们来看一个例子：

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

//但其实在执行时是这样的

var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

提升过程详解

    变量的声明和函数的声明提升，提升的时机发生在预解析过程中。预解析过程也就是创建 AO（Activation Object） 的过程。
创建AO过程：

1.     创建 AO 对象。
2.     将形参和函数内变量声明作为对象的属性名，属性值统一为 undefined。
3.     将实参赋值给形参。
4.     找函数内的函数声明作为对象的属性名，属性值为函数体。

    我们在这里需要说明的是：在函数和变量同时被提升的过程中，函数会首先被提升，然后才是变量。但还需要注意的是，在提升过程中，JavaScript 初始化并不会提升，如：var x = 5;   并不会被提升。

    明白了这一过程之后，我们来看一个简单的示例：

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
console.log(v1);
var v1 = 100;
foo();
console.log(v1);

//undefined
//undefined
//200
//100

难度提升

    下面我们来看一段代码：

function jsFun6(){  //函数声明和函数表达式的区别
    
    test1();//函数声明提升，在执行代码之前会先读取函数声明，不会报错
    function test1(){//函数声明方式创建函数
        alert("测试1");
    }
    
    //test2();报错，函数还不存在
    console.log(test2)//不会报错，变量提升只是提升变量的声明，并不会把赋值也提升上来，输出undefined
    var test2=function(){
        alert("测试2");
    };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
    test2();//不会报错，以创建函数
                
    var test3=function(){
        alert("测试3");
    }();//加了括号立即执行
    
    var test4 = 12;// ！注意看，一旦变量被赋值后，将会输出变量
    //函数提升优先级高于变量提升，所以函数先提升，然后变量提升覆盖之前的函数声明，表                
    //现为变量
    function test4() {
        alert("测试4");               
    }
    console.log(test4); //12

    var test5="test5_1";
    (function(){
        //js中的变量搜索顺序：找变量时，先找局部变量，如果没有局部变量；再找全局变量。
    alert(test5);//此时的test5为局部变量的提升，undefined
    var test5="test5_2";
    })();
                
}

    首先 JS 在执行之前会有一个预编译过程，变量提升和函数提升就是发生在这里。在执行 jsFun6 函数时首先会创建一个 AO 对象。

AO{

}

第10行的 var test2
第15行的 var test3
第19行的 var test4
第27行的 var test5

AO{
    test2：undefined
    test3：undefined
    test4：undefined
    test5：undefined
}

    再找到函数声明作为AO的属性名，属性的值为函数声明的函数体（这里就是函数声明提升）。
    我们可以看到 jsFun6 函数里有以下的函数声明：

第4行 function test1(){}
第22行 function test4(){}

AO{
    test2：undefined,
    test3：undefined,
    test4：function test4(){alert("测试4");},
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：function test4(){alert("测试4");},
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

AO{
    test2：function(){alert("测试2");},
    test3：undefined,
    test4：12,
    test5：undefined,
    test1：function test1(){alert("测试1");}
}

AO2{
    test5：undefined
}

AO2{
    test5：test5_2
}

总结

    我们习惯将var a = 2;看做是一个声明，但实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。因此它并不会得到提升
    总结全文来看，无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理，可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各自作用域的最顶端，这个过程被称为提升。

本文参考：https://blog.csdn.net/qq_39712029/article/details/80951958