先来一个例子来洗洗脑:
var a=1;
function foo(){
if(!a){
var a=10;
}
alert(a);
}
foo();
想来大家应该知道答案:输出‘10’,那为什么会这样呢,稍微学习过js的应该知道其原理。
js的变量声明的机制跟java,c++,c等程序语言有些差别(这几个语言含有块级作用域(block-level scope))。
在js编译机制执行下的代码执行顺序:
//函数声明
function foo(){
var a;
if(!a){
a=10;
}
alert(a);
}
var a;//变量声明
a=1;
foo();
在解释这个编译过程中,涉及了函数的声明优先级高于变量的声明,js的函数作用域。
1.函数的声明优先级高于变量的声明:
例子:
foo();
var foo;
function foo(){
console.log(1);
}
foo = function(){
console.log(2);
}
输出的结果:1;
原因就在于函数的声明优先级高于变量的声明。
在js编译机制执行下的代码执行顺序:
function foo(){
console.log(1);
}
foo();
var foo;
foo = function(){
console.log(2);
}
2.js的函数作用域:
例子:
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
console.log(x)//2
}());
}
console.log(x);// x is still 1.
}
倘若没有添加一个立即执行函数,就不会构造一个类似的函数作用域。那么在if块外面中就不会打印输出依旧是1;
最后小结:只有声明本身会被提升,而其他的操作在原来的位置按照代码的顺序执行。变量和函数声明都会提升,在变量重复声明时,在后面的声明会覆盖前面的声明。(特别注意的是:函数变量的声明会在普通变量声明的前面声明)