js作用域及预解析

---

一、作用域

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

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域和局部作用域

// 1.JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性和，更重要的是减少命名的冲突
// 2.js的作用域（es6）之前：全局作用域 局部作用域
// 3.全局作用域：整个script标签，或者是一个单独的js文件
var num = 10;
console.log(num); // 10
// 4.局部作用域（函数作用域）在函数内部就是局部作用域，这个代码的名字只在函数内部其效果和作用
function fn() {
    // 局部作用域
    var num = 20;
    console.log(num);
}
fn(); // 20

2.js没有块级作用域

// js没有块级作用域，js的作用域：全局作用域、局部作用域、现阶段js没有块级作用域
// js也是在es6的时候新增的块级作用域
// 块级作用域 {} if{} for{}
/* java
if (xx) {
     int num = 10;
} */
// 外面的是不能调用num的
        
if (3 < 5) {
    var num = 10;
}
console.log(num);

二、变量的作用域

1.变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种：

• 全局变量
• 局部变量

// 变量的作用域：根据作用域的不同，可以把变量分为全局变量和局部变量
// 1.全局变量：在全局作用下的变量，在全局都可以使用
// 注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量
var num = 10; // num就是一个全局变量
console.log(num); // 10

function fn() {
    console.log(num);
}
fn();
// console.log(aru);
// 2.局部变量：在局部作用下的变量，或者在函数内部的变量就是局部变量
// 注意：函数的形参也可以看作是局部变量
function fun(aru) {
    var num1 = 10; // num1就是局部变量，只能在函数内部使用
    num2 = 20;
}
fun();
// console.log(num1);
// console.log(num2);// 20
// 3.从执行效率来看全局变量和局部变量
// 3.1全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
// 3.2局部变量，当程序执行完毕就会销毁，比较节约内存资源

2.全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）

• 全局变量在代码的任何位置都可以使用
• 特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）

3.局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

• 局部变量只能在该函数的内部使用
• 函数的形参实际上就是局部变量

4.全局变量和局部变量的区别

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

三、作用域链

• 只要是代码，就至少有一个作用域链

// 作用域链：内部函数访问外部函数的变量，采取的是链式查找来决定取哪个值，这种结构称为作用域链，就近原则
var num = 10;

• 写在函数内部的局部作用域

function fn() {
    var num = 20;
}

• 如果函数中还有函数，那么这个作用域中又可以诞生一个作用域

function fn() {// 外部函数
    var num = 20;
    function fun(){
        console.log(num);// 内部函数
    }
}

• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

function fn() { // 外部函数
    var num = 20;

    function fun() {
        console.log(num); // 内部函数
    }
    fun();
}
fn(); // 20

1.案例1：结果是几？

function f1() {
    var num = 123;

    function f2() {
        console.log(num);// 站在目标触发，一层一层往外查找
    }
    f2();
}
var num = 456;
f1(); // 123

2.案例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); // 4
            console.log(b); // 22
        }
    }
}
fn1();

四、预解析

1.预解析

// 1.问
console.log(num); // 报错

// 2. 问
console.log(num); // undefined 坑1
var num = 10;
 // 相当于执行了以下代码
var num;
console.log(num);
num = 10;

// 3.问
fn(); // 11

function fn() {
    console.log(11);
}
// 相当于执行了以下代码
function fn() {
    console.log(11);
}
fn();

// 4.问
var fun = function() {
      console.log(22);
}
fun(); // 22

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

JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。

// 1.js引擎运行js分为两步：预解析 代码执行
// （1）预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
// （2）代码执行：按照代码书写的顺序从上往下执行
// 2.预解析分为 变量预解析（变量提升）和函数预解析（函数提升）
// （1）变量提升，就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
// （2）函数提升，就是把所有的函数声明提升到当前作用域的最前面，不调用函数

2.案例1：结果是几？

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

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

// 相当于执行了以下操作
var num;

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

3.案例2：结果是几？

// 案例2
var num = 10;

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

// 相当于执行了以下操作
var num;

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

4.案例3：结果是几？

// 案例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); // undefined
    console.log(b); // 9
    a = '123';
}
a = 18;
f1();

5.案例4：结果是几？

// 案例4
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声明，相当于全局变量
    // 集体声明var a = 9;b = 9;c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

// 相当于执行了以下操作
function f1() {
    var a;
    a = 9;
    b = 9;
    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); // 报错