一种导致js全局变量访问不到的情况

大家都知道,js全局变量是每个js函数都能访问和改变其值的,它的作用范围也是整个js文件。但是最近我却碰到一种情况导致全局变量在某个“角落”访问不到,很郁闷。但是却是一个值得注意的小细节,记录下吧。

<html>
    <head>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        var dimen = 'day';//全局变量
        $(function(){
            //console.log("dimen:" + dimen);
            
            $("#btn").click(function() {
                alert(dimen);
            });
            
            if(false) {
                var dimen = 'good';
            }
        });

        function change() {
            dimen = $("#time").val();//改变全局变量
            //some code....
        }
    </script>
        
    </head>
    
    <body>
        <input type="button" value="测试" id="btn" />
        <select id="time" onchange="change()">
            <option value="year">年</option>
            <option value="year">月</option>
            <option value="year">日</option>
        </select>
    </body>
</html>

 这个页面上点击“测试”按钮你会发现直接弹出undefined,奇怪的是dimen不是全局变量吗怎么会访问不到呢?

 

仔细检查你的$(function(){})函数里面的这段代码:

 if(false) {
       var dimen = 'good';
}

 你会发现你又重新定义了一个局部变量dimen,和全局变量重名了,这导致dimen瞬间变成局部变量而外部访问不到了。经测试,只有你在$(funciton(){})里这样定义一个跟全局变量重名的局部变量,才会出现这种情况!!

虽然是个小问题但也是我工作中遇到的,顺便提下还是需要多多注意这种比较隐晦的情况。。

你可能感兴趣的:(undefined,全局变量,重名,JS局部变量)