JS解析器
浏览器中有一套专门解析JS代码的程序,这个程序称为js的解析器。
浏览器运行整个页面文档时,遇到<script>标签时JS解析器开始解析JS代码。
JS解析器的工作步骤:
1. 预解析代码
主要找一些关键字如var、function、参数等,并存储进仓库里面(内存);
变量的初始值为 undefined;
函数的初始值就是该函数的代码块;
当变量和函数重名时:不管顺序谁前谁后,只留下函数的值;
当函数和函数重名时:会留下后面那个函数。
2. 逐行执行代码
当预解析完成之后,就开始逐行执行代码,仓库中变量的值随时都可能会发生变化
示例:
var a = 1;
function test() {
alert(a);//undefined
var a = 2;
alert(a);//2
}
test();
/* 解析器
1.预解析代码:找 var function 参数 -> 存到仓库(EC={})
global scope:
a: undefined -> 1
test: function () {
alert(a);
var a = 2;
alert(a);
}
test scope:
a: undefined -> 2
2.逐行执行代码
a = 1;
test();
alert(a);
a = 2;
alert(a);
*/
alert(typeof fn);//function
var fn = 10;
function fn() {}
alert(typeof fn);//number
/* 解析器
1.预解析代码:找 var function 参数 -> 存到仓库(EC={})
global scope:
fn: undefined -> function fn() {} -> 10
2.逐行执行代码
alert(typeof fn);
fn = 10
alert(typeof fn);
*/
从以上两个例子我们可以看出js中的变量提升机制,及js解析的过程。如果你感兴趣可以算一下以下例子的输出。
//1.
alert(a);// function a(){alert(3);}
var a=1;
alert(a);// 1
function a(){alert(2);}
alert(a);// 1
var a=3;
alert(a);// 3
function a(){alert(3);}
alert(a);// 3
//2.
var a=1;
function fn(){
alert(a);//1
a=2;
}
fn();
alert(a);//2
//3.
var a=1;
function fn(a){
alert(a);//1
a=2;
}
fn(a);
alert(a);//1
//4.
fn();//2
function fn() {console.log(1);}
fn();//2
var fn = 10;
fn();//报错
function fn() {console.log(2);}
fn();
//5.
var a = 1;
fn();
function fn(){
a = a + 1;
console.log(a);
return a;
}
fn();
console.log( fn() + 1 );
// 2 3 4 5
希望通过这么多例子能让你感受到js解析器乐趣