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

一种导致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(){})里这样定义一个跟全局变量重名的局部变量，才会出现这种情况！！

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

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

相关推荐