<关于作用域的那点事儿：从小白到专业>

2024-01-01 22:29:34

作用域精解：小白到专家的进阶指南

在编程世界中，作用域是一个至关重要的概念，它决定了变量、函数和其他实体在代码中可访问的范围。对于初学者来说，作用域可能是一个令人困惑的话题，但对于精通 JavaScript 的专业人士来说，它却是必不可少的知识。

一、作用域的范围

想象一下作用域就像一个套娃，它由一系列嵌套的层组成。最外层是 全局作用域 ，它包含在整个程序中都可以访问的实体。而 局部作用域 则存在于函数内部或块级作用域中，它们只能在这些限定的区域内访问。

代码示例：

// 全局作用域
var globalVariable = 10;

function myFunction() {
  // 局部作用域
  var localVariable = 20;

  console.log(globalVariable); // 10
  console.log(localVariable); // 20
}

myFunction();

在这个示例中，globalVariable 在全局作用域中声明，而 localVariable 在函数 myFunction 内部声明。从 myFunction 内部，我们可以访问 globalVariable，但不能访问 localVariable。

二、作用域的访问关系

作用域之间的访问关系遵循一个简单的规则：内部作用域可以访问外部作用域的实体，但外部作用域不能访问内部作用域的实体。

换句话说，就像套娃一样，较小的套娃可以知道较大的套娃里有什么，但反之则不然。

代码示例：

// 全局作用域
var globalVariable = 10;

function myFunction() {
  // 局部作用域
  var localVariable = 20;

  console.log(globalVariable); // 10
  console.log(localVariable); // 20
}

// 外部作用域不能访问内部作用域的变量
console.log(localVariable); // ReferenceError: localVariable is not defined

三、声明提升

在 JavaScript 中，变量和函数的声明会提升到它们所在作用域的顶部。这意味着无论你实际声明这些实体的位置如何，它们都将被视为在作用域顶部声明的。

代码示例：

// 全局作用域
console.log(globalVariable); // undefined
var globalVariable = 10;

// 局部作用域
function myFunction() {
  console.log(localVariable); // undefined
  var localVariable = 20;
}

myFunction();

即使我们在声明之前使用了 globalVariable 和 localVariable，也不会产生错误。这是因为它们的声明已提升到了作用域的顶部。

四、块级作用域

块级作用域通过花括号 {} 定义。在花括号内声明的实体只在这个块级作用域内可用。这有助于组织代码并防止命名冲突。

代码示例：

// 全局作用域
var globalVariable = 10;

// 块级作用域
{
  var blockVariable = 20;

  console.log(globalVariable); // 10
  console.log(blockVariable); // 20
}

// 外部作用域不能访问块级作用域的变量
console.log(blockVariable); // ReferenceError: blockVariable is not defined

五、eval & 欺骗词法作用域

eval() 函数是一个强大的工具，它允许我们执行字符串中的代码。但这可能会带来安全风险，因为它绕过了通常的作用域规则。使用 eval() 函数时需要小心。

代码示例：

// 全局作用域
var globalVariable = 10;

// 使用 eval() 函数创建变量和函数
eval("var localVariable = 20;");
eval("function myFunction() { console.log(localVariable); }");

// 调用函数
myFunction(); // 20