javascript变量声明提升

遇到了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();

参考资料

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • java script的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明...
    MC_DEV_JIN阅读 406评论 0 0
  • 摘取:http://www.jb51.net/article/30719.htm 变量提升 变量提升就是把变量提升...
    洁芬阅读 158评论 0 0
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,081评论 0 3
  • 前言 人生苦多,快来 Kotlin ,快速学习Kotlin! 什么是Kotlin? Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,282评论 9 118
  • 到卓尔山之前一直不知道这个地方。卓尔山位于青海省祁连县八宝镇,紧靠八宝河与藏区神山阿咪东索(牛心山)隔河相望。9月...
    牧风汉子阅读 318评论 0 1