作用域

// JavaScript作用域:就是代码名字（变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突
//js的作用域(es6之前)：全局作用域  局部作用域
//全局作用域：整个javascript标签 或者是一个单独的js文件
var num = 10;

//局部作用域(函数作用域) 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
function fn(){
    var num = 20;//局部作用域
}

变量的作用域

//变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量
//1. 全局变量；在全局作用域下的变量 在函数内部没有声明，直接赋值的变量也是全局变量
var num = 10;//num就是一个全局变量
console.log(num);//10
function fn(){
    console.log(num);//10
    num2 = 20;//全局变量
}
//2.局部变量 
//注意：函数的形参也可以看作是局部变量
function fn(){
    var num1 = 20
    console.log(num1);//20
}
fn();
console.log(num1);//num1 is not defined

//3.从执行效率来看全局变量和局部变量
//全局变量只有浏览器关闭的时候才会销毁 比较占内存
//局部变量 当我们程序执行完毕就会销毁 比较节约内存资源

作用域链

//作用域链
//内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们成为作用域链
var num = 10;
function fn(){
    var num = 20;
    function fun(){
        console.log(num);//20
    }
    fun();
}
fn();

预解析

• 解析器运行JS分为哪两步？
• 变量提升的步骤和运行过程
• 函数提升的步骤和运行过程

//1
//console.log(num);//报错 num is not defined
//2
//console.log(num);//undefined  坑1
//var num = 10;
//相当于按以下顺序执行
//var num;
//console.log(num);
//num = 1;

//3.
//fn();//11
function fn(){
    console.log(11);
}

//4.
fun();//报错 fun is not a function 坑2
var fun = function(){
    console.log(22);
}
//函数表达式 调用必须写在函数表达式的下面
//相当于执行了以下代码
var fun;
fun();
fun = function(){console.log(22);}

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

• 预解析 js引擎会把js 里面所有的var 还有 function 提升到当前作用域的最前面
• 执行代码 按照代码书写的顺序从上往下执行

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

• 变量提升 就是把所有的变量声明提升到当前的作用域的最前面 不提升赋值操作
• 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

预解析案例

案例1

        var num = 10;
        fun();//undefined

        function fun() {
            console.log(num);
            var num = 20;
        }

案例2

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

案例3

var a = 18;
f1();
function f1(){
    var b = 9;
    console.log(a);//undefined
    console.log(b);//9
    var a = '123';
}
//相当于以下代码
var a;
function f1(){
    var b;
    var a;
    b = 9;
    console.log(a);//undefined(从作用域理解)
    console.log(b);//9
    a = '123';
}
a = 18;
f1();

案例4

        f1();
        console.log(c);//9
        console.log(b);//9
        console.log(a);//a is not define

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