详解JavaScript作用域和作用域链

我来详细讲解一下“详解JavaScript作用域和作用域链”的完整攻略。

什么是作用域？

在JavaScript中，每个变量都有一个作用域，其定义了变量与其他代码的访问权限。通俗来说，作用域是一种规定了代码中每个变量和函数在哪些地方可以被访问的规则。

全局作用域

全局作用域是指在任何地方都可以访问的变量和函数。在Web应用中，全局作用域对象是window对象，在Node.js中，是global对象。全局作用域中定义的变量将被所有代码在任何位置访问到。

var a = 10;
function foo() {
    console.log(a);
}
foo(); // 10

在上述示例中，a变量被定义在全局作用域中，在foo()函数中也可以访问到。

局部作用域

与全局作用域相反，局部作用域是指只能在特定代码块中访问的变量和函数。

在Javascript中，最常见的局部作用域有两种：函数作用域和块级作用域。

函数作用域

函数作用域是指在函数内部定义的变量和函数只在该函数的作用域内可见。

function foo() {
    var a = 10;
    console.log(a);
}
foo(); // 10
console.log(a) // ReferenceError: a is not defined

在上述示例中，a仅在函数foo()的作用域内可见。

块级作用域

块级作用域是指在花括号（‘{ }’）内部定义的变量和函数只在该花括号内可见。ES6之前，Javascript没有块级作用域的概念，针对这个问题，我们常常使用匿名自执行函数来模拟块级作用域。

for (var i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i); // 10

// 使用匿名自执行函数模拟块级作用域
for (var i = 0; i < 10; i++) {
    (function() {
        console.log(i);
    })();
}
console.log(i); // 10

在上述示例中，i在for循环中使用var声明，导致for循环结束后，i仍然可以访问到。使用匿名自执行函数在for循环内定义的变量i只在自执行函数中可见，for循环外的所有代码都无法访问到它。

作用域链

在Javascript中，每个函数都有一个作用域链，它是由函数内部所有嵌套的函数和作用域链构成。作用域链是一种向上查找的机制，即如果当前函数无法访问到某个变量，它会向上层嵌套函数和全局作用域查找这个变量。

var a = 10;
function foo() {
    var b = 20;
    function bar() {
        var c = 30;
        console.log(a + b + c);
    }
    bar();
}
foo(); // 60

在上述示例中，bar()函数内部无法访问到a和b变量，于是它查找它的父函数foo()，并在foo()作用域中找到了a和b变量，这个机制就是作用域链的工作原理。

总结

作用域是Javascript中非常重要的一个概念，可以帮助我们理解变量和函数在代码中的作用和限制。全局作用域和局部作用域是Javascript的两种基本作用域类型，作用域链是Javascript查找变量时的一种机制，并对嵌套的函数有着关键的作用。

示例说明

示例1： 改变变量所在的作用域

在以下示例中，变量a在函数foo()中被声明，我们在尝试访问它的值时，会抛出ReferenceError: a is not defined的错误，因为它的作用域只在函数内部。

function bar() {
    console.log(a);
}

function foo() {
    var a = 10;
    bar();
}
foo(); // ReferenceError: a is not defined

如果我们将a变量移到全局作用域中，它就可以访问到了。

var a;
function bar() {
    console.log(a);
}

function foo() {
    a = 10;
    bar();
}
foo(); // 10

示例2：块级作用域

在以下示例中，我们使用for循环定义了变量i，但是在循环结束后，i仍然在全局作用域中可见。

for (var i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i); // 10

如果我们使用块级作用域，可以将i变量限定在块级作用域中，从而避免这个问题。

for (let i = 0; i < 10; i++) {
    console.log(i);
}
console.log(i); // ReferenceError: i is not defined

在使用块级作用域时，使用let或const关键字可以定义块级作用域中的变量和常量，从而提高代码质量和稳定性。