前端基础学习

作用域

2020-04-27  本文已影响0人  小雪洁
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>环境与作用域</title>
    </head>
    <body>
    </body>
    <script>
//全局环境是不会被回收的,除非人为回收或者关闭浏览器
//函数里面的变量默认是不能在函数外面用的,函数在执行结束后就会释放它的环境,
//函数每调用一次就给它分配一个环境(内存地址),每次都是不同的
//函数调用前不会给它分配内存空间,调用的时候给它分配,执行完就立马释放这块内存
        function hd(){
            let n=1;
            function sum(){
                console.log(++n);
            }
            sum();
        }
        let a=hd;
        a();//2
        a();//2
//但是如果把sum返回去,函数在执行完hd这块内存就不会立马释放,
    function hd0(){
        let n=3;
        return function sum0(){
            console.log(++n);
        };
    }
    let b=hd0();
    console.log(b);//b接到的是sum0这个函数体
    b();//4
    b();//5
    let c=hd0();
    c();//4
    c();//5
    function hd1(){
        let n=3;
        return function sum1(){
            let m=1;
            function show(){
                console.log(++m);
            }
            show();
        };
    }
    let d=hd1();
    d();//2
//并没有累加,也就是说在hd1调用的时候,返回了sum函数,因为sum()是定义在hd1中的
//所以内存会把hd1的执行环境保存着,但是在show()是定义在sum中的,在sum的执行环境里
//show是在调用的时候才会给它分配空间,不调用依旧是不给它分配
//但是如果把show()函数return回去,则在内存中就会给它保留着这个环境了
    d();//2
    </script>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>构造函数中的作用域</title>
    </head>
    <body>
    </body>
    <script>
//构造函数里使用this.functionName=function(){}定义的方法,会在内存中保存着其执行环境,
//再次执行的时候是从上次的执行结果基础上继续执行
        function HD(){
            let n=1;
            this.sum=function(){
                console.log(++n);
            };
        }
        //等同于
        function HD0(){
            let n=1;
            function sum(){
                console.log(++n);
            };
            return {sum}
        }
        let a=new HD();
        a.sum();//2
        a.sum();//3
        let b=new HD();
        b.sum();//2
        b.sum();//3
        let c=new HD0();
        c.sum();//2
        c.sum();//3
    </script>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>块作用域</title>
    </head>
    <body>
    </body>
    <script>
//块级作用域对let和const声明的变量有效,var声明的变量没有块级作用域
        {
            let a=3;
            //console.log(a);//3
            var b=2;
            //console.log(b);//2
        }
        //console.log(a);//报错 let和const定义的变量都有块级作用域
        console.log(b);//2使用var定义的变量没有块级作用域

    </script>
</html>
上一篇下一篇

猜你喜欢

热点阅读