JavaScript 变量作用域与变量提升详解

理解变量作用域

变量作用域定义了变量的可见范围与生命周期，即代码在何处可以访问或修改该变量。在 JavaScript 中，作用域主要分为局部作用域与全局作用域。

第 1 步：掌握函数级局部作用域

与传统面向对象语言（如 C++、Java）不同，早期的 JavaScript 缺乏块级作用域（Block Scope），主要依靠函数级别的作用域。这意味着：

• 在函数内部使用 var 声明的变量属于局部变量，仅在该函数及其嵌套的内部函数（闭包情况除外）中可访问。
• 离开函数作用域后，局部变量将被垃圾回收机制销毁。

var name = "Richard";

function showName() {
    // 这里的 name 是局部变量，优先于外部的全局变量
    var name = "Jack";
    console.log(name); // 输出: Jack
}

showName();
console.log(name); // 输出: Richard，全局变量未受影响

第 2 步：规避无关键字声明带来的全局污染

若在赋值时未使用 var 关键字，JavaScript 会默认将变量挂载到全局对象上（浏览器中为 window 对象）。这是一种极易引入 Bug 的行为。

var name = "Michael Jackson";

function showCelebrityName() {
    console.log(name); // Michael Jackson
}

function showOrdinaryPersonName() {
    // 错误示范：未加 var，导致 global scope 被意外修改
    name = "Johnny Evers";
    console.log(name); // Johnny Evers
}

showCelebrityName(); 
showOrdinaryPersonName(); 
showCelebrityName(); // 输出 Johnny Evers，因为全局变量已被篡改

// 正确做法：始终显式声明局部变量
function safeShowName() {
    var name = "Safe Name"; 
    console.log(name);
}

若在全局与局部作用域中存在同名变量，根据查找规则（Scope Chain），局部作用域中的声明优先级高于全局作用域。

第 3 步：认识全局作用域

所有在函数外部声明且使用 var 定义的变量均处于全局作用域。它们作为属性存在于浏览器的 window 对象上：

var myName = "zhou";
var sex = "male";

console.log(window.myName); // "zhou"
console.log('sex' in window); // true

此外，setTimeout 回调函数在全局上下文中执行，其内部的 this 指向全局 window 对象。在处理对象方法内的定时器时需注意这一点：

var obj = { Value1: 10, Value2: 1,
	calculatedIt: function() {
		setTimeout(function() {
			// this 指向 window，而非 obj
			console.log(this.Value1 * this.Value2); 
		}, 1000);
	}
};
obj.calculatedIt(); // 结果为 4000 (window 上的值)

为避免全局命名空间污染，开发中应尽可能减少全局变量的使用，推荐使用立即执行函数（IIFE）或模块化工具来隔离作用域。

变量提升（Variable Hoisting）

变量提升是指在 JavaScript 编译阶段，引擎会将所有变量声明移动到当前作用域的顶部。这一特性解释了为何在某些情况下可以先调用变量后声明变量。

第 1 步：观察提升的执行顺序

虽然声明被提升，但赋值操作保留在原处。因此，在赋值前访问变量会得到 undefined。

function showName() {
    console.log("First Name: " + name); // First Name: undefined
    var name = "Ford";
    console.log("Last Name: " + name); // Last Name: Ford
}

// 引擎实际处理的等效代码结构如下：
function showName_Hoisted() {
    var name; // 声明提升至作用域顶端，初始值为 undefined
    console.log("First Name: " + name);
    name = "Ford"; // 赋值停留在原地
    console.log("Last Name: " + name);
}

第 2 步：函数声明优先级的特殊情况

当同一个作用域内存在同名的“函数声明”和“变量声明”时，两者都会被提升到作用域顶部，但**函数声明的优先级更高**，会覆盖变量声明。

var myName;     // 变量声明
function myName() { console.log("Rich"); } // 函数声明

// 函数声明覆盖了变量声明
console.log(typeof myName); // "function"

// 注意：如果是变量赋值（初始化），则不再仅仅是提升阶段
var myNameAssign = "Richard"; // 变量赋值
function myNameFunc() { console.log("Rich"); }
console.log(typeof myNameAssign); // "string"（赋值操作发生在运行时，覆盖了函数的引用）

第 3 步：严格模式的约束

在 ES6 的严格模式（'use strict';）下，引擎对未声明变量的容忍度降低。若尝试在未先声明的情况下给变量赋值，将直接抛出 ReferenceError。这有助于强制开发者养成良好的编程习惯。

以上就是 JavaScript 变量作用域与变量提升的详细内容，更多关于 JavaScript 基础进阶的资料请关注本站其它相关文章！