JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

JavaScript中最容易混淆的作用域、提升、闭包知识详解

作用域

JavaScript采用词法作用域，即函数的作用域在函数定义时就已经确定了，不会随着函数调用的位置改变。因此，JavaScript中存在全局作用域和函数作用域。

全局作用域

全局作用域是指在代码的任何位置都可以访问的变量、函数和对象，它是在所有函数外部定义的作用域。

以下是一个示例，全局作用域中定义了一个变量globalVar和一个函数globalFunction：

var globalVar = "I am global";
function globalFunction() {
  console.log("I am in the global scope.");
}

函数作用域

函数作用域是指在函数内部定义的变量或函数只能在该函数内部访问，函数作用域有助于保护变量和函数不受外界的干扰。

以下是一个示例，函数作用域中定义了变量localVar和函数localFunction，它们只能在该函数内部访问：

function myFunction() {
  var localVar = "I am local";
  function localFunction() {
    console.log("I am in the local scope.");
  }
}

提升

JavaScript中的变量和函数可以在声明之前使用，这是因为JavaScript中存在变量和函数的提升。

变量提升

变量提升是指在代码中变量定义之前可以使用变量的现象，它是通过将变量的声明提升到代码的顶部实现的。

以下是一个示例，变量myVar在定义之前使用，但不会报错，因为它已经被提升了：

console.log(myVar); // 输出：undefined
var myVar = 1;

函数提升

函数提升是指在代码中函数定义之前可以使用函数的现象，它是通过将函数的声明提升到代码的顶部实现的。

以下是一个示例，函数myFunction在定义之前使用，但不会报错，因为它已经被提升了：

myFunction(); // 输出：I am my function.
function myFunction() {
  console.log("I am my function.");
}

闭包

闭包是指函数能够访问定义在其外部作用域的变量的现象，它存在于JavaScript采用词法作用域的特性中。

以下是一个示例，函数outerFunction定义了变量outerVar和函数innerFunction，函数innerFunction可以访问变量outerVar，因为它定义在outerFunction的作用域内：

function outerFunction() {
  var outerVar = "I am outer";
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}

var fn = outerFunction();
fn(); // 输出：I am outer

在该示例中，通过将outerFunction的返回值innerFunction赋值给变量fn，使得函数innerFunction成为了一个闭包，它可以在outerFunction的作用域外部被调用，并访问变量outerVar的值。