likes
comments
collection
share

作用域和作用域链是怎么个事儿？？

作者站长头像
站长
· 阅读数 7

作用域（Scope）和作用域链（Scope Chain）是 JavaScript 中重要的概念，它们涉及到变量和函数的可访问性和可见性。

  1. 作用域（Scope）：
    • 作用域是指在程序中定义变量的区域，确定了变量的可访问性和生命周期。
    • JavaScript 中存在两种主要类型的作用域：全局作用域和局部作用域（函数作用域）。
    • 全局作用域中定义的变量可以在代码的任何地方被访问，而局部作用域中定义的变量只能在其所在的函数内部访问。
    • 在 ES6 之前，JavaScript 中没有块级作用域，而是使用函数作用域。ES6 引入了 let 和 const 关键字，使得 JavaScript 中也可以使用块级作用域。
  2. 作用域链（Scope Chain）：
    • 作用域链是指在 JavaScript 中，每个函数都有一个自己的作用域，当函数嵌套时，内部函数可以访问外部函数的变量。这种嵌套的作用域形成了作用域链。
    • 当访问一个变量时，JavaScript 引擎会先在当前函数的作用域中查找，如果找不到，则会沿着作用域链向上查找，直到找到该变量或者达到全局作用域为止。
    • 如果在全局作用域中仍然找不到该变量，则会抛出 ReferenceError 错误。 作用域和作用域链的理解对于编写复杂的 JavaScript 程序和避免变量命名冲突非常重要。正确地使用作用域可以提高代码的可维护性和可读性，并且避免意外的变量覆盖或污染。

贴心补充小知识one

变量污染是指在程序中由于变量命名冲突或者变量被意外重新赋值而导致的错误或不确定的行为。当一个变量的值被意外地修改或者被其他变量覆盖时，就会发生变量污染。 在 JavaScript 中，全局变量很容易受到变量污染的影响，因为全局作用域中的变量对整个程序都是可见的。如果在函数内部重新声明了一个已经存在于全局作用域中的变量，并给它赋予了新的值，那么全局作用域中的该变量的值也会被改变，这就是变量污染的一种情况。 另外，在函数内部使用 var 声明的变量也容易导致变量污染，因为 var 声明的变量具有函数作用域，如果在同一个函数内部多次声明同名变量，后面的声明会覆盖前面的声明，从而造成变量污染。 变量污染会导致程序的可读性和可维护性降低，因为在复杂的程序中，很难跟踪和理解变量的值是如何被修改的。为了避免变量污染，可以采取以下几种措施：

  • 尽量避免使用全局变量，减少全局作用域中的变量数量。
  • 使用 let 和 const 关键字声明变量，这样可以将变量的作用域限制在块级作用域内，减少变量污染的可能性。
  • 在函数内部使用严格模式 'use strict';，这可以帮助捕获一些潜在的变量污染问题，并提前发现错误。

贴心补充小知识two

块级作用域和局部作用域是 JavaScript 中的两个重要概念，它们虽然有相似之处，但在使用和效果上存在一些区别：

  1. 块级作用域（Block Scope）：
  • 块级作用域指的是由一对花括号 {} 包裹起来的代码块，如条件语句 (if、else、switch)、循环语句 (for、while)、函数等。
  • 在 ES6（ECMAScript 2015）之前，JavaScript 中没有真正的块级作用域，变量的作用域仅限于函数内部（函数作用域）。
  • ES6 引入了 let 和 const 关键字，这两个关键字声明的变量具有块级作用域，意味着在声明它们的代码块内部有效，超出这个范围则无法访问。
  • 块级作用域的变量在代码块结束后会被销毁，这有利于避免变量污染和提高代码的可维护性。
  1. 局部作用域（Function Scope）：
  • 局部作用域指的是在函数内部声明的变量，它们只在该函数内部有效，外部无法访问。
  • 在 ES6 之前，JavaScript 中使用 var 关键字声明的变量具有函数作用域，即在包含它们的函数体内有效，超出这个函数体则无法访问。
  • 局部作用域的变量在函数执行结束后会被销毁，这有利于释放内存并避免全局变量污染。 区别总结如下：
  • 块级作用域使用 let 和 const 声明的变量在花括号 {} 内部有效，而局部作用域变量则在函数体内部有效。
  • 块级作用域的变量在代码块结束后会被销毁，而局部作用域的变量在函数执行结束后被销毁。
  • 块级作用域可以帮助更好地管理变量的生命周期和作用范围，避免变量污染和冲突。 例如，以下代码展示了块级作用域和局部作用域的区别：
// 块级作用域示例
{
   let blockVar = 'Block Scoped Variable';
   console.log(blockVar); // 输出: Block Scoped Variable
}
console.log(blockVar); // 报错: blockVar is not defined
// 局部作用域示例
function myFunction() {
   var localVar = 'Local Scoped Variable';
   console.log(localVar); // 输出: Local Scoped Variable
}
myFunction();
console.log(localVar); // 报错: localVar is not defined
>```
在上述示例中，`blockVar` 是块级作用域的变量，在花括号内部有效；而 `localVar` 是局部作用域的变量，在函数体内部有效。
转载自:https://juejin.cn/post/7353544284417720372
评论
请登录