JavaScript变量的作用域是什么？

技术背景

在JavaScript中，作用域定义了变量和函数的可访问范围。了解作用域对于编写高质量、可维护的JavaScript代码至关重要，因为它影响着变量的生命周期、可见性以及代码的执行逻辑。JavaScript具有词法（静态）作用域和闭包的特性，这意味着可以通过查看源代码来确定标识符的作用域。

实现步骤

作用域的类型

全局作用域

全局作用域中的变量和函数可以在代码的任何地方被访问。在浏览器环境中，全局对象是window，在Node.js环境中是global。例如：

var globalVariable = 7;
function aGlobal() {
    console.log(globalVariable); 
}
aGlobal();

函数作用域

使用var声明的变量具有函数作用域，这意味着它们只能在声明它们的函数内部访问。例如：

function myFunction() {
    var localVar = 10;
    console.log(localVar); 
}
myFunction();
console.log(typeof localVar);

块级作用域

ES6引入了let和const关键字，它们声明的变量具有块级作用域。块级作用域意味着变量只能在声明它们的块（如if语句、for循环等）内部访问。例如：

if (true) {
    let blockVar = 20;
    console.log(blockVar); 
}
console.log(typeof blockVar);

模块作用域

ES6模块中的代码运行在自己的私有作用域中。在模块中声明的变量和函数默认情况下只能在该模块内部访问，除非使用export关键字将它们导出。例如：

// module1.js
var x = 0;
export function f() {}

// module2.js
import f from 'module1.js';
console.log(x);

声明方式对作用域的影响

var：具有函数作用域，除了在全局上下文中声明时会成为全局对象的属性。

function func() {
    var localVar = 1;
}
console.log(typeof localVar);

let和const：具有块级作用域，除了在全局上下文中声明时具有全局作用域，但不会成为全局对象的属性。

{
    let blockLet = 2;
    const blockConst = 3;
}
console.log(typeof blockLet); 
console.log(typeof blockConst);

函数参数：作用域限定在函数体内部。

function f(x) {
    console.log(x);
}
f(5);
console.log(typeof x);

函数声明：在严格模式下具有块级作用域，在非严格模式下具有函数作用域。

'use strict';
{
    function foo() {}
}
console.log(typeof foo);

命名函数表达式：作用域限定在表达式本身。

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

全局对象的隐式属性：在非严格模式下，隐式定义的全局对象属性具有全局作用域，但在严格模式下不允许。

// 非严格模式
x = 1;
console.log(x); 
console.log(window.hasOwnProperty('x')); 

// 严格模式
'use strict';
// y = 2;

eval：在eval字符串中，使用var声明的变量将被放置在当前作用域中，或者如果间接使用eval，则作为全局对象的属性。

1 2	`eval('var evalVar = 4;'); console.log(typeof evalVar);`

核心代码

作用域链的实现

JavaScript通过词法环境的嵌套链来实现作用域链。每个函数对象都有一个隐藏的[[Environment]]引用，指向其创建时的词法环境。当调用函数时，会创建一个新的执行上下文，并建立新执行上下文的词法环境与函数对象的词法环境之间的链接。

function outer() {
    var outerVar = 'outer';
    function inner() {
        console.log(outerVar); 
    }
    return inner;
}
var closure = outer();
closure();

闭包的使用

闭包是指有权访问另一个函数作用域中变量的函数。上述代码中的inner函数就是一个闭包，它可以访问outer函数作用域中的outerVar变量。

最佳实践

优先使用let和const：let和const具有块级作用域，能减少变量泄漏和意外覆盖的问题，使代码更安全和可维护。
避免使用全局变量：全局变量容易导致命名冲突和代码的可维护性降低。尽量将变量的作用域限制在需要的最小范围内。
理解闭包的使用场景：闭包可以用于实现数据的封装和私有变量，但过度使用闭包可能会导致内存泄漏。

常见问题

变量提升问题

使用var声明的变量会被提升到作用域的顶部，但赋值不会提升。而let和const声明的变量也会被提升，但在声明之前访问会导致ReferenceError，这个期间被称为暂时性死区。

console.log(varVar); 
var varVar = 5;

// console.log(letVar); 
let letVar = 6;

循环中的闭包问题

在循环中使用var声明变量时，闭包会捕获同一个变量的引用，导致意外的结果。使用let声明变量可以解决这个问题。

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i); 
    }, 100);
}

for (let j = 0; j < 5; j++) {
    setTimeout(() => {
        console.log(j); 
    }, 100);
}

内联事件处理程序的作用域问题

内联事件处理程序（如onclick）只能访问全局作用域、文档对象的属性或元素本身的属性。如果引用了函数内部定义的变量或函数，会导致ReferenceError。建议使用addEventListener来添加事件处理程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <button onclick="foo()">Click me</button>
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            function foo() {
                console.log('foo running');
            }
        });
    </script>
</body>
</html>

上述代码中的内联事件处理程序无法访问foo函数，因为foo函数定义在DOMContentLoaded事件处理程序内部，不在全局作用域中。正确的做法是：