JS中如何在另一个函数中调用一个函数

作者

在另一个函数中调用一个函数

How to call a Function inside another Function in JS

要在另一个函数中调用一个函数，请在外部函数中定义内部函数并调用它。使用function关键字时，函数会被提升到作用域的顶部，并且可以从外部函数内部的任何位置调用。

索引.js
function outerFunc(a, b) {
  function innerFunc(a, b) {
    return a + b;
  }

  const result = innerFunc(a, b);

  return result;
}

console.log(outerFunc(10, 10)); // 👉️ 20
console.log(outerFunc(10, 20)); // 👉️ 30

下面的例子展示了我们如何在声明之前调用内部函数。这是因为
提升在 JavaScript 中的工作方式。

索引.js
function outerFunc() {
  const num1 = 5;
  const num2 = 10;

  // 👇️ call inner function before it's declared
  const result = innerFunc();

  function innerFunc() {
    return num1 + num2;
  }

  return result;
}

console.log(outerFunc()); // 👉️ 15

这仅适用于使用function关键字声明的函数（不适用于箭头函数）。

您可以想象函数的声明被提升到范围的顶部，因此可以从范围内的任何地方调用它。

另一种方法是从外部函数返回内部函数。

索引.js
function outerFunc() {
  function innerFunc(a, b) {
    return a + b;
  }

  return innerFunc;
}

const innerFunc = outerFunc();

console.log(innerFunc(2, 3)); // 👉️ 5
console.log(innerFunc(3, 3)); // 👉️ 6

请注意，我们没有使用括号()来调用外部函数中的内部函数。

我们没有调用它就返回了函数。换句话说，我们返回了对内部函数的引用，而不是调用它的结果。

这允许我们根据需要多次调用内部函数，每次都传递不同的参数。

在这种情况下最有用的是内部函数在调用之间记住在外部函数中声明的变量。

索引.js
function outerFunc() {
  const z = 100;

  function innerFunc(a, b) {
    return a + b + z;
  }

  return innerFunc;
}

const innerFunc = outerFunc();

console.log(innerFunc(2, 3)); // 👉️ 105
console.log(innerFunc(3, 3)); // 👉️ 106

请注意，内部函数会记住z两次调用之间的变量值。

这个概念
在 JavaScript中称为闭包。

内部函数与其周围状态的引用捆绑在一起。

这意味着内部函数可以随时访问在外部函数范围内声明的变量。

这在许多不同的场景中都很有用。例如，您可以将参数传递给外部函数，它会记住任何内部函数调用。

索引.js
function outerFunc(a) {
  function innerFunc(b, c) {
    return a + b + c;
  }

  return innerFunc;
}

const innerFunc = outerFunc(10);

console.log(innerFunc(1, 1)); // 12
console.log(innerFunc(1, 2)); // 13

我们10作为参数传递给外部函数并将结果存储在变量中。

innerFunc变量存储对函数的引用，innerFunc其中a变量指向 的值10。

现在我们可以10在调用内部函数时省略参数。

–