JavaScript作用域

一.作用域的概念

1.javaScript 作用域 就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性     更重要的是减少命名冲突

2. 全局作用域 ： 整个script 标签 或者是一个单独的js文件

  <script>
var num=10;
    console.log(num);

 </script>

3.局部作用域 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果作用

  function fn(){
        // 局部作用域
        var num=20;
        console.log(num);
    }
    
    fn();

二.变量作用域

根据作用域的不同分为全局变量 和局部变量

1.全局变量 在全局作用域下的变量

注意 如果在函数内部没有声明 直接赋值的变量也属于全局变量

var num=10; //num 就是一个全局变量
console.log(num);

function fn(){
    console.log(num);
}
fn();

 2.局部变量 在局部作用域下的变量  后者在函数内部的变量就是 局部变量

注意 函数的形参也可以看做是局部变量

function fun(aru){
    var num1=10;//num1 就是局部变量  只能在函数内部使用
    num2=20;
}
fun();
console.log(num2);

3.从效率来看全局变量和局部变量

 (1)全局变量 只有在浏览器关闭的时候才会销毁 ，比较占内存资源

(2)局部变量 在我们程序执行完毕就会销毁  ，比较节约内存资源

三.作用域链

作用域链:内部函数访问外部函数的变量  采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链  就近原则

案例：

   // 案例1：结果是几
        function f1(){
            var num = 123;
            function f2(){
                console.log(num);//站在目标出发，一层一层的往外查找
            }
            f2();
        }
        var num = 456;
        f1();//123

// 案例2
var a=1;
function fn1(){
    var a=2;
    var b=22;
    fn2();
    function fn2(){
        var a=3;
        fn3();
        function fn3(){
            var a=4;
            console.log(a);//a的值？4
            console.log(b);//b的值？22
        }
    }
}
fn1();

四.预解析

1.我们js引擎运行js分为两步  ：  预解析  代码执行

    (1)预解析 js引擎会把js里面所有的var 还有function  提升到当前作用域的最前面

   (2)代码执行  按照代码书写的顺序从上往下执行

2.预解析 分为 变量解析（变量提升）  和函数解析（函数提升）

 （1） 变量提升 就是把所有的变量声明提升到当前的作用域前面 不提升赋值操作

    (2)函数提升  就是把所有的函数声明提升到当前作用域的前面 不调用函数

我们用案例来解释：

//案例1
        var  num=10;
        fun();

        function fun(){
            console.log(num);
            var num=20;
        }
        // 相当于执行了下方操作  先看外层 变量提升 和函数提升  在看里面 变量提升和函数提升
        // 变量提升 就是 定义变量 不赋值   函数提升就是把声明提到调用前面
        // var num;
        // function fun(){
        //     var num;
        //     console.log(num);
        //     var num=20;
        // }
        // num=10;
        // fun();

// 案例2
var num=10;
function fn(){
    console.log(num);//undefined
    var num =20;
    console.log(num);//20
}

fn();
// 相当于执行以下代码
// var num;
// function fn(){
//     var num;
//     console.log(num);
//     num=20;
//     console.log(num);
// }
// num=10;
// fun()

// 案例3
var a=18;
f1();
function f1(){
    var b=9;
    console.log(a);
    console.log(b);
    var a="123";
}
//相当于以下代码
// var a;
// function f1(){
//     var b;
//     var a;
//     b=9;
//     console.log(a);
//     console.log(b);
//     a="123";
     
// }
// a=18;
// f1();//undefind 9

f1();
console.log(c);
console.log(b);
console.log(a);

function f1(){
    var a=b=c=9;
    // 相当于 var a=9；b=9；c=9;   b 和c直接赋值  没有var声明 当 全局变量
    //
    console.log(a);
    console.log(b);
    console.log(c);
}

// 相当于执行以下代码
// function f1(){
//     var a;
    
//     a=b=c=9;
//     console.log(a);//9
//     console.log(b);//9
//     console.log(c);//9
// }
// f1();
// console.log(c);//9
// console.log(b);//9
// console.log(a);//报错