JavaScript基础03——函数的作用域及变量提升

1.作用域

作用域，变量在函数内部作用的范围／区域。有函数的地方就有作用域。

 

2.局部作用域和全局作用域

function fn(){
        var a = 1;
    }
    console.log(a);    //报错：a is not defined
    用var声明的变量，实际上是有作用域的
    在函数内部定义的变量，该变量的作用域是整个函数体，在函数体外不可引用该变量，这是局部作用域

    变量的生命周期：
    1.永远存在－－－－全局
        程序没关，一直占用内存，少用全局
    
    2.朝生暮死－－－－局部
        函数的大括号开头到函数的大括号结尾

    var a = 1;
    function fn(){
        console.log(a);    //1
    }
    console.log(a);    //1
    不在任何函数内定义的变量就具有全局作用域。全局变量在任何地方都能调用。

    作用域的处理方式：利用匿名函数生成一个局部作用，把变量的声明和使用这个变量的小函数都放在匿名函数中

// 作用域：

        // 生效的区域

        // 变量生效的区域

    

    // 区域：

        // 全局：整个代码文件，不属于任何一个函数，就是全局

        // 局部：每个函数都是一个局部

        // 能不能跨作用域访问：

            // 同级局部不能跨

            // 父不能拿子，子能拿父

            // 多个父子级作用域内都有，找最近的作用域

// 全局作用域下的变量，叫全局变量
    var a = 10;
    // 局部作用域下的变量，叫局部变量
    function fn(){
        var a = 20;
        console.log(a)
    }
    function fn1(){
        var a = 30;
        console.log(a)
    }
    function fn2(a){
        console.log(a)
    }
    fn();
    fn1();
    fn2("hello");
    // console.log(a);

    // 函数中的形参也是变量，形参也是当前函数的局部变量

3.声明提升

变量声明提升：
    console.log(a)        //undefined已经声明但是未赋值
    var  a = 2;
    console.log(a)        //2

    consoleo.log(b)       //not a defined未声明
    
    function fn(){
        console.log(a)    //undefined
        var a = 1;
    }
    fn();
    在函数fn()中，在没有定义变量之前打印a，得到undefined，而并不是not defined
    说明此时变量已经被声明，只是还没有被赋值。

    上面的fn()函数可以理解成
    function fn(){
        var a;
        console.log(a);
        a = 1;
    }
    fn();

    我们称这种现象为变量的声明提升，所有使用var声明的变量会在当前作用域最开始的部分被声明。   

函数的声明提升：整体提升

函数的声明提升：整体提升
    fn();        //2
    function fn(){
        console.log(2);
    }
    fn();        //2

------------------------------------
注意：
    console.log(fn);     //undefined
    fn();                //not a function
    var fn = function(){
        console.log(1);
    }

 function fn(){
        console.log(a);     //f2
        var a = "hello";
        console.log(a);     //"hello"
        function a(){1}
        console.log(a);     //"hello"
        a = "world";
        console.log(a);     //"world"
        function a(){2}
        console.log(a);     //"world"
    }
    // 以上代码等价于↓↓↓
    function fn(){
        var a;
        function a(){1}
        function a(){2}
        console.log(a);     //f2
        a = "hello";
        console.log(a);     //"hello"
        console.log(a);     //"hello"
        a = "world";
        console.log(a);     //"world"
        console.log(a);     //"world"
    }
    fn();