JavaScript 中的五种作用域：开发人员深入探讨

php中文网 2024-10-15 11:47:07

javascript 对变量的行为是由它的作用域决定的。理解范围是编写健壮、可维护的代码的基础。本文将探讨 javascript 中的五种主要作用域类型——全局、局部、块、函数作用域（和闭包）和作用域链。最后，您将清楚地掌握 javascript 如何跨不同上下文处理变量。

1. 全球范围

解释：

在任何函数或块之外声明的变量都具有全局范围。这意味着它们可以在 javascript 代码中的任何位置访问。在浏览器中运行时，全局变量成为 window 对象的属性，如果应用程序的不同部分尝试使用相同的变量名称，则可能会导致冲突。

例子：

var globalvar = "i am a global variable";

function displayglobal() {
  console.log(globalvar); // accessible from inside the function
}

displayglobal(); // outputs: i am a global variable
console.log(globalvar); // accessible outside the function as well

重要考虑因素：

使用太多全局变量会污染全局命名空间，增加由于命名冲突而出现错误的可能性。

2. 本地范围

解释：

函数内声明的变量位于局部范围内。它们只能从该函数内访问。一旦函数执行完毕，变量就会从内存中删除，并且无法再访问。

立即学习“Java免费学习笔记（深入）”；

例子：

function localscopeexample() {
  var localvar = "i am local to this function";
  console.log(localvar); // works fine
}

localscopeexample();
console.log(localvar); // error: localvar is not defined

重要考虑因素：

本地作用域有助于避免变量名称冲突，促进函数内的封装和数据隐私。

3. 块作用域

解释：

在 javascript（特别是 es6+）中，用 let 和 const 声明的变量是块作用域的。块是 {}（大括号）之间的任何代码，例如 if 语句、循环和函数中的代码。块作用域变量仅限于定义它们的块。

例子：

if (true) {
  let blockscopedvar = "i exist only within this block";
  console.log(blockscopedvar); // accessible here
}

console.log(blockscopedvar); // error: blockscopedvar is not defined

重要考虑因素：

与 var 不同，let 和 const 可以防止变量意外泄漏到其预期块之外，从而使您的代码更具可预测性。

4. 闭包和函数作用域

解释：

javascript 中的每个函数都会创建自己的作用域，称为 函数作用域。函数内声明的变量只能在该函数内访问。然而，javascript 还支持闭包，它允许内部函数即使在外部函数完成执行后也可以访问外部函数的变量。

例子：

function outerfunction() {
  let outervar = "i am outside!";

  function innerfunction() {
    console.log(outervar); // can access outervar due to closure
  }

  return innerfunction;
}

const closureexample = outerfunction();
closureexample(); // outputs: i am outside!

重要考虑因素：

闭包非常强大，因为它们允许在函数中持久存储数据，而不会污染全局范围。它们支持数据封装和函数工厂等功能。

5. 作用域链

解释：

javascript 使用作用域链来解决变量访问。如果在当前作用域中找不到变量，javascript 将查找作用域链，检查外部作用域，直到找到该变量或到达全局作用域。

例子：

let globalVar = "I am a global variable";

function outerFunction() {
  let outerVar = "I am an outer variable";

  function innerFunction() {
    let innerVar = "I am an inner variable";
    console.log(globalVar); // Found in the global scope
    console.log(outerVar); // Found in the outer function scope
    console.log(innerVar); // Found in the inner function scope
  }

  innerFunction();
}

outerFunction();