JavaScript 作用域的误区

了解JavaScript的同学可能知道，JavaScript语言由于设计原因，导致语言本身存在很多先天性的不足，当然这并非设计者有意的，js语言最初是被设计来作为网页交互的脚本语言，依照现有的js语法来看，其最初的需求已经完全能够满足。互联网的发展极大的提高了对web端的要求，不仅仅要求简单的页面交互，已经趋于app的概念，这才暴漏出JavaScript语言设计上的种种问题。对于开发者来说，理清“坑点”并在实际开发中正确的规避才是重点。

1、任何js代码都有自己的作用域

　　ES6之前，使用var声明变量的时候，很容易被忽略的一点是，var声明的变量的作用域；

　　1）在函数中var声明的变量，其作用域是在函数体内部，即函数外部是访问不到的：

<script>
        function foo() {
            var myname = "foo_name";
            console.log(myname);//foo_name
        }
        foo();
        console.log(myname);//error
</script>

　　这是很容易理解的，因为JavaScript本身有函数作用域。

　　2）不在函数中var声明的变量：

<script>
        var myname_1 = "myname_1";
        {
            var myname_2 = "myname_2";
        }
        console.log(myname_1);//myname_1
        console.log(myname_2);//myname_2，不会error
</script>

　　这也很容易理解，因为JavaScript中没有块级作用域，在{}中声明的变量和不使用{}没有区别。

　　3）这里很容易很忽略的一点是，以上js代码都有作用域，就是全局作用域window，所有声明的变量都有自己的作用域，只不过常见的是作用域是全局作用域即window，很容易被忽略掉，导致没有作用域的认知。有时候这点误区会导致验证的错误。

　　新建html页面html1.html，首先看看如何验证以上的说法，

<script>
        function showName () {
            console.log("这里是showName");
        }
        window.showName();//这里可以验证shownName的作用域在window
</script>

　　以上代码很容易验证了showName函数的作用域是window。

　　新建页面html2.html，并写入一下js：

<script>
        function showNameToo () {
            console.log("这里是showNameToo");
        }
        window.showNameToo();
</script>

　　现在在html1页面中使用iframe引用html2页面，在html1中添加js代码：

<script>
        function showName () {
            console.log("这里是showName");
        }
        window.showName();
        var iframe = document.querySelector("#iframe");
        iframe.src = "html2.html";
        window.iframe.contentWindow.showNameToo();
</script>

　　在html2.html中添加如下代码：

<script>
        function showNameToo () {
            console.log("这里是showNameToo");
        }
        window.showNameToo();
        window.parent.showName();
</script>

　　在页面上打html1（通过服务器打开，不能直接打开文件），可以看到有趣的现象。

　　总结：之所以讲这个例子，是因为不少新加入前端的同学都会有一个误区，就是js中只有函数作用域（忽略全局作用域，因为使用的很少）。其实这个观点很重要，在多模块开发中，一个模块就相当于一个页面的windiw作用域。

JavaScript 作用域的误区

推荐阅读