1

ES5和ES6中的变量声明提升

Example1:

a=2;
var a;
console.log( a );   //结果为2

Example2:

console.log( a );   //结果是undefined
var a=2;

Example2:

foo();  //结果是1
var foo;
foo = function() { 
    console.log( 2 );
};
function foo() { 
    console.log( 1 );
}

原理解读:浏览器引擎在运行程序分为两个阶段:第一个的阶段是编译阶段,该阶段负责找出代码中所有的定义声明(包括变量和函数),并关联到合适的作用域中;第二阶段是执行阶段,该阶段负责找出代码中的所有赋值声明,并在作用域找找到第一阶段的定义声明,以供使用。
代码解读
第一个例子在编译阶段会将var a;这句定义声明首先解读关联到全局作用域中,所以当在赋值声明阶段执行a=2;console.log(a);这两个赋值声明的代码时是正常执行的,也就有了定义声明提前了的感觉。

第二个例子也同样是第一阶段先解读了var a,这部分定义声明,接着在第二阶段的时候执行console.log(a);的时候报undefined,说明虽然定义声明虽然提前了,可是赋值声明a=2;这部分仍然未提前。

第三个例子在编译阶段会将 var foo;变量定义声明和 function foo(){...}函数定义声明提前,然后在第二阶段执行foo();赋值声明,这里需要注意的是在这种变量和函数重复声明的情况,函数定义申明会被提更前,原因倒不是真的是提前了,而只是在赋值声明的时候首先会去方法域中寻找,而后才去变量域中寻找,所以导致看起来是函数申明比变量声明更提前了。

结论:对于JS中所说的变量声明提前,更准确的说法是变量定义声明提前了,更准确的理解是定义声明处于程序运行的第一个阶段导致相较于赋值声明的第二阶段有了前提的效果。


夜里的太阳
469 声望16 粉丝

炫耀从来不是我的动机,好奇才是