JavaScript易錯陷阱：區域變數污染全域變數-有解無憂

全域變數和區域變數各司其職，但使用不當會有嚴重的副作用，而且有時候還不知道是怎么回事，

先看一個栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var i = null;
            function test1() {
                i = 1;
            };
            function test2() {
                console.log(i);
            }
            test1();
            test2();
        }
    </script>
</head>
<body></body>
</html>

很多同學會這樣分析：因為i=1是test1函式里面的區域變數，因此呼叫test2函式log出的是null，

然而，控制臺顯示的是：

在這里插入圖片描述
這是為什么呢？

實際上，每次定義變數時，都必須寫var關鍵字，否則變數就會定義在全域，這叫污染全域變數，

真正的寫法是這樣的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var i = null;
            function test1() {
                var i = 1;
            };
            function test2() {
                console.log(i);
            }
            test1();
            test2();
        }
    </script>
</head>
<body></body>
</html>

顯示效果：
在這里插入圖片描述

這就是不難解釋，為什么這兒opener明明是匿名函式運算式的變數，為什么還會影響其他變數呢？實際上，opener是通過污染全域變數實作的關閉效果（看例子）

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var btnOpen = document.getElementById("btn_open");
            var btnClose = document.getElementById("btn_close");
            var opener = null;
            btnOpen.onclick = function ()
            {
                opener = window.open("https://www.baidu.com");
            };
            btnClose.onclick = function () {
                opener.close();
            }
        }
    </script>
</head>
<body>
    <input id="btn_open" type="button" value="打開新視窗" />
    <input id="btn_close" type="button" value="關閉新視窗" />
</body>
</html>

顯示效果：
請添加圖片描述

參考素材來源于：拉勾教育大前端訓練營，希望整理的知識筆記對大家JavaScript進階有所幫助，也誠懇希望大家批評指正，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294236.html

標籤：其他

上一篇：【深扒】深入理解 JavaScript 中的異步編程

下一篇：JavaScript-陣列