JavaScript作用域与变量管理-优快云博客

这篇博客详细介绍了JavaScript中的变量作用域，包括函数作用域、变量提升、闭包、全局作用域与局部作用域的区别，以及ES6中let关键字带来的块级作用域。同时，讨论了如何通过唯一全局变量来避免冲突，并引入了const常量的使用。最后，文章提到了在JavaScript中如何规范变量的定义和使用，以提高代码的可维护性。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //在JavaScript中，var定义的变量实际上是有作用域的
        //1、假设在函数体中申明，则在函数体外不可以使用，如果想要使用的话，可以通过闭包实现
        function fun1() {
            var x = 1;
            x = x + 1;
        }
       // x = x + 2;//会报错，Uncaught ReferenceError : x is not defined

        //2、如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
        function fun2() {
            var x = 1;
            x = x + 1;
        }

        function fun3() {
            var x = 'A';
            x = x + 1;
        }

        //3、函数内部可以访问外部函数的成员，反之则不行
        function fun4() {
            var  x = 1;

            function fun5() {
                var y = x + 1;
            }

            var z = y + 1;//会报错，Uncaught ReferenceError : y is not defined
        }

        //4、假设，内部函数变量和外部函数变量，重名
        function fun6() {
            var x = 1;

            function fun7() {
                var x = 'A';
                console.log("inner" + x);
            }
            console.log('outer' + x);
            fun7();
        }
        //假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的bianl

        //5、提升变量的作用域
        function fun8() {
            var x = "x" + y;
            console.log(x);
            var y = 'y';
        }//结果：undefined
        //说明：JavaScript执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，等价如下
        // function fun8() {
        //     var y;
        //
        //     var x = "x" + y;
        //     console.log(x);
        //     y = "y";
        // }
        //这个是在JavaScript建立之初就存在的特性。建议所有的变量定义都放在函数头部，便于代码维护，例如
        function fun9() {
            var x = 1,
                y = y + 1,
                z,i,a;//undefined
            //之后随意用
        }

        //6、全局函数
        x = 1;
        function f1() {
            console.log(x);
        }
        f1();
        console.log(x);
        //全局对象window
        var w = 'xxx'
        alert(w);
        alert(window.w);//默认所有的全局变量，都会自动绑定在window对象下；
        //alert（）这个函数本身也是一个window变量
        //多种用法
        var old_alert = window.alert;
        //old_alert(w);发现通用弹出来了

        window.alert = function () {

        };
        //发现alert（）失效了
        window.alert(123);

        //恢复
        window.alert = old_alert;
        window.alert(456);
        //JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用
        //范围内找到，就会向外查找，如果全局作用域都没有找到，报错“ReferenceError”


        //7、规范
        //由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突-》如何减少冲突，以下为示例
        //唯一全局变量
        var MassimoApp = {};

        //定义全局变量
        MassimoApp.name = "Massimo";
        MassimoApp.add = function (a,b) {
            return a + b;
        }

        //8、局部作用域let
        function fff() {
            for (var i = 0 ; i < 100 ; i++){
                console.log(i);
            }
            console.log(i+1);//问题？i出了这个作用域还可以使用
        }
        //ES6  let 关键字，解决局部作用域冲突问题
        function hhh() {
            for (let i = 0 ; i < 100 ; i++){
                console.log(i);
            }
            console.log(i+1);//Uncaught ReferenceError : i is not defined
        }
        //建议使用let 去定义局部作用域的变量

        //9、常量
        //在ES6之前，用全部大写字母命名的变量就是常量，建议不要修改，如果想改也可以
        //ES6新特性  const  定义常量
        const PI = '3.14';  //只读变量
        console.log(PI);
        //PI = '234';会报错  TypeError : Assignment to constant variable
    </script>
</head>
<body>

</body>
</html>