昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的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>