作用域基础知识

各位小伙伴好~

今天在学习js作用域的时候，感觉这个知识点比较难以理解，因此，写这篇文章简单记录一下！如果有问题，请大家多多指教哦！

什么是作用域

JavaScript中的作用域 ，是指变量、函数或者对象的作用范围。简单来说，就是指某个变量、函数或者对象在一个特定的执行环境中可以被访问，但一旦超出这个执行环境就无法被访问。

<script>
  function test() {
    var a = 1;
    console.log(a);  // 1
  }
  test();
  console.log(a); //  a is not defined
</script>

作用域的分类

JavaScript中的作用域可以根据执行环境的不同可以分为以下两种：

• 全局作用域
• 局部作用域

ECMASCript6新增了块级作用域。

全局作用域

在全局作用域定义的变量、函数或者对象在任意位置都可以访问；全局作用域在页面打开时创建，在页面关闭时销毁。

直接编写早script标签中的代码，都在全局作用域：

如下面定义的变量a、b，函数c都是全局作用域下

    <script>
      var a = 2;
      var b = 3;
      function c() {
        console.log("作用域");
      }
    </script>

全局作用域中有一个全局对象window，它代表浏览器窗口，可以直接使用：

    <script>
      console.log(window); // Window {window: Window, ...}
    </script>

在全局作用域中，创建的变量都会作为window的属性保存，创建的方法也会被挂载到window上：

    <script>
      var a = 2;
      var b = 3;
      function c() {
        console.log("作用域");
      }
      console.log(window.a); // 2
      console.log(window.b); //3
      console.log(window.c); //Function
    </script>

注意，es6中引入了const和let，如果使用const和let声明变量，在全局作用域中，它们将不在被作为全局变量使用。

    <script>
      const a = 2;
      let b = 3;
      console.log(window.a); // undefined
      console.log(window.b); // undefined
    </script>

局部作用域

在函数内部或者代码块的内部定义的变量、函数或者对象只能在当前函数内部或者代码块的内部访问。

function showDevices() {
  let device = "小米"; // 局部变量
  console.log(device); // 输出：小米
}

showDevices();
console.log(device); // 报错：device is not defined

在这个示例中，变量 device 是在 showDevices 函数内部定义的，因此只能在该函数内部使用，函数外部访问会导致错误。

作用域链

JavaScript 中的作用域是有层级关系的，称为作用域链。当在某个作用域中查找变量时，JavaScript 会沿着作用域链向上查找，直到找到变量或到达全局作用域为止。

let fruit = "苹果"; // 全局变量

function outerFunction() {
  let color = "红色"; // 外部函数变量

  function innerFunction() {
    let taste = "甜"; // 内部函数变量
    console.log(fruit); // 输出：苹果
    console.log(color); // 输出：红色
    console.log(taste); // 输出：甜
  }

  innerFunction();
}

outerFunction();

在这个例子中，innerFunction 可以访问 outerFunction 中的 color 变量以及全局的 fruit 变量，而 outerFunction 不能访问 innerFunction 中的 taste 变量。

闭包

闭包是 JavaScript 中一个非常重要的概念，指的是一个函数可以“记住”并访问其词法作用域，即使函数是在其词法作用域之外执行的。

function createCounter() {
  let count = 0; // 局部变量

  return function() {
    count += 1; // 访问外部函数的变量
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2
console.log(counter()); // 输出：3

在这个示例中，createCounter 函数返回一个内部函数，而这个内部函数可以访问 count 变量，即使 createCounter 函数已经执行完毕。

总结

通过全局作用域、局部作用域和作用域链的学习，大家可以更好地处理变量，避免潜在的问题。希望大家能灵活运用这些知识，在前端开发中游刃有余！

感谢大家的阅读，如有不妥之处，请多多指教哦！