JS 函数嵌套函数|极客笔记

JS 函数嵌套函数

在 JavaScript 中，函数可以被嵌套在其他函数内部。这意味着你可以在一个函数内部定义另一个函数，并且该内部函数可以访问外部函数的变量，参数和其他内部函数。函数嵌套可以使代码更加模块化和可读性更强，同时也能增加代码的灵活性。

为什么要使用函数嵌套

函数嵌套可以帮助我们更好地组织代码，将功能拆分成更小的模块，使得代码更易于维护和扩展。另外，函数嵌套还可以减少全局变量的污染，因为嵌套函数可以访问外部函数中的变量而无需将其暴露在全局作用域中。

下面我们来看一个简单的示例，演示函数嵌套如何工作：

function outerFunction() {
  let outerVar = 'I am from outer function';

  function innerFunction() {
    let innerVar = 'I am from inner function';
    console.log(outerVar); // 可以访问外部函数的变量
    console.log(innerVar);
  }

  innerFunction();
}

outerFunction();

上面的示例展示了一个外部函数 outerFunction 内包含一个内部函数 innerFunction，并且内部函数可以访问外部函数的变量。当调用 outerFunction 时，内部函数 innerFunction 也会被执行，并打印出外部变量 outerVar 和内部变量 innerVar 的值。

运行上面的代码，控制台会输出如下结果：

I am from outer function
I am from inner function

通过这个简单的示例，我们看到函数嵌套的威力，内部函数可以访问外部函数的变量，从而实现更复杂的逻辑和功能。

闭包

函数嵌套还引入了一个非常重要的概念——闭包。当内部函数访问外部函数的变量时，这些变量的作用域会被保持在内存中，即使外部函数执行完毕后，内部函数仍然可以访问这些变量。这种行为称为闭包。

闭包可以帮助我们实现一些高阶函数、函数工厂和模块化编程等实践，使得 JavaScript 变得更加强大和灵活。

下面让我们看一个闭包的示例：

function createCounter() {
  let count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

let counter = createCounter();
counter();
counter();

在上面的示例中，我们定义了一个外部函数 createCounter，内部函数 increment 实现了计数器的功能。createCounter 函数将 increment 函数作为返回值返回，赋值给变量 counter。通过执行 counter 函数，我们可以实现计数器的功能。

运行上面的代码，控制台会输出如下结果：

1
2

通过闭包，内部函数 increment 可以访问外部函数 createCounter 中的变量 count，实现了计数器的功能。

函数嵌套与作用域

在 JavaScript 中，函数的作用域是词法作用域，即函数在定义时所处的作用域就是其能访问的变量和作用域。这也就是为什么嵌套函数可以访问外部函数的变量。

在函数嵌套时，内部函数可以访问外部函数的变量，但外部函数无法访问内部函数的变量。这种规则保证了数据的隐私性和安全性，防止外部函数意外篡改内部函数的变量。

下面让我们通过一个示例来演示函数作用域和函数嵌套：

function outerFunction() {
  let outerVar = 'I am from outer function';

  function innerFunction() {
    let innerVar = 'I am from inner function';
    console.log(outerVar); // 可以访问外部函数的变量
    console.log(innerVar);
  }

  // console.log(innerVar); // 无法访问内部函数的变量
  innerFunction();
}

// console.log(outerVar); // 无法访问内部函数的变量
outerFunction();

在上面的示例中，我们尝试在外部函数和全局作用域中访问内部函数的变量 innerVar 和函数 innerFunction，由于函数作用域的限制，这些尝试都会导致引用错误。