JS 之作用域链和闭包

Posted 2020-08-15 Alex0425

1.JS无块级作用域

    <script>
        function Main(){
            if (1==1){
                var name = "alex";
            }
            console.log(name);
        }
        Main();
    </script>
执行结果：{}即块级作用域。

alex

2.JS采用函数作为作用域链

    <script>
        function Main(){
            var innerValue = "alex";
        }

        Main();
        console.log(innerValue);
    </script>
执行结果：

Uncaught ReferenceError: innerValue is not defined

3.JS的作用域链在创建前已经生成了

示例一：

    <script>
        xo = "alex";
        function Func(){
            var xo = "seven";
            function inner(){
                console.log(xo);
            }
            return inner;
        }
        var ret = Func();
        ret();
    </script>
执行结果：生成的作用域链为 xo("alex")----xo("undefined")----xo(使用作用域链)

seven

示例二:

    <script>
        xo = "alex";
        function Func(){
            var xo = "eric";
            function inner(){
                console.log(xo);
            }
            xo = "seven";
            return inner;
        }
        var ret = Func();
        ret();
    </script>
执行结果：生成的作用域链xo("alex")----xo("undefined")----xo("undefined")----Func[xo]("eric")----Func[xo]("seven")----inner()

seven

示例三:

    <script>
        xo = "alex";

        function Bar(){
            console.log(xo);
        }

        function Func(){
            var xo = "seven";
            return Bar;
        }

        var ret = Func();
        ret();
    </script>
执行结果：作用域链分为二段：1.xo("alex")----xo
　　　　　　　　　　　　　　2.xo("alex")----xo("undefined")----Func[xo]("seven")

alex

闭包：如果每个下载的JS都有自定义的全局变量，那么在导入的时候就会发生相互覆盖的现象，通过闭包可以将变量锁定在函数内。

(function(){
    var a = 123;
    function f1(){
        console.log(a);
    }
    function f2(){
        cocnsole.log(a);
    }
})();    

面向对象JS

    <script>
        function Foo(name,age){
            this.name = name;
            this.age = age;
        }

        Foo.prototype = {
            GetInfo:function(){
                return this.name + this.age;
            },
            Func:function(arg){
                return this.name + arg;
            }
        }
        var obj = new Foo(‘alex‘,22);
        console.log(obj.name);
        console.log(obj.GetInfo());
        console.log(obj.Func(55));
    </script>
执行结果：

alex
alex22
alex55