深入理解js变量提升和函数提升

一. 变量提升

console.log(a); // undefined
var a= 11;
console.log(a); // 11
 
function fn () {
　　console.log(a); // undefined
　　var a = 'aaa';
　　console.log(a); // aaa
}
fn();

这就是变量提升，实际上它的执行顺寻为：

var a;
console.log(a);//undefined
a = 11;
console.log(a);//11

function fn(){
    var a;
    console.log(a); 声明但并没有赋值
    a = 22;
    console.log(a);//22
}

二. 函数提升
js中创建函数有两种方式：函数声明式和函数字面量式。只有函数声明才存在函数提升！

console.log(fn1) //f1(){}
console.log(fn2) //undefined
function fn1(){}
var fn2 = function(){}

由于函数提升，实际执行顺序为：

var fn2;
function fn1(){}; // 函数提升，提升到最开始
console.log(fn1) //f1(){}
console.log(fn2) //undefined, 变量并没有赋值
var fn2 = function(){}

三. 练习

console.log(f1()); // undefined 这个地方，如果是f1 则打印出整个f1函数，如果是f1() 则会先执行f1函数，然后打印函数执行结果，为undefined; 如果函数f1中有个return的值，那么将会打印函数返回值。
console.log(f2); //undefined
function f1() {console.log('aa')} //aa
var f2 = function() {}

var total = 50;
function ss(num){
    total = num*num; // 如果在这个再声明一下total, 则整个函数就会先打印 50 再打印 400
    return total;
}
var number = ss(20);
consoel.log(total) //400 先执行了ss()
consoel.log(number) //400

(function() {
    console.log(a); // undefined 
    a = 'aaa'; //这里的变量a其实已经局部声明了，在次只是进行赋值；
    var a = 'bbb'; 这里是函数局部声明了变量，改变了之前的变量a。
    console.log(a);
})();

四. hoisting(提升)

    在Javascript语言中，变量的声明(注意不包含变量初始化）会被提升（置顶）到声明所在的上下文。
　也就是说，在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。

五. 变量重复声明

var a = 123;
var a;
console.log(a) // 123

var a = 123;
var a = 456;
console.log(a) // 456

//如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色.
//如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响.