【js面试题】说说你对作用域链的理解

理解JavaScript中的作用域链

在JavaScript编程中，作用域和作用域链是理解变量和函数如何在不同代码块中被访问和管理的关键概念。让我们深入探讨这些概念，并通过代码示例来理解它们是如何工作的。

作用域

举例：

function myFunction() {
   let inVariable = "函数内部变量";
}

myFunction(); // 要先执行这个函数，否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

myFunction 执行这个函数会创建 inVariable 变量，但这个变量仅在函数执行期间存在，并且只在函数内部可见

这说明我们这全局是无法获取到（闭包除外）函数内部的变量

作用域定义了变量和函数的可访问范围。在JavaScript中，主要有三种类型的作用域：

• 全局作用域：在任何函数或代码块外部声明的变量拥有全局作用域，可以在程序的任何地方被访问。

var globalVar = "我在全局作用域";

function myFunction() {
    console.log(globalVar); // 可以访问全局变量
}

myFunction(); // 输出: 我在全局作用域
console.log(globalVar); // 输出: 我在全局作用域

• 函数作用域：在函数内部声明的变量只能在该函数内部访问。

function myFunction() {
    var functionVar = "我在函数作用域";
    console.log(functionVar); // 可以访问函数作用域变量
}

myFunction(); // 输出: 我在函数作用域
// console.log(functionVar); // 这行代码会报错，因为functionVar不在全局作用域中

• 块级作用域：使用let和const关键字声明的变量仅在声明它们的代码块（如if语句、for循环等）内有效。

function myFunction() {
    var functionVar = "我在函数作用域";
    console.log(functionVar); // 可以访问函数作用域变量
}

myFunction(); // 输出: 我在函数作用域
// console.log(functionVar); // 这行代码会报错，因为functionVar不在全局作用域中

词法作用域

JavaScript遵循词法作用域（也称为静态作用域），意味着变量的作用域在编写代码时就已经确定。函数的作用域由函数定义时的位置决定，而不是由调用位置决定。

作用域链

作用域链是JavaScript引擎用来查找变量和函数的一系列嵌套作用域。当代码尝试访问一个变量时，引擎会首先在当前作用域中查找，如果未找到，它会向上移动到父级作用域中查找，这个过程会一直持续到全局作用域。
如果全局作用域中也找不到该变量，根据JavaScript的模式，非严格模式下变量会被隐式声明为全局变量，而在严格模式下则会抛出错误。

代码示例

让我们通过一个简单的代码示例来演示作用域链的工作原理：

var a = 2;

function foo() {
    console.log(a); // 输出 2
}

function bar() {
    var a = 3;
    // 这里如果修改全局的a  打印结果就会变
   //  a = 3; // 修改全局变量a的值
    foo();
}

bar();

在这个例子中，函数foo被调用时，它首先在自己的作用域内查找变量a，但没有找到。然后，它沿着作用域链向上查找，最终在全局作用域中找到了变量a并输出了值2。

当foo()函数被调用时，它会查找变量a。由于foo()是在全局作用域中定义的，它首先会在自己的作用域（也就是全局作用域）中查找变量a。由于全局作用域中有一个变量a，其值为2，所以foo()会打印出这个值。
即使bar()函数内部有一个局部变量a，这个局部变量a只在bar()函数内部有效，它不会影响foo()函数中对变量a的查找。foo()函数在定义时，其词法作用域中已经包含了全局变量a，因此它会忽略bar()函数内部的局部变量a。

结论

理解作用域和作用域链对于编写可维护和高效的JavaScript代码至关重要。它帮助我们避免变量冲突和意外的行为，同时使我们能够更好地控制变量的可见性和生命周期。掌握这些概念，将使我们能够更有效地利用JavaScript的灵活性和强大的功能。