面试题：JavaScript中块级作用域与函数作用域的区别

Question

请详细阐述JavaScript中块级作用域（ES6引入的let和const形成的作用域）和函数作用域（传统function定义形成的作用域）在变量声明、访问规则以及变量提升方面有哪些区别，并举例说明。

Answer 1

变量声明

• 块级作用域（let/const）：
  • 使用let和const声明的变量只在其所在的块级作用域内有效，块级作用域由{}界定，比如if语句块、for循环块等。例如：

{
  let a = 10;
  const b = 20;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: b is not defined

• 函数作用域（function）：
  • 使用function声明的函数，其内部声明的变量在整个函数作用域内有效，函数作用域由函数的{}界定。例如：

function func() {
  var c = 30;
}
console.log(c); // ReferenceError: c is not defined

访问规则

• 块级作用域（let/const）：
  • 块级作用域内声明的变量不能在外部访问，并且在同一作用域内不能重复声明。例如：

let x = 5;
{
  let x = 10; // 合法，新的块级作用域内的x
  console.log(x); // 10
}
console.log(x); // 5

• 如果在同一作用域内重复声明let或const变量会报错：

let y = 1;
let y = 2; // SyntaxError: Identifier 'y' has already been declared

• 函数作用域（function）：
  • 函数作用域内声明的变量可以在函数内部任何地方访问，函数内部声明的变量会覆盖外部同名变量。例如：

var outer = 10;
function myFunc() {
  var outer = 20;
  console.log(outer); // 20
}
myFunc();
console.log(outer); // 10

变量提升

• 块级作用域（let/const）：
  • 不存在变量提升。在声明变量之前使用会导致“暂时性死区”错误。例如：

console.log(z); // ReferenceError: Cannot access 'z' before initialization
let z = 25;

• 函数作用域（function）：
  • 使用var声明的变量存在变量提升，即变量声明会被提升到函数作用域的顶部，但变量赋值不会提升。例如：

console.log(a); // undefined
var a = 15;

• 函数声明也存在提升，并且函数声明的提升优先级高于变量声明。例如：

func(); // 输出 'Hello'
function func() {
  console.log('Hello');
}
var func;