JavaScript 作用域

17 Mar 2025 | 5 分钟阅读

JavaScript 中的作用域是什么？

在 JavaScript 中，作用域是指代码的当前上下文，变量在其中被声明并可以被访问。简而言之，它帮助我们决定在 JavaScript 中声明变量或函数如何影响我们之后访问它们的位置。

作用域可以被定义为执行的区域，表达式和值可以在其中被引用。所以，如果我们把一个变量定义在一个函数内部，那么我们只能在那个函数内部访问它。

JavaScript 中的作用域类型

JavaScript 中有几种作用域类型，例如全局作用域、局部作用域、函数作用域、块级作用域和词法作用域。现在让我们详细探讨其中一些作用域。

全局作用域

在 JavaScript 中，全局作用域意味着一个变量或函数在我们的程序中任何地方都可以使用。它是变量和函数最常见也是默认的作用域。

如何在全局作用域中声明变量？

在全局作用域中，变量可以从 JavaScript 代码的任何部分访问。

示例

var pet = 'cat';
function printPet() {
    console.log(pet);
}

正如你在示例中看到的，我们声明了一个名为 `pet` 的变量，其值为 `cat`。现在，我们还定义了一个名为 "printPet" 的函数，它会将 `pet` 的值打印到控制台。

你可以看到，我们在全局作用域中定义了 `pet`，我们可以在 "printPet" 函数内部访问它。

局部作用域

局部作用域在 JavaScript 中意味着一个变量或函数在当前代码块中可用。在局部声明变量会限制其可见性，仅限于定义它的代码块、函数或条件语句。

如何在局部作用域中声明变量？

如果我们想创建一个局部作用域，我们需要使用花括号 `{}`。

示例

让我们举一个例子来理解 JavaScript 中局部作用域的声明。

{ var car= 'BMW'; }
console.log(car);

在上图中，我们定义了一个名为 `car` 的变量，其值为 'BMW'。我们使用了花括号来为该变量创建了一个局部作用域。

现在 'car' 处于局部空间，所以我们无法在花括号外部访问它。如果你在花括号内部访问该作用域，它仍然可用。

函数作用域

它与局部作用域非常相似，我们在函数内部定义变量和函数，它们只在该函数内部可用。变量可以在函数内部定义，并且不能从函数外部访问。我们可以使用 `var`、`let` 和 `const` 关键字来声明变量，因为它们在函数内部声明时非常相似。

示例

Function printCar () {
var car = 'Audi';
console.log (car);
}

在上面的例子中，我们定义了一个名为 "printCar" 的函数。我们需要定义一个名为 'car' 的变量，其值为 'Audi'。

我们必须在 "printCar" 函数内部定义 'car'，这样我们才能在函数内部访问它。如果我们尝试在函数外部访问 car，我们将收到一个错误。

块级作用域

它帮助我们创建只在代码块内部可用的变量和函数。我们在条件语句和循环中使用块级作用域，这样我们就可以控制变量的作用域。

简而言之，块级作用域是一系列嵌套在更大容器中的盒子，每个盒子都有自己的一组变量。

如何声明块级作用域的变量？

当变量在块级作用域中声明时，它只能在定义它们的块内访问。这些变量就像套娃中的隐藏宝藏，只在各自的隔间内知道并可访问。

例如

if (true){
    let blockVariable = "i am in block scope";
    console.log(blockVariable);
}

在这段代码中，我们在 `if` 语句创建的块中定义了 `blockVariable`，它在块外部是不可访问的。

词法作用域

在 JavaScript 中，与其它作用域相比，词法作用域可能更复杂。它也称为静态作用域或编译时作用域。

这意味着一个变量的作用域是由它在代码中的位置决定的。简单来说，变量在其父变量的相同作用域内是可访问的。

示例

var vehicle = 'Jaguar';
function printVehicle() {
    console.log(vehicle);
}

在这个例子中，我们定义了一个名为 `vehicle` 的变量，其值为 Jaguar。我们还定义了一个名为 printVehicle 的函数。

由于我们在全局作用域中定义了 `vehicle` 变量，因此它在 printVehicle 函数中可用。如果我们尝试在代码块内访问 `vehicle`，它将不可用。

示例

if (true){
    var vehicle = 'Jaguar';
    console.log(vehicle);                                                 
}
console.log(vehicle);

在上面的例子中，我们可以定义一个名为 `vehicle` 的变量，其值为 Jaguar。我们还可以定义一个名为 'printVehicle' 的函数。

我们可以在全局作用域中定义 `vehicle` 变量，它在 "printVehicle" 函数中是可用的。

为什么作用域在 JavaScript 中很重要？

作用域在 JavaScript 中很重要，原因有几个。其中一些原因如下：

防止变量名冲突

在 JavaScript 中，当我们在同一作用域中用相同的名字声明两个变量时，我们会遇到错误，代码将无法正常工作。

提高代码安全性

借助 JavaScript 中的作用域，我们可以将变量和函数的访问限制在适当的作用域边界内。它还有助于我们防止未经授权方无意中修改或窃取敏感数据。

提高代码效率

JavaScript 中作用域的使用也可以提高代码效率。如果我们使用适当的作用域，我们可以减少不必要的内存使用，它也有助于我们减少时间。

示例 1

在这个例子中，我们声明了两个变量，一个变量具有全局作用域，第二个变量具有局部作用域。这两个变量都以相同的名称声明。

在输出中，我们可以看到局部作用域的变量覆盖了全局变量的值。

<!DOCTYPE html> 
<html>
<head> 
</head>
<body>
<script>
var $var12 = 200;   
  
function example() {    
    var $var12 = 300;   
    document.write("Inside example() function = " + $var12);   
}   
document.write("Outside example() function = "  + $var12);  
document.write("<br>");
example(); 
</script>

</body>
</html>

输出

下一个主题JavaScript scroll

JavaScript 作用域

JavaScript 中的作用域是什么？

JavaScript 中的作用域类型

全局作用域

局部作用域

函数作用域

块级作用域

词法作用域

为什么作用域在 JavaScript 中很重要？

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 作用域

JavaScript 中的作用域是什么？

JavaScript 中的作用域类型

全局作用域

局部作用域

函数作用域

块级作用域

词法作用域

为什么作用域在 JavaScript 中很重要？

示例 1

相关帖子

JavaScript date parse() 方法

JavaScript 日期格式

JavaScript 日期差

JavaScript TypedArray

JavaScript WeakMap

JavaScript sleep

如何在 JavaScript 对象中添加属性

JavaScript 滚动