初识JavaScript的解析与执行过程

转载自慕课网

JavaScript的解析与执行过程

1.全局预处理–先扫描函数声明，再扫描变量声明；

函数：用声明的方式创建的函数；

变量：用var定义的变量，初始化为undefined；

如果出现命名冲突：

函数声明：覆盖；

变量声明：忽略；

例如：

f();//fff
g();//Uncaught TypeError:g is not a function
function f(){
console.log('fff');
}
var g = function(){
console.log('ggg');
}

f()函数是声明方式创建的函数，g()是函数表达式。全局预处理时词法环境中，只能是用声明的方式创建的函数。因此，全局预处理时g()从语义上看，应该是函数，但是由于g()是函数表达式，不会在词法环境中，所以调用时会报错。

例如

console.log(a);//undefined
console.log(b);//Uncaught ReferenceError: b is not defined
var a = 1;
b = 2;

同理，词法环境中只有用var定义的变量

例如

alert(f);//function f(){alert('567');}
var f = 1;
function f(){
alert('123');
}
var f = 2;
function f(){
alert('567');
}
var f = function(){
alert('890');
}

命名冲突时，函数具有“优先权”，变量会直接被忽略，而函数会被覆盖

2.全局执行过程

例如

alert(a);//undefined
alert(b);//Uncaught ReferenceError: b is not defined
alert(f);//function f(){console.log('f');}
alert(g);//undefined
var a = 1;
b = 2;
alert(b);//2
function f(){
console.log('f');
}
var g = function(){
console.log('g');
};
alert(g);//function(){console.log('g');}

为了分析方便我们可以使用词法环境：

LexicalEnvironment {} === window;

全局预处理时：

window{
//先扫描函数声明
f:指向函数,
//再扫描变量声明
a:undefined,
g:undefined
}

全局执行时：

window{
f:指向函数,
a:1,
b:2,
g:指向函数
}

3.函数预处理阶段

每调用一次，产生一个词法环境（或执行上下文Execution Context）；

先传入函数的参数，若参数值为空，初始化undefined；

然后是函数内部声明，若发生命名冲突，会覆盖；

接着是内部var变量声明，若发生命名冲突，会忽略；

4.函数执行阶段

给预处理阶段的成员赋值；

无var声明的变量，会成为全局成员；

例如

function f(a,b){
alert(a);//1
alert(b);//function b(){}
var a = 100;
function b(){}
}
f(1,2);

VO(Variable Object)—–>变量对象

函数中的激活对象：VO(functionContext)===AO;

代码中：

AO(f){
a:1,                 //变量命名冲突，忽略
b:指向函数      //函数命名冲突，覆盖
}

例如：

function test(a,b){
alert(a);//10
alert(b);//undefined
alert(c);//undefined
alert(d);//function d(){}
alert(e);//undefined
alert(x);//Uncaught ReferenceError: x is not defined
var c = 10;
alert(c);//10
function d(){}
var e = function (){};
alert(e);//function (){}
(function x(){});
b = 20;
alert(b);//20
}
test(10);

函数预处理时：

AO(test){
//参数
a:10,
b:undefined,
//函数声明
d:指向函数，
//变量声明
c:undefined,
e:undefined
}

函数执行时：

AO(test){
a:10,
b:20,
d:指向函数,
c:10,
e:指向函数
}