美文网首页
js高级知识点(第五天)

js高级知识点(第五天)

作者: js66 | 来源:发表于2019-08-08 22:18 被阅读0次

    所用域

    什么是作用域

    变量起作用的范围

    什么是块级作用域,使用代码块限定的作用域是块级作用域(let声明的变量是块级作用域)

    js的作用域叫词法作用域

    词法作用域

    在代码写好的时候,就能确定变量的作用域,这种作用域就是词法作用域。

    动态作用域。(是词法作用域就不可能是动态作用域)

    在js中只有函数才能创造作用域。

    var num = 123

    function f1(){

    console.log(num) // 123

    }

    function f2(){

    var num = 456;

    f1();

    }

    f2();

    变量提升

    js代码的运行分为两个阶段

    预解析阶段

    变量名和函数提升

    将var声明的变量名和function开头的函数进行提升

    提升到作用域的最上方

    执行阶段

    注意:

    1.变量和函数同名的时候

    只提升函数,忽略变量名

    2.函数同名的时候

    都提升,但是后面函数覆盖前面的函数

    3.函数表达式,只会提升变量名,不会提升函数

    4.变量提升只会将变量和函数提升到当前作用域的最上方。

    5.变量提升是分块的

    function foo(){

    var num = 123;

    }

    6.条件函数式声明是否会被提升(取决于浏览器,有的浏览器支持,有的浏览器不支持)

    条件式声明不推荐去写

    foo()// 报错,未被提升

    if(true){

    function foo(){

    console.log(1)

    }

    }

    7.作用域链

    只要是函数都有作用域,函数内部的作用域可以访问外面的作用域

    当多个嵌套的时候,就会形成一个链式的结构,这就是作用域链

    绘制作用域图的步骤

    1.先绘制0级作用域链

    2.在全局作用域中查找,变量和函数的声明,找到之后,将所用的变量和函数用小方格放在0级作用域上。

    3.再从0级作用域链上的函数引出1级作用域链

    4.再去每一个1级作用域链中查找变量和函数声明,知道之后。。。。

    5.以此重复,就画好了整个作用域链。

    变量的搜索规则

    1.首先在访问变量的作用域中查找该变量,如果找到直接使用

    2.如果没有找到,就去上一级作用域中查找,如果找到了就直接使用

    3.如果没有找到,继续去上一级作用域中查找,如果找到了就直接使用

    4.如果找到了就用,如果没有没有找到就报错。

    闭包。

    闭包是什么,

    一个封闭的对外不公开的包裹结构

    js的闭包是函数

    闭包要解决的问题

    1.在函数外部访问不到函数的数据

    2。要解决的问题就是需要在外部访问函数内部的变量

    闭包的基本结构

    function outer(){

    var data = '21321';

    return data;

    }

    function outer(){

                var data = "数据";

                return {

                    getData:function(){

                        return data;

                    },

                    setData:function(value){

                        data = value;

                        return data;

                    }

                }

            }

    闭包的作用

    如果把数据放在全局作用域内,那么所有人都可以随意更改,这个数据就不再可靠。

    闭包可以创建一个私有空间,在这个空间内部的数据,外部无法直接访问。

    外部空间想要访问函数内部的数据,只能通过闭包提供的指定的方法,在这个方法内部设置校验规则,让数据变得更加安全。

    作用域链图如下:

    相关文章

      网友评论

          本文标题:js高级知识点(第五天)

          本文链接:https://www.haomeiwen.com/subject/fdtqjctx.html