一次搞清js的预解析和作用域、作用域链-经典面试难题解读

一、预解析

浏览器可以解析HTML、css,js,图片,音视频,超链接。

比如用QQ影音播放音视频,不同的视频格式会使用不同的编码器一样:rmvb,mp4,kmv

浏览器跟我们人看到的代码是不一样的。浏览器遇到HTML代码就会用HTML的解析器来解读代码,遇到style标签就会切换成css的解析器解析css,如果遇到script标签呢,才会唤醒JS的解析器来解析JS代码,这时候它可不是逐行解析,而是先做些准备工作。也就是JS解析器主要是做了两件事.

浏览器解析JS代码是分了两个步骤进行:

  1. 做准备工作。找 var 、function
    //规则:
    a. 遇到重名的,无论是变量还是函数重名,只会留下一个,而且不论他们写的位置(上还是下),只是有无值有关系
            如果是变量与函数重名,则只会留下函数
            如果是函数与函数重名,才遵循优先级,下的覆盖上的
    
    b. 在函数内部会重新进行一次预解析和逐行解读代码的过程
    
    c. 函数是整体提升,变量是只提升左边(不包括=后面,即右边)
    

    我们就把把这种找var,找function并且提升到顶部的过程称之为预解析(预解释)

  2. 逐行解读代码。(从左到右,从上到下执行)这一步相当于是我们人看到的代码。
    真正执行代码时,每一行都去仓库寻找对应的东西,然后给表达式赋值,表达式即为有=+-/*% ++ -- !等的操作,表示的是一个动作,即可以改变变量的值,所以表达式是可以修改预解析的值的
    

二、作用域

跟变量和函数有关。

作用:读、写

var a=1; //写
alert(a);//读
//写
function a(){

}
//读
a();

域:空间、范围

变量和函数的作用范围。作用域就是变量与函数的可读写的范围。

三、全局作用域

特点:自由自在的,没有任何约束,可以在任意区域内使用。

  1. 全局变量指的是在函数外面声明的或者在函数内部没有使用var声明的变量。在script标签内,函数外面
    var a=1;
    function fun(){
        var b=1;//
        c=4;//这种在函数内部写的,没有使用var的,会自动变成全局变量,但是不要这样写
        alert(a)
    }
    alert(a);//
    alert(b);//不可以访问
    
  2. 全局函数指的是在函数外面声明的即为全局函数。非函数嵌套的函数在script标签内,函数外面
    //全局函数
    function fun(){
        //局部函数
        function add(){
    
        }
    }
    

四、局部作用域

目前只有函数才能形成局部作用域,即函数是一个封闭的空间,在该区域内声明的变量和函数都是局部的。

局部变量和局部函数只能在其所在作用域内访问。

  1. 局部变量
    var a=1;//全局的
    function fun(){
        var a=1;//局部的
        function add(){
            var a=1;//局部
        }
    }
    
  2. 局部函数
    var a=1;//全局的
    //全局函数
    function fun(){
        var a=1;//局部的
        //局部函数
        function add(){
            var a=1;//局部
        }
    }
    

五、作用域和预解析相遇了会产生什么样的火花?

预解析只要遇到了一个新的域就会重新发生。即预解析在新的域里面会重新进行一次预解析和逐行解读代码的过程。

总结:

也就是碰到函数调用,执行函数体的时候就是一个新的作用域,会重新进行预解析+执行
函数作用域,本区域找不到,就往上找,相当于是由里往外找。

六、作用域链

作用域嵌套就会形成作用域链。

变量、函数先会看自己的仓库中有没有,如果没有会继续往上一级找,如果找到最后面也没有,才会报错。

一个变量、函数由里往外会沿着这条链条依次去找它的上一级。

 

相关笔记案例资源:https://pan.baidu.com/s/1LtTdKHNDOI5xy4kkTRMBrw?pwd=euh6 提取码: euh6

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 624
(0)
打赏 微信扫一扫 微信扫一扫

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表89篇文章了,你也来试试

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top