返回

抽丝剥茧JavaScript作用域， 纵览JavaScript世界变量与函数的范围

前端

在JavaScript的浩瀚世界中，作用域犹如一道无形的界限，将变量和函数划分出泾渭分明的疆域。只有理解了作用域的奥秘，你才能纵览JavaScript代码运行的逻辑，纵横驰骋于代码的海洋。

理解作用域之前先看一下变量和函数

变量和函数都有一定的访问权限，只有满足条件或处于某个范围之内才能访问，这个范围就是作用域。它具体表现形式就是一段特定的代码，在该代码段中的变量和函数是封闭的、独立的，这样变量才不会泄露、污染。作用域一共有三种，分别为全局作用域、函数作用域和块级作用域。

全局作用域

全局作用域是JavaScript的根作用域，在任何地方都能访问到的变量和函数都属于全局作用域。全局作用域中的变量和函数可以使用var、let、const来声明。例如：

var globalVariable = 10;
function globalFunction() {
  console.log("This is a global function");
}

函数作用域

函数作用域是函数内部的作用域，在函数内部声明的变量和函数只能在该函数内部访问。函数作用域中的变量和函数可以使用var、let、const关键字来声明。例如：

function myFunction() {
  var localVariable = 20;
  function innerFunction() {
    console.log("This is an inner function");
  }
}

块级作用域

块级作用域是使用花括号{}括起来的一段代码块的作用域，在块级作用域中声明的变量和函数只能在该块级作用域内部访问。块级作用域中的变量和函数可以使用let和const关键字来声明。例如：

{
  let blockVariable = 30;
  const blockFunction = () => {
    console.log("This is a block function");
  };
}

作用域链

作用域链是一个作用域到父作用域的引用链，当一个变量或函数在当前作用域中找不到时，就会沿着作用域链向上查找，直到找到该变量或函数。例如：

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

在上面的代码中，innerFunction()函数在查找localVariable变量时，首先会在innerFunction()函数的作用域中查找，由于找不到，它会沿着作用域链向上查找，在myFunction()函数的作用域中找到了localVariable变量，并将其输出。

理解JavaScript的作用域及其与变量、函数的关系对于编写健壮、可维护的代码至关重要。通过掌握作用域的知识，你可以避免变量和函数之间的冲突，并确保代码的正确运行。