JavaScript 作用域的误区

Blandy 2019-04-15 01:46184 阅读

了解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作用域。

 

回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!