javascript - javascript中的词法范围参数

Question

通过 Javascript Koans 工作，我对以下代码很感兴趣:

    it("should use lexical scoping to synthesise functions", function () {

function makeMysteryFunction(makerValue)
{
  var newFunction = function doMysteriousThing(param)
  {
    return makerValue + param;
  };
  return newFunction;
}

var mysteryFunction3 = makeMysteryFunction(3);
var mysteryFunction5 = makeMysteryFunction(5);

expect(mysteryFunction3(10) + mysteryFunction5(5)).toBe(FILL_ME_IN);
});

它得到 23，这很好。我感到困惑的是，赋予“mysteryFunction3”变量的参数如何/为什么作为“param”传递给 doMysteriousThing 函数。

如果有一个内部函数和一个外部函数，每个函数都接受一个参数，那么在给定指定参数的情况下定义一个等于外部函数的变量是否只是生活中的一个事实，例如:

    var mysteryFunction3 = makeMysterFunction(3);

将使它发送一个参数到外部函数的变量实例，如:

   mysteryFunction3(10)

会导致参数 (10) 被读取为内部函数的参数吗？

Answer 1

起初我也很难理解这一点。这就是我一击一击达到清晰度的方式。这是我关于堆栈的第一篇文章，请原谅我啰嗦。

让我们来看一个返回字符串的非常基本的函数:

function fun() {
       return 'Hi!';
    }

如果我们在没有调用括号的情况下记录上述函数，控制台只会记录对该函数的引用:

console.log(fun); //logs ---> [Function: fun] 

如果我们再次记录它，但带有调用括号:

console.log(fun()); //logs ---> Hi!

函数的调用等于它的返回值:

console.log(fun() === 'Hi!'); //logs ---> true

因此，在此基础上，让我们重写我们的函数，在其中声明另一个返回字符串的函数。外部函数将返回内部函数的调用:

function funAgain() {
   function innerFun() {
     return 'Hello there!';
   }
   return innerFun();
}

所以在 funAgain 的范围内(innerFun() === 'Hello there!')计算结果为真，所以当我们将 funAgain 的调用记录到控制台时:

console.log(funAgain()); //logs ---> 'Hello there!'

但是，如果我们在外部函数的返回语句中省略了 innerFun 的调用括号呢？

function funAgain() {
  function innerFun() {
    return 'Hello there!';
  }
  return innerFun;
}

console.log(funAgain()); //logs [Function: innerFun]

函数 ITSELF 被返回。虽然这实际上不是全部，但我们可以想到 (funAgain() === innerFun) 显然，由于范围问题，您实际上无法在实践中运行此比较(innerFun 不能在调用 funAgain 之外存在) .但!让我们暂时这样想。这意味着如果我们在变量中捕获 funAgain 的返回值:

var innerFunCaptured = funAgain();

console.log(innerFunCaptured); // logs [Function: innerFun]

从概念上讲，我们有 (innerFunCaptured === innerFun) ...

现在我们的变量已绑定(bind)到内部函数，我们可以通过向变量添加括号来调用该内部函数。

console.log(innerFunCaptured()); //logs ---> 'Hello there!'

当我在谈论上面的“整个故事”时，我遗漏了内部函数对变量的绑定(bind)是外部函数调用的结果，所以实际上绑定(bind)不仅包括 innerFun 本身，还包括它在其中创建的环境包括通过调用外部函数传递的任何潜在参数，这使我们能够...

再次重写外部和内部函数，使它们现在具有交互的参数:

function funOnceMore(greetingPartOne) {
  function innerFun(greetingPartTwo) {
    return greetingPartOne + ' ' + greetingPartTwo;
  }
  return innerFun;
}

如果我们用参数记录 funOnceMore 会怎么样。

console.log(funOnceMore('Hello')) //logs ---> [Function: innerFun]

再次返回 innerFun 本身。但是我们传递的参数 greetingPartOne 呢？好吧，它顺利通过了，但是由于从未在 funOnceMore 中调用 innerFun，因此从未以任何有意义的方式使用过 greetingPartOne。我们必须弄清楚如何调用 innerFun!答案:我们需要像上一步一样将它绑定(bind)到一个变量。

var innerFunCapturedAgain = funOnceMore('Hello')

现在 innerFunCapturedAgain 保存 innerFun 和 funOnceMore 的环境以及我们传递给它的参数“Hello”。

现在我们可以通过在 innerFunCapturedAgain 上加上圆括号来调用 innerFun，这些圆括号将封装我们传递给 innerFun 的 greetingPartTwo 的参数。

console.log(innerFunCapturedAgain('there!')) //logs ---> 'Hello there!'