JavaScript变量提升与函数作用域机制详解

JavaScript变量提升与函数作用域机制详解

本文通过具体代码示例，展示相关现象。

建议使用Chrome浏览器，按F12或右键选择“审查元素”打开开发者工具，并在Console控制台输入代码。提示：在控制台输入代码时，按住Shift+Enter可实现代码换行。

var name = "xiaoming";
(function(){
 var name = name || "小张";
 console.info(name);
})();// 输出：小张
(function(){
 name = name || "小张";
 console.info(name);
})(); // 输出：xiaoming
(function(){
 var name2= name;
 var name = name || "小张";
 console.info(name, name2);
})(); // 输出：小张 undefined

执行结果的截图如下所示：

具体解释如下：

在JavaScript中。

function xxx(){
// 一堆代码...
  // ...
var name2 = name;
var name = name || "小张";
// 一堆代码
}

实际执行时会转换为以下等价形式：

function xxx(){
var name2 = undefined;
var name = undefined;
// 其他 var 也会被提前到最起始处
// 一堆代码...
  // ...
name2 = name;
name = name || "小张";
// 一堆代码
}