JavaScript 中的变量阴影

块作用域：要理解 JavaScript 中的阴影，我们首先需要明确作用域。在计算机编程语言中，作用域是程序的某个部分/区域，其中定义的变量可以存在并且可以被识别，除此之外它不能被访问。在 JavaScript 中，块是由花括号 {} 定义的复合语句，用于将多个语句组合成一个语句，而 JavaScript 只需要一个语句。并且可以在块内访问的所有变量和函数都被称为在该块范围内，因此称为块范围。

例如， let和const变量存储在不同的内存空间中，因此称为块作用域，但var变量存储在全局对象内存空间中，因此可以在块外访问，因此称为全局作用域。

Shadowing：现在，当在某个范围内声明一个变量时，在其外部范围内定义了相同的名称，并且当我们从内部范围内调用该变量时，分配给内部范围内变量的值就是将要存储的值在内存空间的变量中。这称为阴影或可变阴影。在 JavaScript 中，在 ECMAScript 6 中引入let和const以及块作用域允许变量遮蔽。

例子：

Javascript

function func() {
    let a = 'Geeks';
      
    if (true) {
        let a = 'GeeksforGeeks';  // New value assigned
        console.log(a); 
    }
      
    console.log(a); 
func();

输出：

GeeksforGeeks
Geeks

非法遮蔽：现在，在遮蔽变量时，它不应该越过作用域的边界，即我们可以通过let变量遮蔽var变量，但不能反其道而行之。因此，如果我们尝试通过var变量来遮蔽let变量，则称为非法遮蔽，它会给出“变量已定义”的错误。

例子：

Javascript

function func() {
    var a = 'Geeks';
    let b = 'Geeks;
      
    if (true) {
        let a = 'GeeksforGeeks'; // Legal Shadowing
        var b = 'Geeks'; // Illegal Shadowing
        console.log(a); // It will print 'GeeksforGeeks'
        console.log(b); // It will print error
    }
}
func();

输出：

Identifier 'b' has already been declared

注意：箭头函数也遵循相同的范围和变量阴影规则。