JavaScript 中的作用域

在 JavaScript 中有，全局作用域，函数作用域和块级作用域。

全局作用域

全局作用域是最外层的作用域，在代码的任何位置上都能够访问到。

var scope = 'window'
function foo() {
  console.log(scope)
  // window
}
foo()
console.log(scope) // window

在上述代码中，我们在函数中声明了一个变量 scope ，在全局作用域和函数作用域中都可以访问到。

函数作用域

创建一个函数，就会创建对应函数的作用域。在函数的外部，无法直接访问函数内部的变量。

function foo() {
  var scope = 'functionScope'
  console.log(scope)
  // functionScope
}
foo()
console.log("out foo", scope)
// Uncaught ReferenceError: scope is not defined

在上述代码中，我们在函数中声明了一个变量 scope ，在函数外访问它，是访问不到的，同时报了一个错误。

块级作用域

使用let 和 const 会形成块级作用域，在块级作用域的外部，无法直接访问块内部的作用域。

{
  let scope= 'letScope'
}
console.log(scope)
// Uncaught ReferenceError: scope is not defined

在上述代码中，我们在大括号中用 let 声明了一个变量 scope ，在大括号外访问它，是访问不到的，同时报了一个错误。

作用域链

当查找一个变量时，会在当前的作用域中查找，如果当前作用域中没有找到，则往上一层的作用域中查找，直到全局作用域中，（如果在全局作用域中没有找到，通常会报错），这就形成了作用域链。

在编译阶段，会创建并保存指向上一级的作用域，作用域是在创建的时候确立的，我们来看一个例子。

var scope = 'window'
function bar() {
  var scope = 'bar'
  function foo() {
    console.log(scope) // bar
  }
  foo()
}
bar()

foo 的上一级作用域是函数 bar 的作用域，当执行 foo 函数，函数中没有找到定义的 scope 变量，会向上一层的作用域中查找，找到变量 scope 的值为 ‘bar’，因此打印出 bar。

我们改变下 foo 函数定义的位置，在全局作用域中定义 foo 函数，因此它的上一层作用域是全局作用域。

var scope = "window";
function foo() {
  console.log(scope); 
  // window
}
function bar() {
  var scope = "bar";
  foo(); 
}
bar();

在 bar 函数中执行 foo 函数，函数中没有找到定义的 scope 变量，会向上一层的作用域中，即全局作用域中查找，找到变量 scope 的值为 ‘window’，因此打印出 'window。

通过以上两个我们可知，函数作用域是在代码编译阶段执行的，不会随代码的执行，动态的改变。

以上就是有关作用域的分享，希望对大家有所帮助。