JavaScript变量声明提升机制深度解析

本文通过具体实例解析JavaScript中的变量声明提升机制，旨在帮助读者深入理解其工作原理。

请观察以下代码片段的输出结果：

var num = 123;
function foo1(){
 console.log( num ); //undefined
 var num = 456;
 console.log( num ); //456
}
foo1();

JavaScript代码的执行流程主要包含两个阶段：

预解析阶段与代码执行阶段。

1. 预解析与变量声明提升

在程序执行前，JavaScript引擎会将代码读取到内存中进行检查。在此过程中，所有的声明语句会被进行标记，使解析器知晓该名称的存在，从而避免后续使用未定义名称时出错。这一过程即为“提升”。

具体包括以下声明类型：

标识符声明，即变量名的声明。

• 声明的核心作用是告知解析器该名称已存在。
• 此时，该名称并未关联任何具体的数据值。

关于函数的声明：

• 函数声明包含两个关键部分。

• 函数声明与函数表达式存在区别，函数声明通常独立书写，不嵌套在语句、逻辑判断等结构中。

  
  function f() {}
  function func() { // 函数声明
  } 
  if ( true ) {
   function func2 () {} //函数表达式
  }
  var f = function func3 () {}; //函数表达式
  this.sayHello = function () {}; //函数表达式
  var i= 1；
  function func4 () {} // 函数声明
   var j = 2;
  }

首先，函数声明告知解析器该名称存在，此阶段与变量声明类似；其次，解析器会将该名称与具体的函数体建立关联。

var num = 1;
function num () {
 alert( num );
}
num(); // 报错

代码分析如下：

1. 在预解析阶段，系统会提示相关名字。

   • 首先提升变量名num。
   • 随后提升函数名，由于该名字已存在，因此仅执行第二步，即将该名字与函数体对应起来。
   • 结论是：代码中已存在一个名为num的函数。

2. 进入代码执行阶段，从第一句赋值语句开始执行。

   • 将数值1赋给num。
   • 此赋值操作覆盖了原有的函数引用。
3. 调用num时，由于num中存储的是数值1而非函数，因此会报错。

2. 代码分析举例

程序1分析：

var num = 123;
function foo1(){
 console.log( num ); //undefined
 var num = 456;
 console.log( num ); //456
}
foo1();

1. 预解析阶段，提升变量名num和函数foo1。
2. 执行第一句话：num = 123;

3. 随后执行函数调用。

   • 函数调用进入函数体的瞬间，同样会进行预解析，此时解析的是变量名num。
   • 函数内部是一个独立的作用域，虽然允许访问外部数据，但由于内部声明了同名变量num，这会覆盖外部的num。
   • 执行第一句打印num，此时num尚未赋值，结果为undefined。
   • 执行第二句赋值：num = 456。
   • 执行第三句打印num，结果为456。

程序2分析：

if ( ！ 'a' in window ) {
 var a = 123;
}
console.log( a );

首先进行预解析，读取并提升a，此时存在一个名为a的标识符。

其次，in运算符用于判断某个字符串描述的属性名是否存在于对象中。

• 例如：var o = { name:'jim' }; 'name' in o，'age' in o。

• 执行第一个判断：! 'a' in window。

  • 'a' in window 的结果为真（true）。
  • 取反操作得到假（false）。
• 因此if内部的赋值语句不会执行。

最后，打印结果a的值为undefined。

程序3

if ( false ) {
 function f1 () {
  console.log( 'true' );
  }
} else {
 function f1 () {
  console.log( 'false' );
  }
}
f1();

预解析阶段：提升f1函数，仅保留提升后的内容，因此打印结果为false。

执行代码时，第一句话是一个空的if结构。

if ( true ) {
} else {
}

执行函数调用，最终得到false。

3. 问题探讨

function foo () } {}
var foo = function () {};

上述语法属于声明，支持提升，因此在函数定义上方即可调用。

下方的语法属于函数表达式，函数名即为foo，它会提升函数名，但不会提升函数体。

函数表达式同样支持命名语法。

var foo = function func1 () {};
func();

函数具有一个name属性，表示函数名。只有带有名字的函数定义才拥有name属性值，否则该属性为空字符串。

• 然而，函数表达式的名字仅在函数内部可用，在IE8浏览器中甚至可以外部访问。
• 使用括号（）可以将数据转化为表达式。

在现代浏览器中，写在if、while、do..while结构中的函数声明，会被转换为特殊的函数表达式。

if (...) {
 function foo () { ... }
}

即将代码转换后的形式如下：

if (...) {
 var foo = function foo () { .... }
}

至此分析完毕。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。