JavaScript 局部变量与全局变量的区别详解

变量声明的核心规则

JavaScript 中的变量主要分为两类：局部变量和全局变量。两者的根本区别在于作用范围：

• 局部变量：只能在声明它的函数内部访问。离开该函数后，外部无法调用。
• 全局变量：在整个代码脚本中均可访问。

区分这两者的关键在于是否使用了 var 关键字（或在现代 JS 中使用 let/const）进行显式声明。

第1步：显式声明局部变量

如果在函数内部使用 var 声明变量，该变量仅属于该函数的局部作用域。外部函数或代码块无法获取其值。

function myName() {
  var i = 'yuanjianhang';
}
myName();
function sayName() {
  alert(i); // 浏览器无任何输出，报错或显示未定义
}
sayName();

在此例中，i 被限制在 myName 函数内。当尝试在 sayName 中调用时，由于作用域隔离，访问失败。

第2步：隐式定义导致的全局变量

这是一个极易踩坑的特性：如果未使用 var 声明而直接在函数内部赋值，JavaScript 引擎会将其视为全局变量（实际上是给 window 对象的属性赋值），即便它写在函数体内。

function myName() {
  i = 'yuanjianhang'; // 缺少 var
}
myName();
function sayName() {
  alert(i); // 输出: yuanjianhang
}
sayName();

因为 myName() 被执行，i 被创建为全局变量，所以后续的 sayName 可以正常读取。

执行顺序与变量生命周期的影响

JavaScript 代码是按从上到下顺序执行的。即使变量是全局的，如果在其赋值前被读取，也会出现问题。此外，同名变量在全局和局部存在时的覆盖关系也需要厘清。

第3步：全局变量被函数修改的场景

当函数内部没有 var 时，它操作的是全局变量。执行顺序决定了最终结果：

var i = 'yuanjianhang';
function myloveName() {
  i = 'guanxi'; // 修改全局 i
}
myloveName();
function myName() {
  alert(i);
}
myName(); // 输出: guanxi

先定义了全局 i，然后调用函数将其改写，最后读取，结果为修改后的值。

第4步：局部变量遮蔽全局变量

如果函数内使用了 var 重新声明同名变量，则创建了独立的局部变量，不会影响全局值：

var i = 'yuanjianhang';
function myloveName() {
  var i = 'guanxi'; // 局部变量 i，遮蔽全局 i
}
myloveName();
function myName() {
  alert(i);
}
myName(); // 输出: yuanjianhang

此时存在两个 i，一个是全局作用域的 'yuanjianhang'，一个是函数局部的 'guanxi'。读取全局时不受局部赋值影响。

第5步：执行顺序不当导致的 undefined

如果在读取变量之前尚未完成赋值，或者涉及到变量提升（Hoisting），结果可能并非预期：

var i = 'yuanjianhang';
function myloveName() {
  alert(i); // 输出: undefined
  i = 'guanxi';
}
myloveName();

虽然全局有 i，但此处输出 undefined。这是因为 alert(i) 执行时，如果在后续有同名的局部变量声明（见下例），会触发变量提升机制，导致函数内优先查找局部变量但未赋值；即便没有局部声明，在某些严格上下文或特定引擎行为下，需确保初始化顺序。更典型的例子如下：

var i = 'yuanjianhang';
function myloveName() {
  alert(i); // 输出: undefined
  var i = 'guanxi'; // 声明提升到顶部
}

在函数作用域内，var 声明会被提升到函数头部。因此，执行 alert(i) 时，局部变量 i 已声明但未赋值，故为 undefined。这强调了在函数开头明确变量声明的重要性。

总结

掌握 JavaScript 的作用域规则能有效避免隐蔽的逻辑错误：
1. 始终使用 var、let 或 const 显式声明变量，防止意外的全局污染。
2. 注意代码执行顺序，确保在使用变量前已完成初始化。
3. 理解局部变量如何遮蔽全局变量，以及在涉及函数作用域时变量提升的影响。
以上就是 JavaScript 中局部变量和全局变量的区别详解，更多关于 JavaScript 基础知识的资料请关注本站其它相关文章！