9

代码属于 javascriptissexy.com 我的问题是为什么调用 mjName ("Jackson") 会返回“这个名人是 Michael Jackson”？是否总是在任何外部函数中给出的第二个参数对 js = 内部函数参数说？有人可以详细解释整个概念吗？

function celebrityName (firstName) {
    var nameIntro = "This celebrity is ";
// this inner function has access to the outer function's variables, including the parameter
    function lastName (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return lastName;
}

var mjName = celebrityName ("Michael");
    // At this juncture, the celebrityName outer function has returned.

// The closure (lastName) is called here after the outer function has returned above
// Yet, the closure still has access to the outer function's variables and parameter
mjName ("Jackson"); // This celebrity is Michael Jackson
4

3 回答 3

18

OP要求详细解释整个概念。这里的尝试是描述发生闭包所必需的核心元素。

我认为与来自 javascriptissexy 的示例混淆的部分原因在于，这些函数的名称并不能清楚地代表它们应该做什么，尤其是对于不熟悉 javascript 或一般新编码的人来说。

让我们从讨论范围开始：

在 Javascript 中，每个函数都创建自己的本地范围或内存空间。这称为词法作用域。此内存空间存储函数参数中的所有变量以及函数体中（大括号内）声明的变量和表达式。

从 javascriptissexy 的示例中可以看出，我们可以嵌套函数。由于每个函数都创建了自己的本地范围，我们需要了解这些范围如何相互关联和交互。范围可以具有三种不同类型的关系。

我鼓励您在浏览器开发控制台中测试所有这些代码片段：

子作用域可以访问其父母（以及祖父母、曾祖父母等）的作用域变量

    function parent() {

        var parentAsset = 'The Minivan'

        function child() {

            //child has access to parent asset

            console.log(parentAsset);

        }

        // call child function

        child();
    }

    parent();  // 'The Minivan'

父作用域无权访问其子作用域变量

    function parent() {

        function child() {

            var childAsset = 'Mp3 Player'

        }

        //parent can't get childAsset

        console.log(childAsset);

    }

    parent();   // ReferenceError childAsset not defined

同级作用域不能访问彼此的作用域变量

    function childOne() {

        var childOneAsset = 'Iphone'

    }

    function childTwo() {

        console.log(childOneAsset);

    }

    childTwo();  // ReferenceError childOneAsset not defined

好的，回到OP提到的功能。让我们尝试用更好的名称重新制作这个函数。我正在向第一个示例函数添加一个变量以显示一个点。

getFirstName('Michael') 以下是您在以下示例中调用时发生的 4 件事：

  1. 在此函数中，变量firstName设置为“Michael”
  2. varnameIntro将其设置为值“这个名人是”
  3. varunusedString设置为值“此字符串将被垃圾收集”
  4. 函数introduceCelebrity被声明

  5. 函数introduceCelebrity返回

    function getFirstName (firstName) {

    var nameIntro = "This celebrity is ";
    var unusedString = "This string will be garbage collected";

    function introduceCelebrity (lastName) {
        return nameIntro + firstName + " " + lastName;
    }

    return introduceCelebrity;
}

var mjName = getFirstName('Michael');

你可能已经知道了。

这里有一些有趣的事情需要注意：

  • 该函数除了设置它们的值之外getFirstName什么也不做firstName。nameIntro所以那里没有魔法。
  • 子函数introduceCelebrity 引用这两个变量。如前所述，它可以做到这一点，因为子作用域可以访问父作用域变量。这是关闭的第一个重要步骤。
  • 然后返回该introduceCelebrity函数（但不执行），大概是为了我们可以在以后调用它。这是关闭的第二步。
  • 因为引用父范围变量，并且我们返回整个函数，所以即使在函数返回 introduceCelebrity之后，javascript 运行时也会维护指向这些变量的指针。getFirstName
  • 因为该指针存在，垃圾收集器不理会这些变量。如果这些指针不存在，垃圾收集器将通过并清理这些内存地址，并且这些值将无法访问。
  • 该unusedString变量未在子函数中引用，因此它被垃圾收集并且不再可用。

那么让我们再看一下代码：

function getFirstName (firstName) {

    var nameIntro = "This celebrity is ";

    function introduceCelebrity (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return introduceCelebrity;
}

var mjName = getFirstName('Michael');

当这段代码执行时，我们基本上是这样做的： 

var mjName = function(theLastName) {
    return nameIntro + firstName + " " + theLastName;
}

这有什么特别之处？关闭在哪里？

因为我们的getFirstName函数已经被执行，我们可能会认为整个事情已经连同它的局部变量或资产一起消失了。 这是不正确的。

我们通过在子函数中引用父作用域变量并返回子函数来创建闭包。所以真的，上面代码的新范围实际上看起来更像这样：

var nameIntro = "This celebrity is ";

var firstName = "Michael"

var mjName = function(theLastName) {
    return nameIntro + firstName + " " + theLastName;
}

看看我们现在如何nameIntro以及firstName现在可以使用？ 那是因为我们创造了闭包。

所以现在我们调用mjName：

mjName('Jackson');  // 'This celebrity is Michael Jackson'

我们得到了预期的结果。

等等，最后一件事！

为了真正深入人心，让我们将我们的示例与稍作修改的示例进行比较。

注意原始函数是嵌套的。 闭包只发生在嵌套函数中。 

function getFirstName (firstName) {

    var nameIntro = "This celebrity is ";

    function introduceCelebrity (theLastName) {
        return nameIntro + firstName + " " + theLastName;
    }
    return introduceCelebrity;
}

var mjName = getFirstName('Michael');

让我们尝试删除该嵌套：

function getFirstName (firstName) { 
    var nameIntro = "This celebrity is ";
}

function introduceCelebrity (theLastName) {
    return nameIntro + firstName + " " + theLastName;
}

var mjName = getFirstName('Michael');
introduceCelebrity('Jackson');  

// ReferenceError: nameIntro is not defined

这行得通吗？

不，它不会。因为兄弟作用域不能访问彼此的变量。

那么我们如何在没有关闭的情况下让它工作呢？

  1. getFirstName必须使用我们的变量返回一个对象或数组
  2. 我们必须设置getFirstName('Michael')为一个全局变量mjName

  3. 调用introduceCelebrity('Jackon')，传入我们的值mjName

    function getFirstName (firstName) { 

    var nameIntro = "This celebrity is ";

    return {
        firstName: firstName,
        nameIntro: nameIntro
    }
}

var mjName = getFirstName('Michael');  // returns our object

function introduceCelebrity (theLastName, firstName, nameIntro) {
    return nameIntro + firstName + " " + theLastName;
}

introduceCelebrity('Jackson', mjName.firstName, mjName.nameIntro);  

// 'This celebrity is Michael Jackson'
于 2015-04-17T20:44:34.570 回答
14

该函数被评估为celebrityName ("Michael")("Jackson");

脚步 ：

  1. 名人名（“迈克尔”）返回函数lastName（theLastName）
  2. ("Jackson") 被传递给函数 lastName
  3. 函数 lastName(theLastName) 在执行时打印字符串

从左到右的参数从外部到内部调用方法。

于 2013-09-06T10:35:24.820 回答
1

有了这个电话

var mjName = celebrityName ("Michael");

您创建一个自定义函数，该函数将firstName变量绑定到"Michael". 此函数由 .返回给您celebrityName()。

当您再次调用返回的函数时，您lastName也会绑定，这会导致您的输出。

如果要绑定另一个名字，则必须celebrityName()再次调用。

var michaelName = celebrityName( "Michael" );
var davidName =   celebrityName( "David" );

michaelName( "Jackson" ); // yields "This celebrity is Michael Jackson"
davidName( "Duchovny" );  // yields "This celebrity is David Duchovny"
于 2013-09-06T10:17:20.923 回答