JavaScript作用域专题

学习过程中随手的一百度发现案坑其实也不少，而且好多在面试里也会用得到……好吧再加一个专题总结一下，就当是为以后的学习打基础了

首先咱们还是说一下作用域吧

作用域链图中很明确的表示出：在变量解析过程中++首先查找局部的作用域++，++然后查找上层作用域++。

不好懂？没关系我们从两段代码开始

var i=10;   
function a() {   
    alert(i);   
};   
a();

var i=10;   
function a() {   
    alert(i);   
    var i = 2;   
};   
a();

看似轻巧实则大有乾坤。前者答案是10，而后者则是undefined。

在代码一的函数当中没有定义变量i，于是查找上层作用域（全局作用域），进而进行输出其值。但是在代码二的函数内定义了变量i（无论是在alter之后还是之前定义变量，都认为在此作用域拥有变量i，这点我们在函数专题的变量提升部分提到过），于是不再向上层的作用域进行查找，直接输出i。但是不幸的是此时的局部变量i并没有赋值，所以输出的是undefined。所以这里要注意：==js引擎虽然可以自动提升变量的声明，却不会提升变量的赋值==

而第三、四、五段代码则是摘抄自前辈的面试经验了
- 3

<script type="text/javascript">  
    var a,b;  
    (function(){  
        alert(a);  
        alert(b);  
        var a = b = 3;  
        alert(a);  
        alert(b);  
    })();  
        alert(a);  
            alert(b);  
    </script>  //结果输出 undefined undefined 3 3 undefined 3

此代码等价于

<script type="text/javascript">  
    var a,b;  
    (function(){  
        alert(a);  
        alert(b);  
        var a = 3;  
        b = 3;  
        alert(a);  
        alert(b);  
    })();  
        alert(a);  
        alert(b);  
    </script>

++==Js中没有用var声明的变量都是全局变量，而且是顶层对象的属性==++
- 4

<script type="text/javascript">  
        name="Hello";    
        function t(){    
            var name="world";    
            function s(){    
                var name="welcome";    
                console.log(name);    
            }    
            function ss(){    
                console.log(name);    
            }    
            s();    
            ss();    
        }    
        t();   
    </script>

函数输出welcome world
当执行s时，将创建函数s的执行环境(调用对象),并将该对象置于链表开头，然后将函数t的调用对象链接在之后，最后是全局对象。然后从链表开头寻找变量name,很明显
name是”welcome”。
但执行ss()时，作用域链是： ss()->t()->window,所以name是”world”
- 5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  >  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>  
    <title>ajax</title>  
    <style type="text/css">  
    </style>  
    <script type="text/javascript">  
       function buttonInit(){    
            for(var i=1;i<4;i++){    
                var b=document.getElementById("button"+i);    
                b.addEventListener("click",function(){ alert("Button"+i);},false);    
            }    
        }    
        window.onload=buttonInit;    
    </script>  
</head>  
<body>  
<button id="button1">Button1</button>    
<button id="button2">Button2</button>    
<button id="button3">Button3</button>   
</body>   
</html>

当文档加载完毕，给几个按钮注册点击事件，当我们点击按钮时，会弹出什么提示框呢？

很容易犯错，对是的，三个按钮都是弹出：”Button4”,你答对了吗？

当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert(“Button”+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，
所以弹出”button4“

最后，标明代码出处：http://blog.csdn.net/bbs375/article/details/52483862
感谢前辈的分享

JavaScript作用域专题

猜你喜欢