在 JavaScript 代码中 , 使用的 变量 / 函数 等 名称 在 声明后 , 并不是 在所有的位置 都有效的 , 限定 上述 变量 / 函数 名称 生效的代码范围 就是 " 作用域 " ;
" 作用域 " 可以控制 变量 / 函数 的 可访问性 , 即 变量 / 函数 在哪些代码区域可以被调用 , 在哪些区域不能被调用 ;
作用域 可以 提高程序的 可维护性 , 避免 命名冲突 , 在不同的作用域中 , 可以使用相同的名称 ;
JavaScript 的 作用域 分为 全局作用域 和 局部作用域 两种类型 :
<script></script>
标签中 , 或者 单独的 js 文件中 ;代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// JavaScript 作用域
// 1. 全局作用域
// 定义的 num 变量在 整个 <script> 标签中都可以访问
// 该变量就是 全局变量
var num = 10;
// 2. 局部作用域
function add() {
// 该 num 变量 和 num2 变量 都是局部变量
// 这两个变量只能在 函数的内部可以访问
// 函数外部无法访问这两个变量
var num = 10;
var num2 = 20;
return num1 + num2;
}
</script>
</head>
<body>
</body>
</html>
上述代码中 , 全局变量 num 变量 与 局部变量 num 变量 出现了 命名冲突 , 这不会影响到 局部变量的 使用 ;
在 局部作用域 中 , 相同名称 的变量 本作用域的 变量 优先级较高 ;
JavaScript 变量 根据 其 被声明的 作用域类型 , 分为
<script></script>
标签中 或者 js 文件中 ; 在 函数外部 声明的变量 ; 全局变量 和 局部变量 区别 :
在进行 JavaScript 编程的时候 , 建议 尽量不适用全局变量 , 能用 局部变量 就 优先使用 局部变量 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// JavaScript 作用域
// 1. 全局变量
// 定义的 num 变量在 整个 <script> 标签中都可以访问
// 该变量就是 全局变量
var num = 10;
// 2. 全局作用域中 没有声明 直接使用的变量 也是 全局变量
num2 = 20;
console.log("num = " + num);
console.log("num2 = " + num2);
</script>
</head>
<body>
</body>
</html>
执行结果 :
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// JavaScript 作用域
// 1. 函数参数也是 局部变量
function add(arg) {
// 函数内部 声明 的变量 是 局部变量
var num = 10;
// 3. 局部作用域中 没有声明 直接使用的变量 也是 局部变量
num2 = 20;
console.log("arg = " + arg);
console.log("num = " + num);
console.log("num2 = " + num2);
}
// 调用函数
add(888);
</script>
</head>
<body>
</body>
</html>
执行结果 :