JavaScript局部变量与全局变量的区别及作用域详解

JavaScript变量类型概述

JavaScript主要包含两种变量类型：局部变量和全局变量。本文旨在深入解析这两者的具体差异。

局部变量与全局变量的定义

局部变量仅在声明它的函数内部可见，而全局变量则在整个代码执行环境中均可访问。虽然字面意思如此，但实际应用中存在诸多细节。在JavaScript中，通常使用var关键字声明变量，但也允许不声明直接使用（隐式声明）。需要注意的是，JavaScript会将所有隐式声明的变量视为全局变量。

function myName() {
i = 'yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();

运行结果为：yuanjianhang

隐式声明与显式声明的区别

上述结果表明变量i具有全局属性。若将代码调整为以下形式：

function myName() {
var i='yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();

此时浏览器无任何输出，因为i在函数myName内部通过var声明，属于局部变量，外部无法访问。 接下来分析以下代码：

function myName() {
i = 'yuanjianhang';
}
myName();
function sayName() {
alert(i);
}
sayName();

函数调用对变量赋值的影响

现在进行改动，移除myName()的调用，代码如下：

function myName() {
i = 'yuanjianhang';
}
function sayName() {
alert(i);
}
sayName();

此时浏览器同样无反应。尽管i被定义为全局变量，但由于函数myName未被调用，i并未实际赋值，因此无输出。 同理，若调整代码顺序如下：

function myName() {
 
i = 'yuanjianhang';
}
function sayName() {
alert(i);
}
sayName();
myName();

全局变量与局部变量的交互

这种情况下依然无输出。JavaScript代码按从上到下的顺序执行，当调用sayName()时，会尝试读取变量i的值，但此时函数myName尚未执行，i未被赋值，故无结果。 为进一步说明，再举一例：

var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
}
myloveName();
function myName() {
alert(i);
}
myName();

结果如何？ 答案是guanxi。 初始时i的值为yuanjianhang，调用myloveName()后，i的值被修改为guanxi，因此最终输出guanxi。

同名变量的作用域隔离

若将代码修改为：

var i = 'yuanjianhang';
function myloveName() {
var i = 'guanxi';
}
myloveName();
function myName() {
alert(i);
}
myName();

此时结果为yuanjianhang。代码中的两个i互不影响，一个是全局变量，另一个是局部变量。尽管名称相同，但它们属于不同的作用域，如同两个同名但不同的人。

若将代码进一步调整为：

var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
}
function myName() {
alert(i);
}
myName();
myloveName();

结果应为yuanjianhang。

函数内部修改全局变量

既然函数内部可以访问全局变量，那么以下情况如何：

var i = 'yuanjianhang';
function myloveName() {
i = 'guanxi';
alert(i);
}
myloveName();

此时变量的值是多少？

分析如下：

首先，全局变量i被赋值为yuanjianhang。

随后调用myloveName()函数，全局变量i被重新赋值为guanxi。

因此结果为：guanxi。

变量提升与undefined现象

若将alert语句提前，代码如下：

var i = 'yuanjianhang';
function myloveName() {
alert(i);
i = 'guanxi';
}
myloveName();

结果是什么？ 验证结果为：undefined。 若代码改为：

var i = 'yuanjianhang';
function myloveName() {
alert(i);
}
myloveName();

此时i的结果为：yuanjianhang

为何会出现undefined？因为代码执行顺序是从上到下，在输出i之前并未对其进行定义。这表明在使用变量时，应确保声明位于使用之前，以避免此类问题。

同理：

var i = 'yuanjianhang';
function myloveName() {
alert(i);
var i = 'guanxi';
 
}
myloveName();

这种情况也会输出：undefined

关于变量的介绍到此为止，相信通过上述示例，任何人都能理解其核心原理。无论代码如何变化，基本规则不变。

以上就是本文的全部内容，希望读者对JavaScript中局部变量和全局变量的区别有了更深刻的认识，祝大家新年快乐，学习愉快。