在介绍js执行过程之前先了解两个概念
编译语言:一种以编译器来实现的编程语言,由编译器,先将代码编译为机器码,再加以运行(如C语言)。
直译语言:这种编程语言需要利用解释器,在运行期,动态将代码逐句直译为机器码,或是已经预先编译为机器码的的子程序,之后
再运行(如js)。
具体解释自行百度。
按照直译型语言的解释猜测一下下面的代码的输出情况1
var x = 10;
function foo(){
console.log(x); //如果代码一行一行的直译执行的话 x = 10, 而结果为undefined。
var x = 20;
}
foo()
so问题来了,结果为什么是undefined而不是10呢?欲知详情请继续阅读。
js执行分为两个过程:进入上下文与执行上下文。
1、进入上下文阶段
1 | function foo(x){ var y = 20; function z(){} } foo(10); |
当js进入上下文时(代码执行之前)会为foo函数创建一个执行上下文。执行上下文会存储foo函数的形参、函数声明、变量声明。1
{
z: <function reference>
y: undefined
x: undefined
}
注意:当函数声明与变量声明同一个属性时,函数声明的属性会替换掉变量声明的属性。
2、执行上下文阶段
1 | function foo(x){ console.log(y); var y = 20; console.log(y); function z(){} } foo(10); |
当函数执行到第一个打印语句时,还没有为变量y赋值,上下文变为1
{
z: <function reference>,
y: undefined,
x: 10
}
输出结果为undefined。
当函数执行到第二个打印语句时,上下文变为1
{
z: <function reference>,
y: 20,
x: 10
}
输出结果为 20。