zl程序教程

您现在的位置是:首页 >  Javascript

当前栏目

帮你精通JS:变量的声明,举起与初始化的问题

2023-03-09 22:11:26 时间

一、首先 JS 的举起 Hoisting

观察一下变量自举的代码:

  1. today = "Friday"
  2. console.log(today); 
  3. // Friday 
  4.  
  5. var today = "Monday!"

虽然declare的步骤在最后,但是today已经顺利打印出来,这是因为declare被hoist到顶部。

  1. var today;           // hoisted declaration 
  2. today = "Friday";    // the original line 1 
  3. console.log(today);  // Hello! 
  4. today = "Monday";    // `var` is gone! 

JSEngine事先将var举到顶部执行,并初始化值undefined.

接着查看function自举:

  1. today(); 
  2. // Friday! 
  3.  
  4. function today() { 
  5.     console.log("Friday"); 

同样的原理在complie的步骤中,事先将所有的function都解析成AST,因此也就都hoist到了顶部。

继续考察function与variable二者的组合。

  1. today = "Friday"
  2. printToday(); 
  3. // Today is Friday. 
  4.  
  5. function printToday() { 
  6.     console.log(`Today is ${ today }!`); 
  7. var today; 

实际的执行是先将function举起,再将var举起。

  1. function printToday() { 
  2.     console.log(`Today is ${ today }!`); 
  3. var today; 
  4. today = "Friday"
  5. printToday(); 
  6. // Today is Friday. 

二、重复declare的问题

考察下面的代码:

  1. let keepMoving = true
  2. while (keepMoving) { 
  3.     let value = Math.random(); 
  4.     if (value > 0.5) { 
  5.         keepMoving = false
  6.     } 

乍一看,似乎每次循环都会执行`let value = Math.random();`,但实际上只执行一次,执行一次后,declare 的部分将会从代码中移除。

三、变量初始化的问题TDZ问题

除了var之外,let也将举起,只是不会被初始化:

  1. var studentName = "Timy"
  2.  
  3.     console.log(studentName); 
  4.     // ??? 
  5.  
  6.     let studentName = "Smith"
  7.  
  8.     console.log(studentName); 
  9.     // Smith 

第一个console不会输出 "Timy"而是会报错,说明let也被举起,只是没有被初始化。

解决此问题的方法就是将所有的let,const等全部都写到顶部。