变量提升，函数提升概念及相关题

之前总是对变量提升，函数提升一知半解，随着时间的推移，理解的越来越深刻，接下来就写一写，有不对的地方请大家指出来。

1) 变量提升

1. 通过var定义(声明)的变量, 在定义语句之前就可以访问到
2. 值: undefined

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

等同于

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

即：变量提升。你在一个作用域任何一个地方声明变量，都会被提升到作用域开始

2) 函数提升

1. 通过function声明的函数, 在之前就可以直接调用
2. 值: 函数定义(对象)

foo();
function foo(){
   console.log(1111);
}

输出结果 1111

如下：

function foo(){
    console.log(1111);
}
foo();

注意点：

foo();
var foo = function(){
   console.log("aaa");
}

报错运行结果是： foo is not a function

原因是：js解析遇到 foo()时会默认当做函数来解析

综合题

（1）var和函数

注意点：如果函数声明和变量声明使用同一变量名称，函数声明的优先级高于变量

<script>
     console.log(a)//function a(){}         
     var a = 1;
     console.log(a)//1
     function a(){
　　　}
     console.log(a)//1
</script>

等同于以下代码：

其过程：变量a先声明，给a赋值为undefined，后来预编译函数function a(){}再声明；输出a为function a(){} ; 之后给a赋值为1；输出a为1

<script>
     var a;
     a = function a(){}
     console.log(a)//function a(){}
     a=1;
     console.log(a)//1
     console.log(a)//1
</script>

（2）var和函数参数

<script>
    var a=8;
    function fn(a,b){ 
        console.log(a)//undefined    
        var a=10;
        console.log(a)//10
    }
    fn();
</script>

解析：用fn的时候传入参数a，b。当前函数作用域能够找到a，其值是undefined。所以不会向外查找

<script>
    function fn(a,b){
        console.log(a)//hello
        var a=10;
        console.log(a)//10
    }
    fn('hello');
</script>

解析：调用fn，传入参数a，b。 a和b会预编译赋值undefined，调用fn，传入"hello", a就被赋值为hello。之后给a赋值为10，输出a为10。

函数，函数参数，var

<script>
    var a=10;
    function fn(a,b){
        console.log(a)//function a(){}   这里输出function a(){}， 不是参数a的值
        var a=10;
        console.log(a)//10
        function a(){}
        console.log(a)//10
    }
    fn(15);
</script>

fn里面有参数a，也有变量a，也有函数a，这种迷惑性更高。其实当你知道三者先后顺序之后就不迷惑了

经过测试，我发现：参数a会覆盖预编译变量a的默认值，如果有函数，函数会覆盖参数a的值，就是先后顺序而已。

函数形参声明--->函数声明---->变量声明

<script>
    a();//1
　　 console.log(a) // function a(){ console.log(1)}

    var a = c = function() {
        console.log(2)
    };
    a();//2

    function a() {
        console.log(1)
    }
    a();//2
    (function(b) {
        b();//2 　　
        c();//2      
        var b = c = function a() {
            console.log(3)
        }
        b()//3
    })(a);
    c();/
</script>

注意点：

如 var a = b = 1 ;相当于  b = 1，是全局变量，之后 var a  = b; 把 b 的值1 赋值给a，此时a是局部变量

接着来看，

console.log(typeof foo); 
console.log(typeof bar); 
console.log(typeof add); //函数的声明 
function foo(){ alert('foo'); } //命名函数表达式 
var bar = function(){ alert('bar'); }; // 函数表达式-匿名函数 
var add = function(a,b){ return a+b; }

输出结果为 function undefined undefined

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

输出结果为

function b(){             2
    return 2;
}

console.log(a) 
console.log(b)

b()

function a() {
        console.log(a) 
}
var b = function(){
        console.log(b)
}

输出结果

function a() {                 undefinded       b is not a function
        console.log(a) 
}