JavaScript 前端面试 4（作用域链、this）

八、作用域链的理解

1：作用域

变量或者函数能生效或者被访问的区域或集合

作用域分为：

|-------|
| 全局作用域 |
| 函数作用域 |
| 块级作用域 |

1.1：全局作用域

任何不在函数或是大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问

1.2：函数作用域

在函数内部声明智能在函数内部访问

1.3:块级作用域

ES6添加了let 、 const关键字与var（函数作用域）不同，在大括号中使用let 、 const声明的变量存在于块级作用域中，在大括号外不可访问

特性	`var`	`let`	`const`
作用域	函数作用域或全局作用域	块级作用域	块级作用域
提升	会提升，但不执行初始化	会提升，但存在暂时性死区	会提升，但存在暂时性死区
重复声明	允许重复声明	不允许重复声明	不允许重复声明
重新赋值	允许重新赋值	允许重新赋值	不允许重新赋值（*）

1. 作用域（Scope）

var

声明的变量具有**函数作用域（Function Scope）**或全局作用域。如果在函数外部使用 var，变量将具有全局作用域；在函数内部使用 var，变量将属于函数作用域。

JavaScript复制
```
function testVar() {
    var a = 10;
    if (true) {
        var a = 20; // 在函数作用域里重写 a
        console.log(a); // 输出：20
    }
    console.log(a); // 输出：20
}
testVar();
```

let 和 const

声明的变量具有块级作用域（Block Scope） ，即在 {} 包围的块（如条件语句、循环、函数等）内部有效。

JavaScript复制

function testBlock() {
    let b = 10;
    if (true) {
        let b = 20; // 在块级作用域里重新定义 b
        console.log(b); // 输出：20
    }
    console.log(b); // 输出：10
}
testBlock();

const c = 30;
// 在块外访问 c 有效
if (true) {
    const c = 40; // 重新定义 c，仅在块内有效
    console.log(c); // 输出：40
}
console.log(c); // 输出：30

2. 变量提升（Hoisting）

var

声明的变量会被提升到其作用域的顶部，但初始化不会被提升 。这会导致变量在声明前可以访问（但值为 undefined）。

JavaScript复制
```
console.log(x); // 输出：undefined
var x = 10;
```
let 和 const

声明的变量也会被提升，但它们在声明前访问会抛出 ReferenceError，因为它们存在"暂时性死区"（Temporal Dead Zone）。

JavaScript复制
```
console.log(y); // 抛出 ReferenceError
let y = 20;

console.log(z); // 抛出 ReferenceError
const z = 30;
```

3. 重复声明（Redeclaration）

var

允许重复声明同一个变量。

JavaScript复制

var a = 10;
var a = 20; // 不会报错，值被覆盖
console.log(a); // 输出：20

let 和 const
不允许重复声明同一个变量。

JavaScript复制

let b = 10;
let b = 20; // 抛出 SyntaxError: Identifier 'b' has already been declared

const c = 30;
const c = 40; // 抛出 SyntaxError

4. 是否可修改（Reassignment）

var 和 let

声明的变量可以重新赋值。

JavaScript

var a = 10;
a = 20; // 允许
console.log(a); // 输出：20

let b = 10;
b = 20; // 允许
console.log(b); // 输出：20

const

声明的变量是一个常量，不能重新赋值。

JavaScript复制
```
const c = 10;
c = 20; // 抛出 TypeError: Assignment to constant variable.
```
例外情况 ：如果 const 声明的值是对象或数组，其属性或元素可以修改，但不能重新赋值整个变量。

JavaScript

  const obj = { name: 'Alice' };
  obj.name = 'Bob'; // 允许，修改对象属性
  console.log(obj.name); // 输出：Bob

  const arr = [1, 2];
  arr.push(3); // 允许，修改数组
  console.log(arr); // 输出：[1,2,3]

  arr = [4,5]; // 抛出 TypeError