关于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>

巴特西

关于JavaScript预编译和执行顺序以及函数引用类型的思考

最新文章

热门文章