JS三部曲:
语法分析:
js代码的执行是读一行代码执行一行,但在执行之前系统会先对js进行全面扫描检查是否存在低级的语法错误,并不会立即执行语句。
预编译:
1.函数声明整体提升
例如我们写一个函数,我们先执行test();然后再写函数体查看它是否能执行:
test();
function test(){
var num=1;
console.log(num);
}
执行结果:
结果显示先执行函数后写函数体,函数也能够执行,这是因为js的预编译将函数体放在了js的最前头,也就是将函数声明整体优先提升,变成下面的代码顺序
function test(){
var num=1;
console.log(num);
}
test();
2.变量声明提升
例如我们声明一个变量,但是我们把输出这个变量的命令写在声明的前面
console.log(a);
var a=1;
这里显示的是undefined,而不是1,这是因为js预编译将变量的声明提升到了js最前面而不是将它的变量的值提升,也就是将var a提升,而a=1还是在它原来的位置,所以也就是说只是声明了a并没有赋值,从而变成下面的一段代码
var a;
console.log(a);
a=1;
3.解释执行
对代码进行解释执行。
在执行代码之前js会先进行一个预编译,
1.js会创建一个AO对象。
2.找形参和变量声明,将变量和形参名作为AO对象的属性名,并给它们付一个初始值undefine。
3.将实参值和形参统一。
4.在函数体里面找函数声明,值赋予函数体。
直接看例子
function fn(a){
console.log(a);
var a=123;
console.log(a);
function a(){};
console.log(a);
var b=function (){}
console.log(b);
function d(){};
}
fn(1);
结果输出:
我们一步步来推算
1.系统自动创建对象AO={};
2.找形参和变量声明,将变量和形参名作为AO对象的属性名,并给它们付一个初始值undefine。
形参:a
变量声明:a和b //形参里有a了但是变量声明也有a这时只写一个a就行
找到之后将这a和b当作AO对象的属性名写进去并且赋值为undefined,
AO={
a:undefined
b:undefined
}
3.将实参值和形参统一,也就是将实参的值赋给形参
AO={
a:1
b:undefined
}
4.在函数体里面找函数声明,值赋予函数体。
AO={
a:function a(){}
b:function (){}
d:function (){}
}
所以结果输出
预编译提前帮我们整理了js的执行顺序
根据函数声明整体提升,变量声明提升这两句就可以得到
function fn(a){
var a;
var b
function a(){};
function d(){};
console.log(a);
a=123;
console.log(a);
console.log(a);
b=function (){}
console.log(b);
}
fn(1);
这样看就更加显而易见。