javascript中必须使用var声明局部变量的情况

最新推荐文章于 2022-09-21 21:59:48 发布

asdfsadfsad097097

最新推荐文章于 2022-09-21 21:59:48 发布

阅读量889

点赞数

分类专栏：经验积累文章标签： javascript 作用域变量 var

本文链接：https://blog.csdn.net/maxint64/article/details/8881769

版权

经验积累专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先从evernote上摘一段js作用域链的内容。

var rain = 1; 
function rainman(){ 
    var man = 2; 
    function inner(){ 
        var innerVar = 4; 
        alert(rain); 
    } 
    inner(); //调用inner函数 
} 
rainman(); //调用rainman函数

观察alert(rain);这句代码。JavaScript首先在inner函数中查找是否定义了变量rain，如果定义了则使用inner函数中的 rain变量；如果inner函数中没有定义rain变量，JavaScript则会继续在rainman函数中查找是否定义了rain变量，在这段代码中rainman函数体内没有定义rain变量，则JavaScript引擎会继续向上（全局对象）查找是否定义了rain；在全局对象中我们定义了 rain = 1，因此最终结果会弹出'1'。

作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推。

背景补充完毕。

我js用的少，也没怎么系统的学过，在手册上看了些基本语法还有常用函数，平时都够用了，但总有吃瘪的时候。在开源中国看到了一个叫“循环体内，绑定事件函数，怎么取i对应的值？”的帖子，我以前也遇到过类似的问题，要在循环里绑定一些列回调函数，回调函数的参数是循环中会改变值的变量，结果发现所有回调函数的参数都是那个变量的最后一个值。

下面是帖子里这段代码

<html>
    <head>
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
        <script>
            var json={
                "l1":{"color":"red"},
                "l2":{"color":"blue"}
            }
            $(function(){
                for(i=1;i<=2;i++){
                    (function(i){
                        o=eval("json.l"+i);
                        $("a").eq(i-1).mouseover(function(){
                            $(this).css('color',o.color)
                        })
                    })(i)
                }
            })
        </script>
    </head>
    <body>
        <a href="">111</a>
        <a href="">222</a>
    </body>
</html>

执行结果是111在鼠标移上去的时候也会变成蓝色，而不是红色。

原帖里4楼说到了重点

o = eval("json.l" + j); 
没有用VAR 来声明，这个变量就属于window的属性，而o是在mouseover事件里才读取，这时候2个锚点读取的是同一个对象o的color属性，所以都是蓝色。
这里只需要加上 var o = eval("json.l" + j)就可以了。

嗯，这就是所谓“javascript中必须使用var声明局部变量的情况”。

另外，这种写法也是可以的

var json={
     "l1":{"color":"red"},
     "l2":{"color":"blue"}
 }
$(function() {
    for (i = 1; i <= 2; i++) {
        o = eval("json.l" + i);
        $("a").eq(i - 1).mouseover(function(o) {
            return function() {
                $(this).css('color', o.color)
            }
        } (o))
    }
})

原理是一样的。这种写法使得匿名函数内的o不是函数外的变量o，而是匿名函数自己的一个参数，函数的参数是作用域为函数内部的局部变量。

asdfsadfsad097097

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中必须使用var声明局部变量的情况

先从evernote上摘一段js作用域链的内容。var rain = 1; function rainman(){ var man = 2; function inner(){ var innerVar = 4; alert(rain); } inner(); //调用inner函数 } rainman(); /
复制链接

扫一扫