js学习——全局污染

  • 定义变量时没有使用var声明,变量也能使用:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        dro = "我定义的dro";
        console.log(dro);
    </script>
</body>
</html>

在这里插入图片描述
但是这种方式存在着隐患:

  • 下面函数中的变量污染了全局环境:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function show(){
     
     
            dro = "find me"
        }
        show();
        console.log(dro);
    </script>
</body>
</html>

全局中并没有定义dro,但是实在控制台会输出函数中定义的dro.
在这里插入图片描述

  • 如果函数是另一个文件中的,当我们并不了解其中定义了某个变量时(例子中为dro),自己再定义同一个输出也会出现污染问题:
    1.js中的代码:
function show(){
    dro = "我是1.js中定义的dro";
}

02_demo.html中的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="1.js"></script>
    <script>
        dro = "我是02_demo中定义的dro";
        show();
        console.log(dro);
    </script> 
</body>
</html>

运行02_demo.html,依旧显示引入文件中定义的变量dro:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43812504/article/details/104937756