函数作用域, 块级作用域和词法作用域

在 JavaScript 中，函数作用域、块级作用域和词法作用域是关于变量可见性和访问权限的概念。

函数作用域

函数作用域（Function Scope）是指变量的可见性仅限于定义它们的函数内部。这意味着在函数内部定义的变量在函数外部是不可访问的，而在函数内部定义的变量可以在整个函数范围内使用。这种作用域规则使得函数内部的变量对外部是隐藏的，外部无法直接访问或修改。 示例代码：

function foo() {
  var x = 10; // 在函数作用域内定义变量x
  console.log(x); // 输出：10
}

console.log(x); // 报错，x 不在函数作用域之外可见

块级作用域

块级作用域（Block Scope）指变量的可见性仅限于定义它们的块（通常是由一对花括号 {} 包裹的代码块）内部。在 JavaScript 之前，JavaScript 只有函数作用域，并没有块级作用域。但从 ES6（ECMAScript 2015）开始，引入了 let 和 const 关键字，使得可以在块级作用域中声明变量。 示例代码：

function foo() {
  if (true) {
    var x = 10; // 在块级作用域内定义变量x（ES6之前使用var）
    let y = 20; // 在块级作用域内定义变量y（ES6引入的let）
    const z = 30; // 在块级作用域内定义常量z（ES6引入的const）
    console.log(x, y, z); // 输出：10 20 30
  }
  
  console.log(x); // 输出：10，x在函数作用域内可见
  console.log(y); // 报错，y不在块级作用域之外可见
  console.log(z); // 报错，z不在块级作用域之外可见
}

词法作用域

词法作用域（Lexical Scope）是指变量的可见性由它们在代码中的位置决定，与函数被调用的位置无关。在 JavaScript 中，函数的作用域是在函数定义时确定的，而不是在函数调用时确定的。这意味着函数可以访问其定义时所处的作用域内的变量。 示例代码：

var x = 10;

function foo() {
  console.log(x); // 输出：10，函数foo在全局作用域内定义，可以访问全局变量x
}

function bar() {
  var x = 20;
  foo(); // 调用函数foo
}

bar();

在上述示例中，函数 foo 在全局作用域内定义，可以访问全局变量 x，即使在函数 bar 内部定义了同名的局部变量 x，但函数 foo 仍然输出全局变量 x 的值。

总结

• 函数作用域是指变量的可见性仅限于定义它们的函数内部；
• 块级作用域是指变量的可见性仅限于定义它们的块内部；
• 词法作用域是指变量的可见性由它们在代码中的位置决定，与函数被调用的位置无关。

这些作用域规则使得 JavaScript 中的变量具有不同的可见性和访问权限，提供了灵活的变量管理机制。