zoukankan      html  css  js  c++  java
  • 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了。问题抽象出来是这样的:

    <script >
    var A=fun;
    function fun(){
        alert(1);
    }
    </script>
    <script>
    function fun(){
        alert(2);
    }
    A();
    </script>

    我希望输出2,但是运行结果是1。如果两个代码块合并为一个,那输出结果就是2。

    解释这个问题,涉及到两方面的内容:[JavaScript预编译和执行顺序]、[基本类型和引用类型]。

    JavaScript预编译和执行顺序

      1.JavaScript的解析过程分为预编译和执行两个阶段,顺序都是从上到下。
      2.解析过程分块解析。如果页面有A、B两个<script>代码块,那么浏览器解释器的执行过程是:预编译A执行A → 预编译B执行B
      3.在预编译期会声明变量(仅声明未赋值)并定义函数。在执行阶段给变量赋值。
      4.变量没声明就引用,会报错。声明变量需使用var。
      参考http://blog.csdn.net/cxiaokai/article/details/7552653

    根据以上三点,可以解释开头代码中"var A=fun;"为什么没有报错。因为预编译阶段声明了变量A并定义了函数fun,执行阶段变量fun赋值为函数A,所以不会报错。

    但是,这样并不能解释为什么第二个代码块中的fun()没有把上一个代码块中的fun()覆盖掉。而如果代码最后运行fun()的话,输出的就是2。如此看来,代码运行到最后面的时候,A和fun已经不相等了。下面转换一下开头的例子:

    <script >
    var A=funA;
    function funA(){}
    </script>
    <script>
    function funA(){}
    document.write(A===funA);
    </script>
    
    <script >
    var B=funB;
    function funB(){}
    function funB(){}
    document.write(B===funB);
    </script>

    果然,上面代码块输出false,下面代码块输出true。这样看来应该是和变量A保存的是值还是地址有关系了。

    基本类型和引用类型

      1.JavaScript的变量值可以是两种情况:基本类型值和引用类型值。
        基本数据类型:Undefined、Null、Boolean、Number、String;引用数据类型:Object。
      2.检测是否为引用数据类型可以使用 xx instanceof Object,如果是会返回true。

    先使用xx instanceof Object对上面代码段A、funA进行引用类型检测,结果都为true。说明A和funA都是引用类型。再结合上面javascript预编译和执行顺序的研究,对上面示例代码可以这么解释了:

    <script >
    var A=funA;
    function funA(){}
    //函数为引用类型,即函数名表示一个指针
    //预编译期声明A并定义funA,funA指向一个内存空间。执行期,通过对A赋值,A也指向了这个内存空间。
    </script>
    <script>
    function funA(){}
    document.write(A===funA);
    //这里重新定义了funA,funA指向了新的内存空间,而A指向未变。所以A!==funA。
    </script>
    
    <script >
    var B=funB;
    function funB(){}
    function funB(){}
    document.write(B===funB);
    //预编译期声明B并定义funB,funB指向一个内存空间,接着重新定义了funB,funB指向新的内存空间。执行期,通过对B赋值,B也指向了这个新的内存空间。所以B===funB。
    </script>

     后记

    朋友如果耐心看完了以上的内容,不妨猜一下下面这段代码的运行结果:

    <script >
    function a(){
        alert(b);
        alert(c);
    }
    a();
    var b=1;
    c=2;
    </script>
    转载请注明出处:http://www.cnblogs.com/youryida  欢迎留言或qq交流(1140215489)
  • 相关阅读:
    代码重构~提取方法
    代码重构~提取到类
    不说技术~有时,开发者还是应该讲究一点!
    代码重构~封装成员变量
    将不确定变为确定~LINQ查询包含对不同数据上下文上所定义项的引用
    真实的用户,真实的中国互联网
    John Resig: JavaScript's Chuck Norris
    chrome插件IE tab使用技巧
    人生的疆域与生存的幻象—阅读丰富人生
    WPF 创建多行TextBox
  • 原文地址:https://www.cnblogs.com/youryida/p/3564644.html
Copyright © 2011-2022 走看看