zoukankan      html  css  js  c++  java
  • javascript作用域温习

      <script type="text/javascript">
            var
    a = "hello";
            b = "world";
            Test();
            function Test() {
                alert(a + " " + b);
                var a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        </script>

    这段代码分别输出的结果是:undefined world,welcome china, hello china.

    我们来分别解释:

    在上文中,我们说过,在Javascript预编译时,会把所有var变量创建,默认值为undefined,我们在这里可以举一个例子:

    我们可以写这样一段代码:

        <script type="text/javascript">
            alert(a);
            alert(b);
            var a = "111";
            b = "111";
        </script>
    

    当我们执行运行这段脚本时,可以发现,首先弹出undefined,然后回提示脚本错误,提示b不存在。由此就可以表明,a在预编译的过程中就已经被创建并且初始化为undefined,而b却只能在实际运行时按顺序去解释。其实在预编译后的Javascript代码可以近乎理解如下:

        <script type="text/javascript">
            var a = undefined;
            alert(a);
            alert(b);
            a = "111";
            b = "111";
        </script>
    

    接下来我们可以谈一下函数的作用域问题,每当代码运行进入一个函数时,Javascript引擎就会自动创建一个新的作用域,然后把这个新作用域作为当前作用域的子作用域,然后把当前的代码作用域切换到这个新作用域。当代码退出函数时,这个作用域销毁,把代码作用域交还给他的父作用域。

    好,准备工作差不多了,接下来我们就来解释第一个问题:问什么会输出undefined world。

    首先代码进行在预编译,当进入 Test方法时,开启一个新作用域,然后把全局作用域作为他的父作用域。然后对Test内的方法进行预编译,和上面的代码一样,Test方法被预编译后方法体大致如下:

    function Test() {
        var a = undefined;
        alert(a + " " + b);
        var a = "welcome";
        b = "china";
        alert(a + " " + b);
    }

    当然,在当前作用域下无法找到b,于是他就会到他的父作用域下,也就是全局作用域找到了b=“world”。于是也就产生了这样的结果。

    第二次弹出welcome china,没什么好说的。

    第三次,弹出hello china。我们可以这样理解,var a 只是 方法Test的一个局部变量,而b由于事先未声明,因此他会去父作用域中去找到对应的定义。

    好,接下来,我们再看一下这个方法的若干个变体。

        <script type="text/javascript">
            var a = "hello";
            b = "world";
            Test();
            function Test() {
                alert(a + " " + b);
                a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        </script>
    

    首先,我们将方法体内的var a改成a,我们先不看答案,直接来分析,首先,在预编译阶段,方法体内几乎没有任何改变,因此此时a和b一样,都要去他们的父作用域中去寻找,因此第一次出的结果应该是hello world,第二次没什么说的:welcome china,第三次由于a和b在本作用域内都没有事先定义,因此都是再改变父作用域内的值,因此应该输出welcome china.

    我们继续:

        <script type="text/javascript">
            var a = "hello";
            b = "world";
            Test();
            function Test() {
                alert(a + " " + b);
                var a = "welcome";
                var b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        </script>
    

    和上面的分析一样,应该输出undefined undefined,welcome china,hello world.

    继续:

        <script type="text/javascript">
            a = "hello";
            b = "world";
            Test();
            function Test() {
                alert(a + " " + b);
                var a = "welcome";
                b = "china";
                alert(a + " " + b);
            }
            alert(a + " " + b);
        </script>
    
    转自:http://www.cnblogs.com/kym/archive/2010/01/06/1640043.html
  • 相关阅读:
    bootstrap-table 数据表格行内修改
    java文件上传(单文件 多文件)与删除
    bootstrap-table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)
    bootstrap-table 大量字段整体表单上传之时间处理
    Java实习问题记录
    Playbook剧本初识
    自动化运维工具-Ansible基础
    性能优化概述
    Rewrite基本概述
    Nginx常见问题
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1692532.html
Copyright © 2011-2022 走看看