什么是Javascript Hoisting?

WEB前端 Alice 7年前 (2017-08-18) 1132次浏览 0个评论

  Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑。个人觉得,要想深入理解 Javascript 语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通过自己的理解来对 Javascript Hoisting(国内一般翻译为 变量提升)做一个阐述:

  在解释 Javascript Hoisting 之前,先看一下几段代码:

JavaScript

//代码段 1--------------------------
    var myvar = '变量值'; 
    console.log(myvar); // 变量值
    //代码段 2--------------------------
    var myvar = '变量值';  
    (function() { 
      console.log(myvar); //变量值
    })();
    //代码段 3----------------------------
    var myvar = '变量值'; 
    (function() { 
      console.log(myvar); // undefined 
      var myvar = '内部变量值'; 
    })();

  代码段 1 会在控制台打印出 变量值 ,很容易理解;代码段 2 也会在控制台打印出变量值 ,Javascript 编译器首先在匿名函数内部作用域(Scope)查看变量 myvar 是否声明,发现没有,就继续向上一级的作用域(Scope)查看是否声明 myvar,发现存在,即打印出该作用域的 myvar 值。但代码段 3 只是对代码段 2 做一个微调,结果却输出了 undefined!!!

  在理解代码段 3 之前,必须先理解 Javascript Hoisting 的概念。Javascript Hoisting:In javascript, every variable declaration is hoisted to the top of its declaration context。我的理解就是在 Javascript 语言中,变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声明,都会被提升到作用域的顶部,但是变量初始化的顺序不变。

  下图的左边和右边的代码输出结构是一样的,左边的代码段在 JS 执行时,实际的执行顺序如右边的代码所示(JS 编译器会将变量声明进行提升处理)。

什么是 Javascript Hoisting?

  理解了提升的概念之后,再回到开头的代码段 3 的理解中来,代码段 3 和在被 Hositing 之后的代码如下图所示:

什么是 Javascript Hoisting?

  二者输出的结构都为 undefined!可理解为内部变量 myvar 在匿名函数的内最后一行进行变量声明并赋值,但是 JS 解释器会将变量声明(不包含赋值)提升(Hositing)到匿名函数的第一行(顶部),由于只是声明 myvar 变量,在执行 console.log(myvar)语句时,并未对 myvar 进行赋值,所以 JS 输出 undefined。

  如果变量声明未提升(Hositing)置顶,则应该会报错误。如下图所示:

什么是 Javascript Hoisting?


女程序员博客 , 版权所有丨本站采用BY-NC-SA协议进行授权 , 转载请注明什么是 Javascript Hoisting?

【声明】:本博客仅为分享信息,不参与任何交易,也非中介,所有内容仅代表个人观点,均不作直接、间接、法定、约定的保证,读者购买风险自担。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

【关于安全】:任何 IDC 都有倒闭和跑路的可能,备份永远是最佳选择,服务器也是机器,不勤备份是对自己极不负责的表现,请保持良好的备份习惯。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址