2.4 JavaScript 作用域与预解析

旧城等待， 2022-10-16 04:49 236阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*  一、 JavaScript 作用域
 *   *  1. 作用域
     *  2. 变量作用域
     *  3. 作用域链
 *  二、JavaScript 预解析
 *   *  1.预解析
     *  2. 预解析案例

--------------------

# 一、 JavaScript 作用域 #

## 1. 作用域 ##

JavaScript 的作用域就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，重要的是减少命名冲突。

JavaScript的作用域（es6）之前：全局作用域和局部作用域

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

**局部作用域（函数作用域）**：在函数内部就是函数作用域，这个代码的名字只能在函数内部起效果和作用

## 2. 变量作用域 ##

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

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

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

// 注意 如果在函数内部 没有声明直接赋值的变量也属于全局变量
    var num = 10; // num就是一个全局变量
    console.log(num); //10
    
    function fn() {
        
        console.log(num);
        num2 = 20; //num2为全局变量
    }
    fn(); //10
    console.log(num2); //20

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

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

// 注意： 函数的形参也可以看做是局部变量
    function fun(aru) {
        
        var num1 = 10; // num1就是局部变量 只能在函数内部使用    
    }
    fun();
    console.log(num1); //10

**全局变量和局部变量的区别**：

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

**块级作用域**

js中没有块级作用域，只有在es6的时候新增块级作用域

//块级作用域 if{} for{}
    if (3 < 5) {
        
    	var num = 10;
    }
    console.log(num); //外面的是不能调用num的

## 3. 作用域链 ##

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

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

// 案例1 ： 结果是几？
    function f1() {
        
        var num = 123;
        function f2() {
        
            var num = 0;
            console.log(num); // 0   站在目标出发，一层一层的往外查找
        }
        f2();
    }
    var num = 456;
    f1();
    
    // 案例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();

# 二、JavaScript 预解析 #

## 1.预解析 ##

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

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

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

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

// 1问  
    console.log(num); //报错！
    
    // 2问
    console.log(num); // undefined  坑 1
    var num = 10;
    // 相当于执行了以下代码
    // var num;
    // console.log(num);
    // num = 10;
    
    // 3问  
    function fn() {
        
        console.log(11);
    }
    fn();
    
    // 4问
    fun(); // 报错  坑2 
    var fun = function() {
        
        console.log(22);
    }
    // 相当于执行了以下代码
    // var fun;
    // fun();
    // fun = function() {
        
    //   console.log(22);
    //}

## 2. 预解析案例 ##

// 案例1
    var num = 10;
    fun();
    function fun() {
        
         console.log(num); //undefined
         var num = 20;
    }
    
    // 相当于执行了以下操作
    // var num;
    // function fun() {
        
    //     var num;
    //     console.log(num);
    //     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;
    // fn();

// 案例3
    f1();
    console.log(c);
    console.log(b);
    console.log(a);
    
    function f1() {
        
        var a = b = c = 9;
        console.log(a);
        console.log(b);
        console.log(c);
    }
    //最后输出 9 9 9 9 9 报错
    
    // 以下代码
    // function f1() {
        
    //     var a;
    //     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);
    // }
    // f1();
    // console.log(c);
    // console.log(b);
    // console.log(a);

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7