JavaScript作用域及预解析

最新推荐文章于 2024-06-14 15:02:13 发布

枕頭說他不想醒

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量205

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_52984349/article/details/126272442

版权

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

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

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

一、JavaScript作用域

1、定义：

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

简单来说：JavaScript作用域：就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性避免命名冲突

2、分类

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

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

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

3、变量的作用域

（1）根据作用域的不用我们变量分为全局变量和局部变量

（2）全局变量

在全局作用域下的变量在全局下都可以使用

注意：如果在函数内部没有声明直接赋值的变量也是全局变量（不建议使用）

代码展示：

var num = 10; // 此时的num就是一个全局变量
        console.log(num);
        function fn(){
            console.log(num);
        }
        fn();

（3）局部变量

在局部作用域下变量或者在函数内部的变量

注意：

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

代码展示：

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

4、从执行效率老看全局变量和局部变量

（1）全部变量只有浏览器关闭的时候才会销毁，比较占用内存资源

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

5、块级作用域

js是在es6的时候新增的块级作用域，就是在{}内部的叫做块级作用域

注意：

（1）块级作用域只限于在块中有效，在外部不能调用

（2）if条件判断，for循环，函数等

6、作用域链

根据内部函数可以访问外部函数变量的这种机制，用链式查找决定那些数据能被内部函数访问就称为作用域链采取就近原则

1、只要是代码，就至少有一个作用域

2、写在函数内部的是局部作用域

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

代码展示：

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

结果展示：

二、JavaScript预解析

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

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

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

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

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

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

(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);
             num = 20;
            console.log(num);
         }
         num = 10;
         fn();

结果展示：