JS变量作用域及可访问性的探讨

在JavaScript中，变量的作用域和可访问性是非常重要的概念。了解这些概念可以帮助我们编写更具可维护性和可扩展性的代码。本攻略将详细讲解JavaScript中的变量作用域和可访问性，并提供两个示例来说明这些概念。

1. 变量作用域

变量作用域指的是变量在代码中的可见范围。在JavaScript中，有三种变量作用域：全局作用域、函数作用域和块级作用域。

• 全局作用域：在代码的任何地方都可以访问到的变量被称为全局变量。全局变量在整个程序中都是可见的。

示例1：

var globalVariable = 10;

function foo() {
  console.log(globalVariable); // 输出 10
}

foo();

• 函数作用域：在函数内部定义的变量只能在函数内部访问，函数外部无法访问到函数内部的变量。

示例2：

function bar() {
  var localVariable = 20;
  console.log(localVariable); // 输出 20
}

bar();
console.log(localVariable); // 报错，localVariable未定义

• 块级作用域：在ES6中引入了块级作用域，使用let或const关键字声明的变量只在当前块级作用域内有效。

示例3：

if (true) {
  let blockVariable = 30;
  console.log(blockVariable); // 输出 30
}

console.log(blockVariable); // 报错，blockVariable未定义

2. 变量的可访问性

变量的可访问性指的是在代码中能否访问到某个变量。在JavaScript中，变量的可访问性受到作用域链的影响。

作用域链是一个由多个执行上下文对象组成的链表，每个执行上下文对象都包含了当前作用域中的变量和函数。当访问一个变量时，JavaScript引擎会从当前作用域开始查找，如果找不到则会向上一级作用域继续查找，直到找到该变量或者到达全局作用域。

示例4：

var globalVariable = 10;

function outer() {
  var outerVariable = 20;

  function inner() {
    var innerVariable = 30;
    console.log(innerVariable); // 输出 30
    console.log(outerVariable); // 输出 20
    console.log(globalVariable); // 输出 10
  }

  inner();
}

outer();

在示例4中，inner函数可以访问到内部变量innerVariable、外部变量outerVariable和全局变量globalVariable，因为它们都在作用域链上。

结论

通过本攻略，我们了解了JavaScript中变量作用域和可访问性的概念。全局作用域中的变量在整个程序中都是可见的，函数作用域中的变量只能在函数内部访问，块级作用域中的变量只在当前块级作用域内有效。变量的可访问性受到作用域链的影响，JavaScript引擎会从当前作用域开始查找变量，直到找到或者到达全局作用域。

希望本攻略对你理解JavaScript中的变量作用域和可访问性有所帮助！