遇到了JS的变量声明提升,英文名为Hosting,具体来讲是指JS在对当前作用域中的声明代码,会将其提升至当前作用域的最顶端。本文通过几个示例来详细理解一下:
示例一
- 正常预期的输出
var myvar = 'my value';
(function() {
alert(myvar);
})();
这种情况下,在浏览器中执行,会看到 my value
的提示框。
- 异常不符合预期的输出
var myvar = 'my value';
(function() {
alert(myvar);
var myvar = 'local value';
})();
这时,我们确得到的输出资料是 undefined
。并不是全局的 myvar,这就是因为在function的作用域内,将变量myvar
的声明提升至 alert
的上方,等同于下面的代码:
var myvar = 'my value';
(function() {
var myvar;
alert(myvar);
myvar = 'local value';
})();
示例二
(function (){
newFuntion();
var newFuntion = function(){
alert("hello word");
}
})();
这段代码将不会有任何输出,但会得到一个错误信息,Uncaught TypeError: newFuntion is not a function
。可以看出,其也会对函数的变量声明也会进行提升,等同于这段代码:
(function (){
var newFuntion;
newFuntion();
newFuntion = function(){
alert("hello word");
}
})();
但是,这样调用就不会出错:
(function (){
newFuntion();
function newFuntion(){
alert("hello word");
}
})();
这是函数声明的写法,会优先在当前作用域进行函数的注册,所以调用的时候,函数已经存在,没有问题。
示例三
var a = 1;
function b() {
a = 10;
return;
function a() {}
}
b();
alert(a);
这个示例的输出,给我们的结果是个"1"的弹出框,很困惑了有木有?对代码改动一下,
var a = 1;
function b() {
alert(a);
a = 10;
return;
function a() {}
}
b();
得到的a 是function a(){}
。得到的结果是其对函数的声明。需要注意的是,这里在function b下面的a因为函数声明的问题,已经变为了一个局部变量,所以不会影响全局变量a,所以之前代码的结果输出为1,也就很容易理解了。
总结
变量声明的时候,变量赋值并没有被提升,只是声明被提升了。但是,同时要注意函数声明与函数表达式的区别: 函数声明会在当前作用域优先进行注册,会产生覆盖的效果,而函数表达式则是按代码顺序进行执行 。所以下面这段也就容易理解了:
function test() {
foo(); // TypeError "foo is not a function"
bar(); // "this will run!"
var foo = function () { // 变量指向函数表达式
alert("this won't run!");
}
function bar() { // 函数声明 函数名为bar
alert("this will run!");
}
}
test();