JavaScript变量作用域：全局与局部详解
作者：异步漫步时间：2026-10-25 07:32:20浏览：333
本文详细解析JavaScript中变量的两种分类：全局变量与局部变量。通过代码示例说明局部变量仅在函数内部有效，而全局变量作用于整个脚本。重点讲解变量名冲突时的就近原则，以及未使用var声明变量时默认成为全局变量的机制，最后建议避免滥用全局变量以防止团队开发冲突。
一、变量的分类
在JavaScript中，变量主要被划分为两类：
- 全局变量
- 局部变量
二、变量的作用域
1、局部变量的作用域
所谓局部变量，是指在函数内部定义的变量。其有效范围仅限于该函数内部，在函数外部无法直接访问。具体表现如下面的代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>局部变量作用域</title>
<script>
// 定义函数fn
function fn(){
var a=5;// 定义局部变量
document.write(a);
};
// 调用函数fn
fn();
// 定义函数fn2
function fn2(){
document(a);
};
// 调用函数fn2
fn2();
</script>
</head>
<body>
</body>
</html>运行结果：
2、全局变量
全局变量是指定义在函数外部的变量，其作用域覆盖整个JavaScript代码块。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
}
fn();
fn2();
</script>
</head>
<body>
</body>
</html>运行结果：
需要注意以下几点：
a、如果在函数内部定义了与全局变量同名的局部变量，根据就近原则，在函数内部将优先使用局部变量。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
/* function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
} */
// 就近原则
function fn(){
var number="我是局部变量";
document.write("number的值是:"+number+"<br />");
};
function fn2(){
number="我是全局变量"
document.write("number的值是:"+number+"<br />");
}
fn();
fn2();
</script>
</head>
<body>
</body>
</html>运行结果：
b、全局变量window
如果在定义变量时省略了var关键字，无论该变量是在函数内部还是外部定义，它都会被视为全局变量。具体表现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全局变量作用域</title>
<script>
var number; // 全局变量
/* function fn(){
number=5;
document.write("number的值是:"+number+"<br />");
};
function fn2(){
++number;
document.write("number的值是:"+number+"<br />");
} */
// 就近原则
/* function fn(){
var number="我是局部变量";
document.write("number的值是:"+number+"<br />");
};
function fn2(){
number="我是全局变量"
document.write("number的值是:"+number+"<br />");
}
fn();
fn2(); */
// windows
// 相当于window.a
a=12;
function fn(){
// 相当于window.b
b="我是window对象,是全局变量";
};
fn();
document.write("a="+a+"<br />");
document.write("b="+b+"<br />");
</script>
</head>
<body>
</body>
</html>运行结果：
c、应尽量避免使用全局变量，以免团队开发变量发生冲突。
以上所述是小编给大家介绍的JavaScript中变量的作用域，希望对大家有所帮助。在此也非常感谢大家对本站网站的支持！
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19