JavaScript 作用域

在 JavaScript 中，作用域（Scope）指的是变量和函数在代码中可访问的区域。理解 JavaScript 的作用域是理解其工作原理和避免常见问题的关键之一。

全局作用域（Global Scope）

全局作用域是指在代码的任何地方都能访问的变量和函数。在浏览器环境中，全局作用域通常是 window 对象。

// 全局作用域中声明变量
let globalVariable = 'Global';
function globalFunction() {
  console.log('Hello from global function!');
}

函数作用域（Function Scope）

函数作用域指的是在函数内声明的变量和函数只能在该函数内部访问。这意味着函数外部无法访问函数内部的变量。

function myFunction() {
  let localVar = 'Local';
  console.log(localVar); // 在函数内部可以访问 localVar
}
console.log(localVar); // 错误！无法在函数外部访问 localVar

块级作用域（Block Scope）

ES6 引入了 let 和 const 关键字，允许在任意代码块（如 if、for、while 等）内创建块级作用域。块级作用域内声明的变量在块级作用域外部是不可访问的。

if (true) {
  let blockVar = 'Block Scoped';
  console.log(blockVar); // 可以在块级作用域内访问 blockVar
}
console.log(blockVar); // 错误！无法在块级作用域外部访问 blockVar

作用域链（Scope Chain）

作用域链是指在嵌套的函数中，内部函数可以访问外部函数定义的变量和函数。JavaScript 的作用域链是由函数声明时定义的作用域决定的，而不是调用时。

let outerVar = 'Outer';
function outerFunction() {
  let innerVar = 'Inner';
  function innerFunction() {
    console.log(outerVar); // 可以访问外部函数的变量 outerVar
    console.log(innerVar); // 可以访问本函数作用域的变量 innerVar
  }
  innerFunction();
}
outerFunction();

this 关键字的作用域

this 关键字在 JavaScript 中指向当前执行代码的对象。它的值取决于函数被调用的方式。在全局作用域中，this 指向全局对象（如 window）。在函数内部，this 的值取决于函数的调用方式：在普通函数中，this 指向调用该函数的对象；在箭头函数中，this 继承自外层作用域。

let obj = {
  name: 'Jerry',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};
obj.sayHello(); // 输出: Hello, John
let sayFunc = obj.sayHello;
sayFunc (); // 输出: Hello, undefined （this 指向全局对象，全局对象中没有 name 属性）

总结

JavaScript 的作用域决定了变量和函数的可访问性和生命周期。全局作用域包含所有的代码，函数作用域包含在函数内部定义的变量和函数，块级作用域在 ES6 中引入，允许更细粒度的作用域控制。作用域链决定了函数内部对外部变量的访问方式，而 this 关键字的值取决于函数的调用方式和上下文。理解这些概念有助于编写更清晰、健壮的 JavaScript 代码。