浏览器:“JS解析器”的两大步
1)预解析,“找一些东西”放入“仓库”
①var ②function ③参数
var a = 1;
预解析后仓库的情况:a=undefined
function fn1(){ alert(2); }
预解析后仓库的情况:fn1=function fn1(){ alert(2); }
所有的变量,在预解析时,都将变量名赋值为undefined
所有的函数,在预解析时,都将函数名赋值为整个函数块
若遇到重名的变量名或函数名,只留一个,规则如下:
a.变量名和函数名重名,只留下函数;
b.同类型重名,遵循上下文覆盖原则。
2)逐行解读代码
表达式:= + - * / % ++ – ! 参数……
★若遇到表达式,则可以修改预解析的值
★若遇到函数块,则不做任何处理
★若遇到函数调用,则对该函数再次发生预解析(子级)
实例:
alert(a); // function a (){ alert(4); }
var a = 1;
alert(a); // 1
function a (){ alert(2); }
alert(a); // 1
var a = 3;
alert(a); // 3
function a (){ alert(4); }
alert(a); // 3
分析:
第一步预解析时,浏览器找到了以上红色字体部分
遇到第一句“var a = 1;” 仓库:a = undefined
遇到第二句“function a (){ alert(2); }” 仓库:a = function a (){ alert(2); }(只留函数)
遇到第三句“var a = 3;” 仓库:a = function a (){ alert(2); }(只留函数)
遇到第四句”function a (){ alert(4); }“ 仓库:a = function a (){ alert(4); }(上下文覆盖)
第二步开始逐行解读代码
alert(a); // 此时根据仓库里a的内容,输出了 function a (){ alert(4); }
var a = 1; // 遇到表达式,覆盖预解析的值,此时仓库内a=1
alert(a); // 显然应该输出1
function a (){ alert(2); } // 不是表达式,不能修改预解析的值,仓库内仍为a=1
alert(a); // 所以仍输出1
var a = 3; // 遇到表达式,覆盖预解析的值,此时仓库内a=3
alert(a); // 显然输出3
function a (){ alert(4); } // 不是表达式,不能修改预解析的值,仓库内仍为a=3
alert(a); // 所以仍输出3