JavaScript闭包如何工作？

Question

如何向那些了解其所包含概念的人（例如函数，变量等）解释JavaScript闭包，但不了解闭包本身？

我在维基百科上看过the Scheme example，但遗憾的是它并没有帮助。

Answer 1

Answer 2

每当你在另一个函数中看到function关键字时，内部函数就可以访问外部函数中的变量。

function foo(x) {
  var tmp = 3;

  function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }

  bar(10);
}

foo(2);

这将始终记录16，因为bar可以访问被定义为x的参数的foo，并且它还可以从{{1}访问tmp }}

是 一个闭包。函数不必返回以便被称为闭包。 只需访问您的直接词法范围之外的变量即可创建一个闭包 。

foo

上述函数也会记录16，因为function foo(x) { var tmp = 3; return function (y) { console.log(x + y + (++tmp)); // will also log 16 } } var bar = foo(2); // bar is now a closure. bar(10);仍然可以引用bar和x，即使它不再直接位于范围内。

但是，由于tmp仍然在tmp的闭包内，所以它也在增加。每次拨打bar时，它都会递增。

最简单的闭包示例是：

bar

调用JavaScript函数时，会创建一个新的执行上下文。与函数参数和父对象一起，此执行上下文还接收在其外部声明的所有变量（在上面的示例中，“a”和“b”）。

可以通过返回一个闭包函数列表或将它们设置为全局变量来创建多个闭包函数。所有这些都会引用相同 var a = 10; function test() { console.log(a); // will output 10 console.log(b); // will output 6 } var b = 6; test();和相同的x，它们不会制作自己的副本。

此处数字tmp是一个字面数字。与JavaScript中的其他文字一样，当调用x时，数字foo被复制到x作为其参数foo。

另一方面，JavaScript在处理对象时总是使用引用。如果说，你用一个对象调用x，它返回的闭包将引用该原始对象！

foo

正如预期的那样，对function foo(x) { var tmp = 3; return function (y) { console.log(x + y + tmp); x.memb = x.memb ? x.memb + 1 : 1; console.log(x.memb); } } var age = new Number(2); var bar = foo(age); // bar is now a closure referencing age. bar(10);的每次调用都会增加bar(10)。可能没有预料到的是，x.memb只是引用与x变量相同的对象！拨打age几次电话后，bar将为2！此引用是HTML对象内存泄漏的基础。

Answer 3

前言：这个答案是在问题出现时写的：

  像老阿尔伯特一样说：“如果你不能解释它给一个六岁的孩子，你自己真的不明白。”我试着向27岁的朋友解释JS关闭失败。

     

有人可以认为我是6岁并且对这个主题感兴趣吗？

我很确定我是唯一一个试图从字面上解决最初问题的人之一。从那时起，这个问题已经发生了几次变异，所以我的答案现在看起来可能非常愚蠢了。空间不足。希望故事的一般概念对某些人来说仍然很有趣。

---

在解释困难的概念时，我非常喜欢类比和隐喻，所以让我尝试一下故事。

曾几何时：

有一位公主......

function princess() {

她生活在一个充满冒险的美好世界。她遇见了她的白马王子，骑着独角兽，战斗龙，遇到说话的动物，以及许多其他奇妙的东西，环绕着她的世界。

    var adventures = [];

    function princeCharming() { /* ... */ }

    var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";

    /* ... */

但她总是要回到她琐事和成年人的沉闷世界。

    return {

她会经常告诉他们最近作为公主的惊人冒险。

        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}

但他们只会看到一个小女孩......

var littleGirl = princess();

...讲述关于魔法和幻想的故事。

littleGirl.story();

尽管成年人知道真正的公主，但他们永远不会相信独角兽或龙，因为他们永远看不到它们。成年人说他们只存在于小女孩的想象中。

但我们知道真相;那个公主里面的小女孩......

......真是个公主，里面有一个小女孩。

Answer 4

认真对待这个问题，我们应该找出一个典型的6岁孩子的认知能力，尽管如此，对JavaScript感兴趣的人并不那么典型。

在Childhood Development: 5 to 7 Years 上说：

  

您的孩子将能够按照两个步骤进行操作。例如，如果您对您的孩子说：“去厨房给我一个垃圾袋”，他们就能记住这个方向。

我们可以使用此示例来解释闭包，如下所示：

  

厨房是一个具有局部变量的闭包，称为trashBags。厨房内有一个名为getTrashBag的功能，可以收到一个垃圾袋并将其退回。

我们可以用JavaScript编写代码：

function makeKitchen() {
  var trashBags = ['A', 'B', 'C']; // only 3 at first

  return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}

var kitchen = makeKitchen();

console.log(kitchen.getTrashBag()); // returns trash bag C
console.log(kitchen.getTrashBag()); // returns trash bag B
console.log(kitchen.getTrashBag()); // returns trash bag A

解释为什么闭包很有趣的其他要点：

• 每次调用makeKitchen()时，都会创建一个新的闭包，其中包含独立的trashBags。
• trashBags变量是每个厨房内部的本地变量，无法在外部访问，但getTrashBag属性上的内部函数确实可以访问它。
• 每个函数调用都会创建一个闭包，但是除非可以从闭包外部调用可以访问闭包内部的内部函数，否则不需要保持闭包。使用getTrashBag函数返回对象就可以了。

Answer 5

稻草人

我需要知道点击按钮的次数，并且每按三次点击就做一次......

相当明显的解决方案

// Declare counter outside event handler's scope
var counter = 0;
var element = document.getElementById('button');

element.addEventListener("click", function() {
  // Increment outside counter
  counter++;

  if (counter === 3) {
    // Do something every third time
    console.log("Third time's the charm!");

    // Reset counter
    counter = 0;
  }
});

<button id="button">Click Me!</button>

现在这将起作用，但它确实通过添加变量侵入外部范围，变量的唯一目的是跟踪计数。在某些情况下，这可能更好，因为您的外部应用程序可能需要访问此信息。但在这种情况下，我们只更改每个第三次点击的行为，因此最好将此功能包含在事件处理程序中。

考虑这个选项

var element = document.getElementById('button');

element.addEventListener("click", (function() {
  // init the count to 0
  var count = 0;

  return function(e) { // <- This function becomes the click handler
    count++; //    and will retain access to the above `count`

    if (count === 3) {
      // Do something every third time
      console.log("Third time's the charm!");

      //Reset counter
      count = 0;
    }
  };
})());

<button id="button">Click Me!</button>

请注意这里的一些事情。

在上面的例子中，我使用的是JavaScript的闭包行为。 此行为允许任何函数无限期地访问创建它的作用域。为了实际应用它，我立即调用一个返回另一个函数的函数，因为我返回的函数有访问内部计数变量（由于上面解释的闭包行为），这导致生成的函数使用私有范围...不是那么简单？让我们淡化它......

简单的单行关闭

//          _______________________Immediately invoked______________________
//         |                                                                |
//         |        Scope retained for use      ___Returned as the____      |
//         |       only by returned function   |    value of func     |     |
//         |             |            |        |                      |     |
//         v             v            v        v                      v     v
var func = (function() { var a = 'val'; return function() { alert(a); }; })();

返回函数之外的所有变量都可用于返回的函数，但它们不能直接用于返回的函数对象...

func();  // Alerts "val"
func.a;  // Undefined

得到它？因此，在我们的主要示例中，count变量包含在闭包中，并且始终可用于事件处理程序，因此它从单击到单击保持其状态。

此外，对于读数和分配给其私有范围变量，此私有变量状态完全可访问。

你走了;你现在完全封装了这种行为。

Full Blog Post （包括jQuery注意事项）

Answer 6

闭包很难解释，因为它们被用来做一些每个人都直觉期望工作的行为。我发现解释它们的最佳方式（以及我了解他们所做的事情的方式）是想象没有它们的情况：

    var bind = function(x) {
        return function(y) { return x + y; };
    }
    
    var plus5 = bind(5);
    console.log(plus5(3));

如果JavaScript 没有知道闭包，会发生什么？只需用它的方法体替换最后一行中的调用（基本上是函数调用的函数），然后得到：

console.log(x + 3);

现在，x的定义在哪里？我们没有在当前范围内定义它。唯一的解决方案是让plus5 携带其范围（或者更确切地说，是其父级的范围）。这样，x定义明确，并且绑定到值5。

Answer 7

这是为了澄清关于某些其他答案中出现的闭包的几个（可能的）误解。

• 不仅在返回内部函数时创建闭包。实际上，封闭函数根本不需要返回以使其闭包创建。您可以将内部函数分配给外部作用域中的变量，或者将其作为参数传递给另一个函数，可以立即或稍后调用它。因此，只要调用封闭函数，就可以创建封闭函数的闭包，因为任何内部函数都可以在封闭函数返回之前或之后调用内部函数时访问该闭包。
• 闭包不会引用其范围内变量的旧值的副本。变量本身是闭包的一部分，因此访问时看到的值其中一个变量是访问时的最新值。这就是为什么在循环内部创建的内部函数可能很棘手，因为每个函数都可以访问相同的外部变量，而不是在创建或调用函数时获取变量的副本。
• 闭包中的“变量”包括函数内声明的任何命名函数。它们还包括函数的参数。闭包还可以访问其包含闭包的变量，一直到全局范围。
• 闭包使用内存，但它们不会导致内存泄漏，因为JavaScript本身会清理自己未引用的循环结构。涉及闭包的Internet Explorer内存泄漏是在无法断开引用闭包的DOM属性值时创建的，从而维护对可能的循环结构的引用。

Answer 8

好的，6岁的封闭迷。你想听一个关闭的最简单的例子吗？

让我们想象下一个情况：司机坐在车里。那辆车在飞机内。飞机在机场。驾驶员能够接近车外的东西，但是在飞机内部，即使飞机离开机场，也是一种封闭。就是这样。当您转到27时，请查看more detailed explanation或以下示例。

以下是我如何将我的飞机故事转换为代码。

＆＃13;

＆＃13;

var plane = function(defaultAirport) {

  var lastAirportLeft = defaultAirport;

  var car = {
    driver: {
      startAccessPlaneInfo: function() {
        setInterval(function() {
          console.log("Last airport was " + lastAirportLeft);
        }, 2000);
      }
    }
  };
  car.driver.startAccessPlaneInfo();

  return {
    leaveTheAirport: function(airPortName) {
      lastAirportLeft = airPortName;
    }
  }
}("Boryspil International Airport");

plane.leaveTheAirport("John F. Kennedy");

＆＃13;

＆＃13;

＆＃13;

Answer 9

闭包就像一个对象。无论何时调用函数，它都会被实例化。

JavaScript中闭包的范围是词法，这意味着闭包所属的函数中包含的所有内容都可以访问任何变量。它

如果你

，变量包含在闭包中

1. 使用var foo=1;或
进行分配
2. 只需撰写var foo;
即可

如果内部函数（包含在另一个函数中的函数）访问这样的变量而没有在var自己的范围内定义它，它会修改外部闭包中变量的内容。

闭包比产生它的函数的运行时更长。如果其他函数使它超出定义它们的 closure / scope （例如作为返回值），那些将继续引用 closure 。

实施例

function example(closure) {
  // define somevariable to live in the closure of example
  var somevariable = 'unchanged';

  return {
    change_to: function(value) {
      somevariable = value;
    },
    log: function(value) {
      console.log('somevariable of closure %s is: %s',
        closure, somevariable);
    }
  }
}

closure_one = example('one');
closure_two = example('two');

closure_one.log();
closure_two.log();
closure_one.change_to('some new value');
closure_one.log();
closure_two.log();

输出

somevariable of closure one is: unchanged
somevariable of closure two is: unchanged
somevariable of closure one is: some new value
somevariable of closure two is: unchanged

Answer 10

我在一段时间后写了一篇博文，解释了闭包。这就是我所说的关于为什么你想要的闭包的内容。

  

闭包是一种让函数出现的方法   拥有持久性私有变量 -   也就是说，变量只有一个   功能知道，它可以在哪里   跟踪以前的信息   它已经运行了。

从这个意义上说，他们让一个函数看起来有点像具有私有属性的对象。

全文：

So what are these closure thingys?

Answer 11

关闭很简单：

以下简单示例涵盖了JavaScript闭包的所有要点。 ^*

这是一家生产可以增加和增加的计算器的工厂：

function make_calculator() {
  var n = 0; // this calculator stores a single number n
  return {
    add: function(a) {
      n += a;
      return n;
    },
    multiply: function(a) {
      n *= a;
      return n;
    }
  };
}

first_calculator = make_calculator();
second_calculator = make_calculator();

first_calculator.add(3); // returns 3
second_calculator.add(400); // returns 400

first_calculator.multiply(11); // returns 33
second_calculator.multiply(10); // returns 4000

关键点：每次调用make_calculator都会创建一个新的本地变量n，该变量继续可供该计算器add和{{1}使用multiply返回后很长时间的函数。

如果您熟悉堆栈帧，这些计算器似乎很奇怪：make_calculator返回后如何继续访问n？答案是假设JavaScript不使用“堆栈帧”，而是使用“堆帧”，它可以在使它们返回的函数调用之后持久存在。

内部函数，如make_calculator和add，它们访问在外部函数 ^** 中声明的变量，称为闭包。

这几乎就是关闭所有内容。

---

^{* 例如，它涵盖another answer中给出的“闭包傻瓜”一文中的所有要点，除了示例6，它只是表明可以使用变量在它们被宣布之前，一个很好的事实要知道但与闭包完全无关。它还涵盖the accepted answer中的所有点，除了函数将其参数复制到局部变量（命名函数参数）的点（1），以及（2）复制数字创建一个新数字，但复制一个对象引用为您提供对同一对象的另一个引用。这些也很好知道但又与封闭完全无关。它也与this answer中的示例非常相似，但更短，更抽象。它没有涉及this answer或this comment，这就是JavaScript使得很难将循环变量的当前值插入到内部函数中：“插入in“step只能使用包含内部函数的辅助函数来完成，并在每次循环迭代时调用。 （严格地说，内部函数访问辅助函数的变量副本，而不是插入任何东西。）同样，在创建闭包时非常有用，但不是闭包的一部分或它是如何工作的。由于闭包在ML等函数式语言中的工作方式不同，还存在额外的混淆，其中变量绑定到值而不是存储空间，从而提供了一种以某种方式理解闭包的人（即“插入”方式）的持续流。对JavaScript来说简单不对，其中变量总是绑定到存储空间，而永远不会绑定到值。功能}

^{** 任何外部函数，如果有多个是嵌套的，或者甚至在全局上下文中，如this answer所指出的那样。}

Answer 12

我如何向一个六岁的孩子解释：

你知道成年人如何拥有房子，他们称之为家吗？当一个妈妈有一个孩子时，孩子并没有真正拥有任何东西，对吗？但是它的父母拥有一所房子，所以每当有人问孩子“你家在哪里？”时，他/她就可以回答“那所房子！”，并指向其父母的房子。一个“关闭”是孩子总是（即使在国外）能够说它有一个家的能力，即使它真的是父母拥有房子。

Answer 13

Can you explain closures to a 5-year-old?*

我仍然认为Google's explanation效果很好而且很简洁：

/*
*    When a function is defined in another function and it
*    has access to the outer function's context even after
*    the outer function returns.
*
* An important concept to learn in JavaScript.
*/

function outerFunction(someNum) {
    var someString = 'Hey!';
    var content = document.getElementById('content');
    function innerFunction() {
        content.innerHTML = someNum + ': ' + someString;
        content = null; // Internet Explorer memory leak for DOM reference
    }
    innerFunction();
}

outerFunction(1);​

_{* C＃问题}

Answer 14

我倾向于通过GOOD / BAD比较来更好地学习。我喜欢看到工作代码后跟有人可能会遇到的非工作代码。我把a jsFiddle放在一起进行比较，并尝试将差异归结为我能想出的最简单的解释。

正确完成闭包：

console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}

• 在上面的代码中，createClosure(n)在循环的每次迭代中被调用。请注意，我命名变量n以突出显示它是在新函数范围中创建的 new 变量，并且与绑定到外部的index不是同一个变量范围。

• 这会创建一个新范围，n绑定到该范围;这意味着我们有10个独立的范围，每次迭代一个。

• createClosure(n)返回一个返回该范围内的n的函数。

• 在每个范围内n绑定到调用createClosure(n)时的值，因此返回的嵌套函数将始终返回其具有的n值调用createClosure(n)时。

关闭错误：

console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}

• 在上面的代码中，循环在createClosureArray()函数内移动，现在函数只返回已完成的数组，乍一看似乎更直观。

• 可能不明显的是，因为createClosureArray()仅在一次只为这个函数创建一个范围而不是每次循环迭代一个范围时被调用。

• 在此函数中定义了名为index的变量。循环运行并向返回index的数组添加函数。请注意index在createClosureArray函数中定义，只能被调用一次。

• 因为createClosureArray()函数中只有一个范围，index仅绑定到该范围内的值。换句话说，每次循环更改index的值时，它会更改该范围内引用它的所有内容。

• 添加到数组的所有函数都从定义它的父作用域返回SAME index变量，而不是像第一个示例那样从10个不同的作用域中返回10个不同的变量。最终结果是所有10个函数都从同一范围返回相同的变量。

• 循环完成并且index被修改后，结束值为10，因此添加到数组的每个函数都返回单个index变量的值，该变量现在设置为10。

结果

  

CLOSURES DONE RIGHT
  n = 0
  n = 1
  n = 2
  n = 3
  n = 4
  n = 5
  n = 6
  n = 7
  n = 8
  n = 9

     

关闭错误   n = 10
  n = 10
  n = 10
  n = 10
  n = 10
  n = 10
  n = 10
  n = 10
  n = 10
  n = 10

Answer 15

Wikipedia on closures：

  

在计算机科学中，闭包是一个函数以及该函数的非局部名称（自由变量）的引用环境。

从技术上讲，在JavaScript中，每个函数都是一个闭包。它始终可以访问在周围范围内定义的变量。

由于JavaScript中的范围定义构造是一个函数，而不是像许多其他语言一样的代码块，我们通常在JavaScript中使用 closure 的意思< / strong>是一个函数，用于在已经执行的周围函数中定义的非局部变量。

闭包通常用于创建具有一些隐藏私有数据的函数（但情况并非总是如此）。

var db = (function() {
    // Create a hidden object, which will hold the data
    // it's inaccessible from the outside.
    var data = {};

    // Make a function, which will provide some access to the data.
    return function(key, val) {
        if (val === undefined) { return data[key] } // Get
        else { return data[key] = val } // Set
    }
    // We are calling the anonymous surrounding function,
    // returning the above inner function, which is a closure.
})();

db('x')    // -> undefined
db('x', 1) // Set x to 1
db('x')    // -> 1
// It's impossible to access the data object itself.
// We are able to get or set individual it.

EMS

上面的示例使用匿名函数，该函数执行一次。但它不一定是。它可以命名（例如mkdb）并在以后执行，每次调用它时都会生成一个数据库函数。每个生成的函数都有自己的隐藏数据库对象。闭包的另一个用法示例是当我们不返回一个函数，而是一个包含多个函数用于不同目的的对象时，每个函数都可以访问相同的数据。

Answer 16

我整理了一个交互式JavaScript教程来解释闭包的工作原理。 What's a Closure?

以下是其中一个例子：

var create = function (x) {
    var f = function () {
        return x; // We can refer to x here!
    };
    return f;
};
// 'create' takes one argument, creates a function

var g = create(42);
// g is a function that takes no arguments now

var y = g();
// y is 42 here

Answer 17

  

孩子们将永远记住他们与父母分享的秘密，即使他们的父母也是如此   不见了。这就是闭包的功能。

JavaScript函数的秘密是私有变量

var parent = function() {
 var name = "Mary"; // secret
}

每次调用它时，都会创建局部变量“name”并命名为“Mary”。每次函数退出时，变量都会丢失，名称会被遗忘。

正如您可能猜到的那样，因为每次调用函数时都会重新创建变量，并且没有其他人知道它们，所以必须存在一个存储它们的秘密位置。它可以被称为密室或堆栈或本地范围，但它并不重要。我们知道他们在某处隐藏在记忆中。

但是，在JavaScript中有一个非常特殊的东西，即在其他函数中创建的函数，也可以知道父元素的局部变量，并且只要它们存在就保留它们。

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    // I can also see that "name" is "Mary"
  }
}

因此，只要我们在父函数中，它就可以创建一个或多个子函数，它们可以从秘密地点共享秘密变量。

但令人遗憾的是，如果孩子也是其父函数的私有变量，那么当父母结束时它也会死亡，并且秘密将随之死亡。

为了生活，孩子必须在太晚之前离开

var parent = function() {
  var name = "Mary";
  var child = function(childName) {
    return "My name is " + childName  +", child of " + name; 
  }
  return child; // child leaves the parent ->
}
var child = parent(); // < - and here it is outside 

现在，即使玛丽“不再跑步”，她的记忆也不会丢失，她的孩子将永远记住她们在一起的时间里分享的名字和其他秘密。

所以，如果你给孩子打电话“爱丽丝”，她会回复

child("Alice") => "My name is Alice, child of Mary"

这就是要说的。

Answer 18

我不明白为什么答案在这里很复杂。

这是一个闭包：

var a = 42;

function b() { return a; }

是。你可能每天都要多次使用它。

  

没有理由相信闭包是解决特定问题的复杂设计攻击。不，闭包仅仅是从声明函数（未运行）的角度使用来自更高范围的变量。

     

现在允许你能做什么可以更加壮观，请看其他答案。

Answer 19

dlaliberte的第一点示例：

  

不仅在返回内部函数时创建闭包。实际上，封闭功能根本不需要返回。您可以将内部函数分配给外部作用域中的变量，或者将其作为参数传递给另一个可以立即使用的函数。因此，封闭函数的闭包可能在调用封闭函数时已经存在，因为任何内部函数在调用它时都可以访问它。

var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);

Answer 20

闭包是内部函数可以访问其外部函数中的变量的地方。这可能是闭包最简单的一行解释。

Answer 21

我知道已经有很多解决方案，但我想这个小而简单的脚本可以用来演示这个概念：

// makeSequencer will return a "sequencer" function
var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined

Answer 22

你正在睡觉，你邀请丹。 你告诉Dan带一个XBox控制器。

丹邀请保罗。 丹要求保罗带一个控制器。有多少控制器被带到聚会上？

function sleepOver(howManyControllersToBring) {

    var numberOfDansControllers = howManyControllersToBring;

    return function danInvitedPaul(numberOfPaulsControllers) {
        var totalControllers = numberOfDansControllers + numberOfPaulsControllers;
        return totalControllers;
    }
}

var howManyControllersToBring = 1;

var inviteDan = sleepOver(howManyControllersToBring);

// The only reason Paul was invited is because Dan was invited. 
// So we set Paul's invitation = Dan's invitation.

var danInvitedPaul = inviteDan(howManyControllersToBring);

alert("There were " + danInvitedPaul + " controllers brought to the party.");

Answer 23

JavaScript函数可以访问它们：

1. 参数
2. 本地人（即他们的本地变量和本地函数）
3. 环境，包括：
   • 全局，包括DOM
   • 外部职能中的任何内容

如果函数访问其环境，则该函数是闭包。

请注意，外部功能不是必需的，但它们确实提供了我在此不讨论的好处。通过访问其环境中的数据，闭包可以使数据保持活动状态。在外部/内部函数的子例子中，外部函数可以创建本地数据并最终退出，但是，如果任何内部函数在外部函数退出后仍然存在，那么内部函数将保留外部函数的本地数据活着。

使用全局环境的闭包示例：

想象一下，Stack Overflow Vote-Up和Vote-Down按钮事件实现为闭包，voteUp_click和voteDown_click，它们可以访问外部变量isVotedUp和isVotedDown，它们是全局定义的。 （为简单起见，我指的是StackOverflow的问题投票按钮，而不是答案投票按钮数组。）

当用户点击VoteUp按钮时，voteUp_click函数会检查isVotedDown == true是否确定是否投票或仅取消向下投票。函数voteUp_click是一个闭包，因为它正在访问它的环境。

var isVotedUp = false;
var isVotedDown = false;

function voteUp_click() {
  if (isVotedUp)
    return;
  else if (isVotedDown)
    SetDownVote(false);
  else
    SetUpVote(true);
}

function voteDown_click() {
  if (isVotedDown)
    return;
  else if (isVotedUp)
    SetUpVote(false);
  else
    SetDownVote(true);
}

function SetUpVote(status) {
  isVotedUp = status;
  // Do some CSS stuff to Vote-Up button
}

function SetDownVote(status) {
  isVotedDown = status;
  // Do some CSS stuff to Vote-Down button
}

所有这四个功能都是闭包，因为它们都可以访问它们的环境。

Answer 24

Closures 的作者已经很好地解释了闭包，解释了我们需要它们的原因，并解释了理解闭包所必需的LexicalEnvironment。
以下是摘要：

如果访问变量，但它不是本地变量怎么办？像这里：

在这种情况下，解释器在中查找变量 外LexicalEnvironment个对象。

该过程包括两个步骤：

1. 首先，当创建函数f时，它不会创建为空 空间。有一个当前的LexicalEnvironment对象。在这种情况下 上面，它是窗口（a在功能时是未定义的 创建）。



创建函数时，它会获得一个名为[[Scope]]的隐藏属性，该属性引用当前的LexicalEnvironment。



如果读取变量但在任何地方都找不到，则会生成错误。

嵌套功能

函数可以嵌套在另一个函数中，形成一个LexicalEnvironments链，也可以称为范围链。



因此，函数g可以访问g，a和f。

<强>闭包

外部函数完成后，嵌套函数可能会继续存在：



标记LexicalEnvironments：



如我们所见，this.say是用户对象中的属性，因此在用户完成后它将继续存在。

如果你还记得，当创建this.say时，它（作为每个函数）都会获得当前LexicalEnvironment的内部引用this.say.[[Scope]]。因此，当前用户执行的LexicalEnvironment保留在内存中。 User的所有变量也都是它的属性，所以它们也是经常保存的，而不是通常的垃圾。

重点是确保如果内部函数将来想要访问外部变量，它就能够这样做。

总结：

1. 内部函数保留对外部的引用 LexicalEnvironment。
2. 内部函数可以从中访问变量 任何时候即使外部功能完成。
3. 浏览器将LexicalEnvironment及其所有属性（变量）保留在内存中，直到有一个引用它的内部函数。

这称为闭包。

Answer 25

好的，和一个6岁的孩子交谈，我可能会使用以下关联。

  

想象一下 - 你在整个房子里和你的小兄弟姐妹一起玩，你带着你的玩具四处走动，把它们带进了你哥哥的房间。过了一会儿，你的哥哥从学校回来，然后去了他的房间，他把它锁在里面，所以现在你不能再直接进入那里留下的玩具了。但你可以敲门，问你的兄弟那些玩具。这叫做玩具的封闭;你兄弟为你做了，他现在进入外部范围。

比较一个门被草稿锁定而内部没人（一般功能执行）的情况，然后发生一些局部火灾并烧毁房间（垃圾收集器：D），然后建造一个新房间，现在你可以在那里留下另一个玩具（新功能实例），但永远不会得到第一个房间实例中留下的玩具。

对于一个高级孩子，我会提出如下内容。它并不完美，但它让你感觉它是什么：

function playingInBrothersRoom (withToys) {
  // We closure toys which we played in the brother's room. When he come back and lock the door
  // your brother is supposed to be into the outer [[scope]] object now. Thanks god you could communicate with him.
  var closureToys = withToys || [],
      returnToy, countIt, toy; // Just another closure helpers, for brother's inner use.

  var brotherGivesToyBack = function (toy) {
    // New request. There is not yet closureToys on brother's hand yet. Give him a time.
    returnToy = null;
    if (toy && closureToys.length > 0) { // If we ask for a specific toy, the brother is going to search for it.

      for ( countIt = closureToys.length; countIt; countIt--) {
        if (closureToys[countIt - 1] == toy) {
          returnToy = 'Take your ' + closureToys.splice(countIt - 1, 1) + ', little boy!';
          break;
        }
      }
      returnToy = returnToy || 'Hey, I could not find any ' + toy + ' here. Look for it in another room.';
    }
    else if (closureToys.length > 0) { // Otherwise, just give back everything he has in the room.
      returnToy = 'Behold! ' + closureToys.join(', ') + '.';
      closureToys = [];
    }
    else {
      returnToy = 'Hey, lil shrimp, I gave you everything!';
    }
    console.log(returnToy);
  }
  return brotherGivesToyBack;
}
// You are playing in the house, including the brother's room.
var toys = ['teddybear', 'car', 'jumpingrope'],
    askBrotherForClosuredToy = playingInBrothersRoom(toys);

// The door is locked, and the brother came from the school. You could not cheat and take it out directly.
console.log(askBrotherForClosuredToy.closureToys); // Undefined

// But you could ask your brother politely, to give it back.
askBrotherForClosuredToy('teddybear'); // Hooray, here it is, teddybear
askBrotherForClosuredToy('ball'); // The brother would not be able to find it.
askBrotherForClosuredToy(); // The brother gives you all the rest
askBrotherForClosuredToy(); // Nothing left in there

如您所见，无论房间是否锁定，房间内的玩具仍可通过兄弟进入。这是a jsbin来玩它。

Answer 26

一个六岁孩子的答案（假设他知道一个函数是什么，变量是什么，以及有什么数据）：

函数可以返回数据。您可以从函数返回的一种数据是另一种功能。当返回该新函数时，创建它的函数中使用的所有变量和参数都不会消失。相反，该父功能“关闭”。换句话说，没有什么可以看到它内部并看到它使用的变量，除了它返回的函数。该新函数具有特殊的能力，可以回顾创建它的函数并查看其中的数据。

function the_closure() {
  var x = 4;
  return function () {
    return x; // Here, we look back inside the_closure for the value of x
  }
}

var myFn = the_closure();
myFn(); //=> 4

解释它的另一个非常简单的方法是在范围方面：

每当您在较大范围内创建较小的范围时，较小的范围将始终能够看到较大范围内的范围。

Answer 27

JavaScript中的函数不仅仅是对一组指令的引用（如在C语言中），而且还包括一个隐藏的数据结构，该结构由对它使用的所有非局部变量（捕获的变量）的引用组成。这种两件式函数称为闭包。 JavaScript中的每个函数都可以被视为闭包。

闭包是具有状态的函数。它有点类似于“this”，意思是“this”也为函数提供状态但函数和“this”是单独的对象（“t​​his”只是一个奇特的参数，并且是将它永久绑定到a的唯一方法函数是创建一个闭包）。虽然“this”和函数总是分开存在，但函数不能与其闭包分开，语言也无法访问捕获的变量。

因为词法嵌套函数引用的所有这些外部变量实际上是其词法封闭函数链中的局部变量（全局变量可以假定为某些根函数的局部变量），并且函数的每次执行都会创建它的局部变量的新实例，它遵循一个函数的每次执行返回（或以其他方式将其转出，例如将其注册为回调）嵌套函数创建一个新的闭包（具有其自己可能唯一的一组引用的非局部变量，表示其执行上下文。）

此外，必须要理解的是，JavaScript中的局部变量不是在堆栈帧上创建的，而是在堆上创建的，只有在没有人引用它们时才会被销毁。当函数返回时，对其局部变量的引用会递减，但如果在当前执行期间它们成为闭包的一部分并且仍然由其词法嵌套函数引用（它们仅在引用时才会发生），它们仍然可以为非null。这些嵌套函数被返回或以其他方式传递给某些外部代码。）

一个例子：

function foo (initValue) {
   //This variable is not destroyed when the foo function exits.
   //It is 'captured' by the two nested functions returned below.
   var value = initValue;

   //Note that the two returned functions are created right now.
   //If the foo function is called again, it will return
   //new functions referencing a different 'value' variable.
   return {
       getValue: function () { return value; },
       setValue: function (newValue) { value = newValue; }
   }
}

function bar () {
    //foo sets its local variable 'value' to 5 and returns an object with
    //two functions still referencing that local variable
    var obj = foo(5);

    //Extracting functions just to show that no 'this' is involved here
    var getValue = obj.getValue;
    var setValue = obj.setValue;

    alert(getValue()); //Displays 5
    setValue(10);
    alert(getValue()); //Displays 10

    //At this point getValue and setValue functions are destroyed
    //(in reality they are destroyed at the next iteration of the garbage collector).
    //The local variable 'value' in the foo is no longer referenced by
    //anything and is destroyed too.
}

bar();

Answer 28

也许除了最早熟的六岁孩子之外，还有一些例子，但是有一些例子帮助我在JavaScript中实现了关闭概念。

闭包是一个可以访问另一个函数范围（其变量和函数）的函数。创建闭包的最简单方法是使用函数内的函数;原因是在JavaScript中，函数始终可以访问其包含函数的范围。

＆＃13;

＆＃13;

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    innerFunction();
}

outerFunction();

＆＃13;

＆＃13;

＆＃13;

警告：猴子

在上面的例子中，调用了outerFunction，后者又调用了innerFunction。注意innerVar如何可用于innerFunction，通过正确警告outerVar的值来证明。

现在考虑以下事项：

＆＃13;

＆＃13;

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

＆＃13;

＆＃13;

＆＃13;

警告：猴子

referenceToInnerFunction设置为outerFunction（），它只返回对innerFunction的引用。当调用referenceToInnerFunction时，它返回outerVar。同样，如上所述，这表明innerFunction可以访问outerVar的变量outerVunction。此外，值得注意的是，即使在outerFunction完成执行后，它仍保留此访问权限。

这里的事情变得非常有趣。如果我们要删除outerFunction，比如将其设置为null，您可能会认为referenceToInnerFunction将失去对outerVar值的访问权限。但这种情况并非如此。

＆＃13;

＆＃13;

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        return outerVar;
    }
    
    return innerFunction;
}

var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());

outerFunction = null;
alert(referenceToInnerFunction());

＆＃13;

＆＃13;

＆＃13;

警告：猴子 警告：猴子

但这是怎么回事？现在，为了将outerFunction设置为null，referenceToInnerFunction如何知道outerVar的值？

referenceToInnerFunction仍然可以访问outerVar的值的原因是因为当首先通过将innerFunction放在outerFunction中来创建闭包时，innerFunction将对outerFunction的作用域（其变量和函数）的引用添加到其作用域链中。这意味着innerFunction有一个指向或引用所有outerFunction的变量，包括outerVar。因此，即使在outerFunction完成执行时，或者即使它被删除或设置为null，其范围中的变量（如outerVar）也会留在内存中，因为在返回到的内部函数部分上对它们的未完成引用referenceToInnerFunction。要从内存中真正释放outerVar和其余的outerFunction变量，你必须摆脱对它们的这一杰出引用，比如将referenceToInnerFunction设置为null。

//////////

关于闭包的另外两件事要注意。首先，闭包将始终可以访问其包含函数的最后一个值。

＆＃13;

＆＃13;

function outerFunction() {
    var outerVar = "monkey";
    
    function innerFunction() {
        alert(outerVar);
    }
    
    outerVar = "gorilla";

    innerFunction();
}

outerFunction();

＆＃13;

＆＃13;

＆＃13;

警告：大猩猩

其次，当创建一个闭包时，它会保留对其所有封闭函数的变量和函数的引用;它无法挑选。但是，应该谨慎使用封闭装置，或者至少要小心使用，因为它们可能会占用大量内存;在包含函数执行完毕后，很多变量可以保存在内存中。

Answer 29

我只是将它们指向Mozilla Closures page。这是我发现的关闭基础知识和实际用法的最佳，最简单，最简单的解释。强烈建议任何学习JavaScript的人。

是的，我甚至推荐给一个6岁的孩子 - 如果这个6岁的孩子正在学习闭包，那么他们已经准备好理解简洁明了的解释了在文章中提供。

Answer 30

我相信较短的解释，请参见下图。

function f1() ..＆gt;浅红色盒子

function f2() ..＆gt;红色小盒子

此处我们有两个功能，f1()和f2()。 f2（）是f1（）的内部。 f1（）有一个变量var x = 10。

调用函数f1()时，f2()可以访问var x = 10的值。

以下是代码：

function f1() {
    var x=10;

    function f2() {
        console.log(x)
    }

    return f2

}
f1()

f1()在这里调用：

Answer 31

  

闭包是一个可以访问父作用域的函数，即使在父函数关闭之后也是如此。

所以基本上闭包是另一个函数的函数。我们可以像孩子一样说。

  

闭包是一个可以访问外部的内部函数   （附上）函数的变量 - 范围链。关闭有三个   范围链：它可以访问自己的范围（定义变量）   在它的大括号之间），它可以访问外部函数   变量，它可以访问全局变量。

     

内部函数不仅可以访问外部函数   变量也可以是外部函数的参数。请注意   内部函数不能调用外部函数的参数对象，   但是，即使它可以调用外部函数的参数   直接

     

通过在另一个函数中添加函数来创建闭包。

此外，它是非常有用的方法，在许多着名的框架中使用，包括Angular，Node.js和jQuery：

  

闭包广泛用于Node.js;他们是工作的马   Node.js的异步，非阻塞架构。关闭也是   常用于jQuery和几乎所有的JavaScript   你读的代码。

但是真实编码中的闭包是怎样的？ 看看这个简单的示例代码：

function showName(firstName, lastName) {
      var nameIntro = "Your name is ";
      // this inner function has access to the outer function's variables, including the parameter
      function makeFullName() {
          return nameIntro + firstName + " " + lastName;
      }
      return makeFullName();
  }

  console.log(showName("Michael", "Jackson")); // Your name is Michael Jackson

此外，这是jQuery中的经典封闭方式，每个javascript和jQuery开发人员都使用它很多：

$(function() {
    var selections = [];
    $(".niners").click(function() { // this closure has access to the selections variable
        selections.push(this.prop("name")); // update the selections variable in the outer function's scope
    });
});

但为什么我们使用闭包？当我们在实际编程中使用它时？ 闭合的实际用途是什么？下面是MDN的一个很好的解释和例子：

实用闭包

  

闭包很有用，因为它们可以让你关联一些数据（   词法环境）具有对该数据进行操作的功能。这个   与面向对象编程有明显的相似之处，即面向对象   允许我们将一些数据（对象的属性）与一个或   更多方法。

     

因此，您可以在通常情况下使用闭包   使用只有一种方法的对象。

     

您可能希望这样做的情况特别常见   网络。我们在前端JavaScript中编写的大部分代码都是   基于事件 - 我们定义一些行为，然后将其附加到一个事件   由用户触发（例如点击或按键）。我们的代码是   通常作为回调附加：执行的单个函数   为了回应这一事件。

     

例如，假设我们希望向页面添加一些按钮   调整文字大小。这样做的一种方法是指定   body元素的font-size以像素为单位，然后设置大小   页面上的其他元素（例如标题）使用相对的em   单元：

阅读下面的代码并运行代码，看看闭包如何帮助我们轻松地为每个部分创建单独的函数：

//javascript
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

/*css*/
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

<!--html><!-->
<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

有关闭包的进一步研究，我建议您通过MDN访问此页面： https://developer.mozilla.org/en/docs/Web/JavaScript/Closures

Answer 32

对于一个六岁的孩子？

你和你的家人住在神秘的安维尔镇。你有一个住在隔壁的朋友，所以你打电话给他们，让他们出来玩。你拨打：

  

000001（jamiesHouse）

一个月之后，你和你的家人离开Ann Ville到下一个城镇，但是你和你的朋友仍然保持联系，所以现在你必须拨打你朋友住的城镇的区号拨打他们的'正确'号码：

  

001 000001（annVille.jamiesHouse）

一年之后，你的父母搬到了一个全新的国家，但是你和你的朋友仍然保持联系，所以在打扰你的父母让你拨打国际长途电话后，你现在拨打：

  

01 001 000001（myOldCountry.annVille.jamiesHouse）

奇怪的是，在搬到新的国家之后，你和你的家人恰好搬到了一个名叫Ann Ville的新城镇......你恰好和一个叫Jamie的新朋友交朋友......你给他们打电话......

  

000001（jamiesHouse）

...鬼

事实上，如此幽灵，你从你的祖国告诉杰米这件事......你对它笑得很开心。所以有一天，你和你的家人回到旧国度假。你去老城区（Ann Ville），去参观杰米......

• “真的吗？另一个Jamie？在Ann Ville？在你的新国家!!？”
• “是的......我们叫他们......”

  

02 001 000001（myNewCountry.annVille.jamiesHouse）

评论

更重要的是，我对现代六岁孩子的耐心有很多疑问......

Answer 33

在JavaScript中，闭包非常棒，其中变量或参数可用于内部函数，即使在外部函数返回后它们也会存活。

  function getFullName(a, b) {
  return a + b;
}

function makeFullName(fn) {

  return function(firstName) {

    return function(secondName) {

      return fn(firstName, secondName);
    }
  }
}

makeFullName(getFullName)("stack")("overflow"); // Stackoverflow

Answer 34

这是一个简单的实时场景。请仔细阅读，您将了解我们如何使用闭包（请参阅座位编号如何变化）。

之前解释的所有其他例子也非常适合理解这个概念。

function movieBooking(movieName) {
    var bookedSeatCount = 0;
    return function(name) {
        ++bookedSeatCount ;
        alert( name + " - " + movieName + ", Seat - " + bookedSeatCount )
    };
};

var MI1 = movieBooking("Mission Impossible 1 ");
var MI2 = movieBooking("Mission Impossible 2 ");

MI1("Mayur");
// alert
// Mayur - Mission Impossible 1, Seat - 1

MI1("Raju");
// alert
// Raju - Mission Impossible 1, Seat - 2

MI2("Priyanka");
// alert
// Raja - Mission Impossible 2, Seat - 1

Answer 35

Closures允许JavaScript程序员编写更好的代码。富有创意，富有表现力和简洁。我们经常在JavaScript中使用闭包，而且，无论我们的JavaScript经验如何，我们无疑会一次又一次地遇到它们。闭包可能看起来很复杂，但希望在您阅读本文之后，闭包将更容易被理解，因此对您日常的JavaScript编程任务更具吸引力。

在进一步阅读之前，您应该熟悉JavaScript variable scope，因为要了解闭包，您必须了解JavaScript的变量范围。

什么是封闭？

闭包是一个内部函数，可以访问外部（封闭）函数的变量范围链。闭包有三个作用域链：它可以访问自己的作用域（在大括号之间定义的变量），它可以访问外部函数的变量，并且可以访问全局变量。

内部函数不仅可以访问外部函数的变量，还可以访问外部函数的参数。注意，内部函数不能调用外部函数的arguments对象，但是，即使它可以直接调用外部函数的参数。

通过在另一个函数中添加函数来创建闭包。

JavaScript中闭包的基本示例：

＆＃13;

＆＃13;

function showName (firstName, lastName) {

  var nameIntro = "Your name is ";
  // this inner function has access to the outer function's variables, including the parameter
  ​function makeFullName () {
            
​    return nameIntro + firstName + " " + lastName;
        
  }
​
​  return makeFullName ();

}

​
showName ("Michael", "Jackson"); // Your name is Michael Jackson


＆＃13;

＆＃13;

＆＃13;

闭包广泛用于Node.js;他们是Node.js异步，非阻塞架构的主力军。闭包也常用于jQuery以及您阅读的每一段JavaScript代码。

关闭的经典jQuery示例：

＆＃13;

＆＃13;

$(function() {
​
​  var selections = []; 
  $(".niners").click(function() { // this closure has access to the selections variable​
    selections.push (this.prop("name")); // update the selections variable in the outer function's scope​
  });
​});

＆＃13;

＆＃13;

＆＃13;

闭包规则和副作用

<强> 1。即使在外部函数返回后，闭包也可以访问外部函数的变量：

闭包最重要和最棘手的功能之一是，即使在外部函数返回后，内部函数仍然可以访问外部函数的变量。是的，你读得正确。当JavaScript中的函数执行时，它们使用创建它们时生效的相同范围链。这意味着即使在返回外部函数之后，内部函数仍然可以访问外部函数的变量。因此，您可以稍后在程序中调用内部函数。这个例子说明了：

＆＃13;

＆＃13;

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


＆＃13;

＆＃13;

＆＃13;

<强> 2。闭包存储对外部函数变量的引用：

它们不存储实际值。当在调用闭包之前外部函数变量的值发生变化时，闭包会变得更有趣。这个强大的功能可以通过创造性的方式加以利用，例如Douglas Crockford首先演示的私有变量示例：

＆＃13;

＆＃13;

function celebrityID () {
    var celebrityID = 999;
    // We are returning an object with some inner functions​
    // All the inner functions have access to the outer function's variables​
    return {
        getID: function ()  {
            // This inner function will return the UPDATED celebrityID variable​
            // It will return the current value of celebrityID, even after the changeTheID function changes it​
          return celebrityID;
        },
        setID: function (theNewID)  {
            // This inner function will change the outer function's variable anytime​
            celebrityID = theNewID;
        }
    }
​
}
​
​var mjID = celebrityID (); // At this juncture, the celebrityID outer function has returned.​
mjID.getID(); // 999​
mjID.setID(567); // Changes the outer function's variable​
mjID.getID(); // 567: It returns the updated celebrityId variable


＆＃13;

＆＃13;

＆＃13;

第3。关闭失败

因为闭包可以访问外部函数变量的更新值，所以当外部函数的变量随for循环变化时，它们也会导致错误。因此：

＆＃13;

＆＃13;

// This example is explained in detail below (just after this code box).​
​function celebrityIDCreator (theCelebrities) {
    var i;
    var uniqueID = 100;
    for (i = 0; i < theCelebrities.length; i++) {
      theCelebrities[i]["id"] = function ()  {
        return uniqueID + i;
      }
    }
    
    return theCelebrities;
}
​
​var actionCelebs = [{name:"Stallone", id:0}, {name:"Cruise", id:0}, {name:"Willis", id:0}];
​
​var createIdForActionCelebs = celebrityIDCreator (actionCelebs);
​
​var stalloneID = createIdForActionCelebs [0];

    console.log(stalloneID.id()); // 103

＆＃13;

＆＃13;

＆＃13;

更多信息可以在这里找到 -

1. http://javascript.info/tutorial/closures

2. http://www.javascriptkit.com/javatutors/closures.shtml

Answer 36

这是我能给出的最禅的答案：

您希望此代码能做什么？在运行它之前在评论中告诉我。我很好奇！

function foo() {
  var i = 1;
  return function() {
    console.log(i++);
  }
}

var bar = foo();
bar();
bar();
bar();

var baz = foo();
baz();
baz();
baz();

现在在浏览器中打开控制台（ Ctrl + Shift + I 或 F12 ，希望如此）粘贴代码并点击 Enter 。

如果此代码打印出您所期望的内容（JavaScript新手 - 最后忽略“未定义”），那么您已经拥有无字理解。 在单词中，变量i是内部函数实例的闭包的一部分。

我这样说是因为，一旦我理解了这段代码将foo()的内部函数的实例放在bar和baz中，然后通过这些变量调用它们，否则让我感到惊讶。

但如果我错了，控制台输出让你感到惊讶，请告诉我！

Answer 37

给出以下功能

function person(name, age){

    var name = name;
    var age = age;

    function introduce(){
        alert("My name is "+name+", and I'm "+age);
    }

    return introduce;
}

var a = person("Jack",12);
var b = person("Matt",14);

每次调用函数person时，都会创建一个新的闭包。变量a和b具有相同的introduce函数，但它与不同的闭包相关联。即使函数person完成执行，该闭包仍然存在。

a(); //My name is Jack, and I'm 12
b(); //My name is Matt, and I'm 14

抽象闭包可以表示为：

closure a = {
    name: "Jack",
    age: 12,
    call: function introduce(){
        alert("My name is "+name+", and I'm "+age);
    }
}

closure b = {
    name: "Matt",
    age: 14,
    call: function introduce(){
        alert("My name is "+name+", and I'm "+age);
    }
}

---

假设你知道另一种语言class如何运作，我会做一个类比。

想像

• JavaScript function为constructor
• local variables为instance properties
• 这些properties是私有的
• inner functions为instance methods

每次调用function

• 将创建包含所有局部变量的新object。
• 此对象的方法可以访问该实例对象的"properties"。

Answer 38

我越想到关闭越多，我认为这是一个两步过程：初始化 - 行动

init: pass first what's needed...
action: in order to achieve something for later execution.

对于一个6岁的孩子，我会强调关闭的实践方面：

Daddy: Listen. Could you bring mum some milk (2).
Tom: No problem.
Daddy: Take a look at the map that Daddy has just made: mum is there and daddy is here.
Daddy: But get ready first. And bring the map with you (1), it may come in handy
Daddy: Then off you go (3). Ok?
Tom: A piece of cake!

示例：带些奶给妈妈（=行动）。首先准备好并带上地图（= init）。

function getReady(map) {
    var cleverBoy = 'I examine the ' + map;
    return function(what, who) {
        return 'I bring ' + what + ' to ' + who + 'because + ' cleverBoy; //I can access the map
    }
}
var offYouGo = getReady('daddy-map');
offYouGo('milk', 'mum');

因为如果你带来了一条非常重要的信息（地图），你就足够了解其他类似行为：

offYouGo('potatoes', 'great mum');

对于开发人员，我会在闭包和OOP之间建立并行。 init阶段类似于将参数传递给传统OO语言中的构造函数; 行动阶段最终是您调用以实现所需目标的方法。并且该方法使用称为 closure 的机制来访问这些init参数。

请参阅我的另一个答案，说明OO和闭包之间的并行性：

How to "properly" create a custom object in JavaScript?

Answer 39

一个闭包 一个函数 中的一个函数，可以访问它的＆＃34; parent＆＃34;函数的变量和参数。

示例：

function showPostCard(Sender, Receiver) {

    var PostCardMessage = " Happy Spring!!! Love, ";

    function PreparePostCard() {
        return "Dear " + Receiver + PostCardMessage + Sender;
    }

    return PreparePostCard();
}
showPostCard("Granny", "Olivia");

Answer 40

符合插图说明： How do JavaScript closures work behind the scenes 。

本文解释了如何以直观的方式分配和使用范围对象（或LexicalEnvironment s）。就像，对于这个简单的脚本：

"use strict";

var foo = 1;
var bar = 2;

function myFunc() {
  //-- Define local-to-function variables
  var a = 1;
  var b = 2;
  var foo = 3;
}

//-- And then, call it:
myFunc();

执行顶级代码时，我们有以下范围对象的排列：

当调用myFunc()时，我们有以下范围链：

了解范围对象的创建，使用和删除方式是了解大局并了解闭包如何工作的关键。

有关所有细节，请参阅上述文章。

Answer 41

要理解闭包，你必须开始执行程序，并按字面意思执行，就好像你是运行时一样。让我们看一下这段简单的代码：

JavaScript分两个阶段运行代码：

• 编译阶段// JavaScript不是纯粹的解释语言
• 执行阶段

当JavaScript经历编译阶段时，它会提取变量和函数的声明。这称为吊装。在此阶段遇到的函数将保存为内存中的文本blob，也称为lambda。编译完成后，JavaScript进入执行阶段，分配所有值并运行该函数。要运行该函数，它通过从堆中分配内存并重复该函数的编译和执行阶段来准备执行上下文。该存储区域称为功能范围。执行开始时有一个全局范围。范围是理解闭包的关键。

在此示例中，首先定义变量a，然后在编译阶段定义f。所有未声明的变量都保存在全局范围内。在执行阶段f使用参数调用。分配了f的范围，并为其重复编译和执行阶段。

参数也保存在f的本地范围内。每当创建本地执行上下文或作用域时，它都包含指向其父作用域的引用指针。所有变量访问都遵循此词法范围链来查找其值。如果在本地范围内找不到变量，则它跟随链并在其父范围内找到它。这也是局部变量覆盖父作用域中变量的原因。父范围称为＆＃34;关闭＆＃34;本地范围或功能。

在设置g范围时，它获得了一个指向其父f范围的词法指针。 f的范围是g的结束。在JavaScript中，如果有一些函数，对象或作用域的引用，如果你能以某种方式访问​​它们，它将不会被垃圾收集。因此，当myG运行时，它有一个指向f范围的指针，这是它的闭包。即使f已返回，此内存区域也不会收集垃圾。就运行时而言，这是一个闭包。

那是什么关闭？

• 它是函数与其范围链之间的隐式永久链接......
• 函数定义＆＃s;（lambda）隐藏[[scope]]引用。
• 保留范围链（防止垃圾收集）。
• 它被用作＆＃34;外部环境参考＆＃34;任何时候运行该功能。

隐性关闭

var data = "My Data!";
setTimeout(function() {
  console.log(data); // Prints "My Data!"
}, 3000);

显性关闭

function makeAdder(n) {
  var inc = n;
  var sum = 0;
  return function add() {
    sum = sum + inc;
    return sum;
  };
}

var adder3 = makeAdder(3);

关于闭包的一个非常有趣的话题是 Arindam Paul - JavaScript VM internals, EventLoop, Async and ScopeChains 。

Answer 42

尽管互联网上存在许多美妙的JavaScript闭包定义，但我试图用我最喜欢的闭包定义来解释我六岁的朋友，这有助于我更好地理解闭包。

什么是关闭？

闭包是一个内部函数，可以访问外部（封闭）函数的变量范围链。闭包有三个作用域链：它可以访问自己的作用域（在大括号之间定义的变量），它可以访问外部函数的变量，并且可以访问全局变量。

闭包是函数的局部变量 - 在函数返回后保持活动状态。

闭包是指独立（自由）变量的函数。换句话说，闭包中定义的函数“记住”创建它的环境。

闭包是范围概念的扩展。使用闭包，函数可以访问创建函数的作用域中可用的变量。

闭包是一个堆栈帧，在函数返回时不会释放。 （好像'堆叠框架'是malloc'而不是堆叠！）

Java等语言提供了将方法声明为私有的功能，这意味着它们只能由同一个类中的其他方法调用。 JavaScript不提供本机方式，但可以使用闭包来模拟私有方法。

“闭包”是一个表达式（通常是一个函数），它可以包含自由变量以及绑定这些变量的环境（“关闭”表达式）。

闭包是一种抽象机制，可以让您非常干净地分离关注点。

关闭的使用：

闭包在隐藏功能实现的同时仍然可以显示界面。

您可以使用闭包在JavaScript中模拟封装概念。

闭包广泛用于jQuery和Node.js。

虽然对象文字很容易创建并且便于存储数据，但在大型Web应用程序中创建静态单例命名空间时，闭包通常是更好的选择。

闭包示例：

假设我6岁的朋友最近在他的小学结识了这一点，我觉得这个加上这两个数字的例子对于六岁的学生来说是最简单和最容易学习的。 / p>

示例1：通过返回函数来实现闭包。

function makeAdder(x) {
    return function(y) {
        return x + y;
    };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

示例2：通过返回对象文字来实现闭包。

function makeAdder(x) {
    return {
        add: function(y){
            return x + y;
        }
    }
}

var add5 = makeAdder(5);
console.log(add5.add(2));//7

var add10 = makeAdder(10);
console.log(add10.add(2));//12

示例3：jQuery中的闭包

$(function(){
    var name="Closure is easy";
    $('div').click(function(){
        $('p').text(name);
    });
});

有用的链接：

• Closures （Mozilla开发者网络）
• Understand JavaScript Closures With Ease

感谢上述链接，这有助于我更好地理解和解释关闭。

Answer 43

此答案的版本图片： [已解决]

忘记范围每一件事并记住：当一个变量需要某个地方时，javascript不会破坏它。变量总是指向最新值。

示例1：

示例2：

示例3：

Answer 44

（我不会考虑6岁的事情。）

在像JavaScript这样的语言中，您可以将函数作为参数传递给其他函数（函数是一等公民的语言），您经常会发现自己在做类似的事情：

var name = 'Rafael';

var sayName = function() {
  console.log(name);
};

您看，sayName没有name变量的定义，但确实使用name之外定义的sayName的值（在父范围）。

假设您将sayName作为参数传递给另一个函数，该函数会将sayName称为回调：

functionThatTakesACallback(sayName);

请注意：

1. sayName将从functionThatTakesACallback内部调用（假设，因为我在此示例中未实现functionThatTakesACallback）。
2. 调用sayName时，会记录name变量的值。
3. functionThatTakesACallback没有定义name变量（好吧，它可以，但没关系，所以假设它没有。）

因此我们在sayName内调用functionThatTakesACallback并引用name内未定义的functionThatTakesACallback变量。

那会怎么样？一个ReferenceError: name is not defined？

没有！ name的值在闭包中捕获。您可以将此闭包视为与函数相关联的上下文，其中包含定义该函数的可用值。

所以：即使name不在调用函数sayName的范围内（functionThatTakesACallback内），sayName也可以访问name的值在与sayName关联的闭包中捕获的。

-

从书中 Eloquent JavaScript ：

  

一个好的心理模型是将函数值视为包含其体内代码和创建它们的环境。调用时，函数体会看到其原始环境，而不是调用的环境。

Answer 45

此答案是此YouTube视频Javascript Closures的摘要。对该视频完全赞同。

闭包只是状态函数，它们维护私有变量的状态。

通常在调用函数时如下图所示。变量在使用的堆栈（运行RAM内存）上创建，然后解除分配。

但是现在有些情况下我们想要保持Javascript闭包使用的函数的这种状态。闭包是函数内部的函数，具有返回调用，如下面的代码所示。

所以上面的计数器函数的闭包代码看起来如下所示。它是一个带有return语句的函数内部函数。

function Counter() {
           var counter = 0;

           var Increment = function () {
               counter++;
               alert(counter);
           }
           return {
               Increment
           }
       }

所以现在如果你进行调用，计数器将递增，换句话说，函数调用保持状态。

var x = Counter(); // get the reference of the closure
x.Increment(); // Displays 1
x.Increment(); // Display 2 ( Maintains the private variables)

但现在最大的问题是使用这种有状态功能。有状态函数是实现OOP概念的构建块，如抽象，封装和创建自包含模块。

因此，无论你想要封装什么，你都可以把它作为私有，并且要公开的东西应该放在return语句中。这些组件也是自包含的隔离对象，因此它们不会污染全局变量。

遵循OOP原则的对象是自包含的，遵循抽象，遵循封装等。在Javascript中使用out闭包这很难实现。

Answer 46

以下示例是JavaScript闭包的简单示例。 这是闭包函数，它返回一个函数，可以访问它的局部变量x，

function outer(x){
     return function inner(y){
         return x+y;
     }
}

调用这样的函数：

var add10 = outer(10);
add10(20); // The result will be 30
add10(40); // The result will be 50

var add20 = outer(20);
add20(20); // The result will be 40
add20(40); // The result will be 60

Answer 47

许多JavaScript开发人员一直使用闭包，但我们认为它是理所当然的。它的工作原理并不复杂。了解如何有目的地使用它是复杂。

在最简单的定义中（正如其他答案所指出的），闭包基本上是在另一个函数内定义的函数。并且该内部函数可以访问外部函数范围中定义的变量。您将看到使用闭包的最常见做法是在全局范围内定义变量和函数，并在该函数的函数范围内访问这些变量。

var x = 1;
function myFN() {
  alert(x); //1, as opposed to undefined.
}
// Or
function a() {
   var x = 1;
   function b() {
       alert(x); //1, as opposed to undefined.
   }
   b();
}

那又怎样？

对于JavaScript用户来说，闭包不是特别的，直到你想到没有它们的生活会是什么样子。在其他语言中，函数中使用的变量在该函数返回时被清除。在上面，x将是一个＆＃34;空指针＆＃34;，你需要建立一个getter和setter并开始传递引用。听起来不像JavaScript吗？感谢强大的关闭。

我为什么要关心？

你真的不必知道使用它们的闭包。但正如其他人也指出的那样，他们可以杠杆来创建虚假私有变量。在你需要私有变量之前，只需像往常一样使用它们。

Answer 48

来自个人blog post：

默认情况下，JavaScript知道两种类型的范围：全局和本地。

var a = 1;

function b(x) {
    var c = 2;
    return x * c;
}

在上面的代码中，变量a和函数b可以从代码中的任何地方（即全局）获得。变量c仅在b函数范围内（即本地）可用。大多数软件开发人员对这种缺乏范围灵活性感到不满意，特别是在大型程序中。

JavaScript闭包通过将函数与上下文绑定来帮助解决该问题：

function a(x) {
    return function b(y) {
        return x + y;
    }
}

此处，函数a返回一个名为b的函数。由于b是在a内定义的，因此它可以自动访问a中定义的任何内容，即本例中的x。这就是为什么b可以在不声明x的情况下返回y + x的原因。

var c = a(3);

变量c被赋予对带参数3的调用结果。即函数b的实例，其中x = 3.换句话说，{{1现在是一个等同于：

的函数

c

函数var c = function b(y) { return 3 + y; } 会在其上下文中记住b = 3。因此：

x

会将值3 + 4分配给var d = c(4); ，即7。

备注：如果有人在创建了函数d的实例后修改了x（例如x = 22）的值，那么这将是也反映在b中。因此，稍后调用b（4）将返回22 + 4，即26。

闭包也可用于限制全局声明的变量和方法的范围：

c

上面是一个闭包，其中函数没有名称，没有参数，并且立即被调用。突出显示的代码声明了全局变量(function () { var f = "Some message"; alert(f); })(); ，将f的范围限制为闭包。

现在，有一个常见的JavaScript警告，闭包可以帮助：

f

从上面可以看出，大多数人会假设数组var a = new Array(); for (var i=0; i<2; i++) { a[i]= function(x) { return x + i ; } } 将按如下方式初始化：

a

实际上，这是a的初始化方式，因为上下文中a[0] = function (x) { return x + 0 ; } a[1] = function (x) { return x + 1 ; } a[2] = function (x) { return x + 2 ; } 的最后一个值是2：

i

解决方案是：

a[0] = function (x) { return x + 2 ; }
a[1] = function (x) { return x + 2 ; }
a[2] = function (x) { return x + 2 ; }

在创建函数实例时，参数/变量var a = new Array(); for (var i=0; i<2; i++) { a[i]= function(tmp) { return function (x) { return x + tmp ; } } (i); } 包含tmp更改值的本地副本。

Answer 49

我发现非常清楚的第8章第6节“闭包”，由大卫弗拉纳根撰写的 JavaScript：The Definitive Guide ，第6版，O'Reilly，2011。我将尝试解释。

1. 调用函数时，会创建一个新对象来保存该调用的局部变量。

2. 函数的范围取决于其声明位置，而不是其执行位置。

现在，假设在外部函数中声明的内部函数并引用该外部函数的变量。进一步假设外部函数返回内部函数，作为函数。现在有一个外部引用，指向内部函数范围内的任何值（根据我们的假设，它包括外部函数的值）。

JavaScript将保留这些值，因为它们已经在完成的外部函数中传递，因此它们仍然保留在当前执行的范围内。所有函数都是闭包，但感兴趣的闭包是内部函数，在我们假设的场景中，当它们（内部函数）被返回时，它们在“封闭”内保留外部函数值（我希望我在这里正确使用语言）来自外部功能。我知道这不符合六年的要求，但希望它仍然有用。

Answer 50

我敢肯定，Einstein并没有直截了当地期待我们选择任何深奥的头脑风暴的事情，而是为了让那些'疯狂'徒劳无功地试图超过六岁的孩子（以及对于他们幼稚的人来说，对他们来说更糟糕的事情:)如果我六岁，我不想有这样的父母，或者不会与这些无聊的慈善家建立友谊，抱歉：）

无论如何，对于婴儿来说，关闭只是一个拥抱，我猜，无论你怎么解释:)当你拥抱你的朋友时，你们两个都是分享你们现在所拥有的一切。这是一个通过仪式，一旦你拥抱了某个人，你就会表现出她的信任，并愿意让她与你做很多你不允许的事情并且会躲避别人。这是一种友谊的行为:)。

我真的不知道如何向5-6岁的婴儿解释它。我不认为他们会欣赏任何JavaScript代码片段，如：

function Baby(){
    this.iTrustYou = true;
}

Baby.prototype.hug = function (baby) {
    var smiles = 0;

    if (baby.iTrustYou) {
        return function() {
            smiles++;
            alert(smiles);
        };
    }
};

var
   arman = new Baby("Arman"),
   morgan = new Baby("Morgana");

var hug = arman.hug(morgan);
hug();
hug();

仅限儿童：

关闭是拥抱

错误 飞行

KISS smooch！：）

Answer 51

如果你想向一个六岁的孩子解释，那么你必须找到一些非常简单且没有代码的东西。

告诉孩子他是“开放的”，这表明他能够与其他人，他的朋友建立关系。在某个时间点，他确定了朋友（我们可以知道他朋友的名字），这是一个封闭。如果你拍摄他和他的朋友的照片，那么他相对于他的友谊能力是“封闭的”。但总的来说，他是“开放的”。在他的一生中，他会有许多不同的朋友。其中一组是关闭。

Answer 52

函数在定义它的对象/函数的范围内执行。所述函数可以访问在执行时已定义的对象/函数中定义的变量。

从字面上看它......就像代码写的那样：P

Answer 53

  

闭包是一个可以访问父作用域的函数，即使在父函数关闭之后也是如此。

var add = (function() {
  var counter = 0;
  return function() {
    return counter += 1;
  }
})();

add();
add();
add();
// The counter is now 3

示例说明：

• 为变量add分配自调用函数的返回值。
• 自我调用功能只运行一次。它将计数器设置为零（0），并返回一个函数表达式。
• 这种方式成为一种功能。 ＆＃34;精彩＆＃34;部分是它可以访问父范围中的计数器。
• 这称为JavaScript闭包。它使一个函数可以拥有＆＃34; private＆＃34;变量
• 计数器受匿名函数范围的保护，只能使用add函数进行更改。

Source

Answer 54

闭包是一种方法，在父函数已经终止之后，内部函数可以通过这些函数引用外部封闭函数中存在的变量。

// A function that generates a new function for adding numbers.
function addGenerator( num ) {
    // Return a simple function for adding two numbers
    // with the first number borrowed from the generator
    return function( toAdd ) {
        return num + toAdd
    };
}

// addFive now contains a function that takes one argument,
// adds five to it, and returns the resulting number.
var addFive = addGenerator( 5 );
// We can see here that the result of the addFive function is 9,
// when passed an argument of 4.
alert( addFive( 4 ) == 9 );

Answer 55

想象一下，你镇上有一个非常大的公园，你会看到一个名叫科德先生的魔术师用他的魔杖（称为JavaScript）在公园的不同角落开始棒球比赛。

当然，每个棒球比赛都有完全相同的规则，每个比赛都有自己的比分板。

当然，一个棒球比赛的得分与其他比赛完全分开。

关闭是特别的方式，科德先生将他所有神奇的棒球比赛的得分分开。

Answer 56

如果你理解得很清楚，你可以解释一下。最简单的方法是从上下文中抽象出来。除了代码，甚至编程放在一边。一个比喻的例子会做得更好。

让我们想象一个功能是一个墙壁是玻璃的房间，但它们是特殊的玻璃，就像审讯室里的那样。从外面看，它们是不透明的，从内部透明。它可以是其他房间内的房间，唯一的联系方式是电话。

如果你从外面打电话，你不知道里面有什么，但你知道如果你给他们一定的信息，里面的人会做任务。他们可以看到外面的东西，所以他们可以向你询问外面的东西并对那些东西做出改变，但你不能从外面改变它的内部，你甚至看不到（知道）里面的内容。你打电话给那个房间的人看到外面的东西，但不知道房间内的房间是什么，所以他们就像你从外面那样与他们互动。最内部房间里面的人可以看到很多东西，但最外层房间的人甚至不知道最内部房间的存在。

对于内室的每次通话，该房间的人都会记录有关该特定通话的信息​​，并且他们做得非常好，以至于他们从不会将一个通话内容与其他通话内容混淆。

房间是功能，可见性是范围，人做任务是陈述，东西是对象，电话是函数调用，电话信息是参数，呼叫记录是范围实例，最外层房间是全局对象。

Answer 57

Pinocchio：1883年的封闭（JavaScript之前的一个世纪）

我认为这可以最好地解释给一个6岁的孩子进行一次不错的冒险...... Adventures of Pinocchio的部分是Pinocchio被一只超大的鲨鱼吞噬的......

＆＃13;

＆＃13;

var tellStoryOfPinocchio = function(original) {

  // Prepare for exciting things to happen
  var pinocchioFindsMisterGeppetto;
  var happyEnding;

  // The story starts where Pinocchio searches for his 'father'
  var pinocchio = {
    name: 'Pinocchio',
    location: 'in the sea',
    noseLength: 2
  };

  // Is it a dog... is it a fish...
  // The dogfish appears, however there is no such concept as the belly
  // of the monster, there is just a monster...
  var terribleDogfish = {
    swallowWhole: function(snack) {
      // The swallowing of Pinocchio introduces a new environment (for the
      // things happening inside it)...
      // The BELLY closure... with all of its guts and attributes
      var mysteriousLightLocation = 'at Gepetto\'s ship';

      // Yes: in my version of the story the monsters mouth is directly
      // connected to its belly... This might explain the low ratings
      // I had for biology...
      var mouthLocation = 'in the monsters mouth and then outside';

      var puppet = snack;


      puppet.location = 'inside the belly';
      alert(snack.name + ' is swallowed by the terrible dogfish...');

      // Being inside the belly, Pinocchio can now experience new adventures inside it
      pinocchioFindsMisterGeppetto = function() {
        // The event of Pinocchio finding Mister Geppetto happens inside the
        // belly and so it makes sence that it refers to the things inside
        // the belly (closure) like the mysterious light and of course the
        // hero Pinocchio himself!
        alert(puppet.name + ' sees a mysterious light (also in the belly of the dogfish) in the distance and swims to it to find Mister Geppetto! He survived on ship supplies for two years after being swallowed himself. ');
        puppet.location = mysteriousLightLocation;

        alert(puppet.name + ' tells Mister Geppetto he missed him every single day! ');
        puppet.noseLength++;
      }

      happyEnding = function() {
        // The escape of Pinocchio and Mister Geppetto happens inside the belly:
        // it refers to Pinocchio and the mouth of the beast.
        alert('After finding Mister Gepetto, ' + puppet.name + ' and Mister Gepetto travel to the mouth of the monster.');
        alert('The monster sleeps with its mouth open above the surface of the water. They escape through its mouth. ');
        puppet.location = mouthLocation;
        if (original) {
          alert(puppet.name + ' is eventually hanged for his innumerable faults. ');
        } else {
          alert(puppet.name + ' is eventually turned into a real boy and they all lived happily ever after...');
        }
      }
    }
  }

  alert('Once upon a time...');
  alert('Fast forward to the moment that Pinocchio is searching for his \'father\'...');
  alert('Pinocchio is ' + pinocchio.location + '.');
  terribleDogfish.swallowWhole(pinocchio);
  alert('Pinocchio is ' + pinocchio.location + '.');
  pinocchioFindsMisterGeppetto();
  alert('Pinocchio is ' + pinocchio.location + '.');
  happyEnding();
  alert('Pinocchio is ' + pinocchio.location + '.');

  if (pinocchio.noseLength > 2)
    console.log('Hmmm... apparently a little white lie was told. ');
}

tellStoryOfPinocchio(false);

 

＆＃13;

＆＃13;

＆＃13;

Answer 58

调用函数后，它将超出范围。如果该函数包含类似回调函数的内容，则该回调函数仍在范围内。如果回调函数在父函数的直接环境中引用了一些局部变量，那么你自然会希望该变量对回调函数是不可访问的并返回undefined。

闭包确保回调函数引用的任何属性都可供该函数使用，即使其父函数可能已超出范围。

Answer 59

也许您应该考虑面向对象的结构而不是内部函数。例如：

var calculate = {
    number: 0,
    init: function (num) {
        this.number = num;
    },
    add: function (val) {
        this.number += val;
    },
    rem: function (val) {
        this.number -= val;
    }
};

并从calculate.number变量中读取结果，该变量需要＆＃34; return＆＃34;反正。

Answer 60

闭包是一个符合三个标准的代码块：

• 它可以作为值和

传递

• 具有该值的任何人按需执行

• 它可以从创建它的上下文中引用变量 （也就是说，它在变量访问方面是关闭的 数学意义上的“封闭”一词）。

（“闭包”这个词实际上有一个不精确的含义，有些人不认为标准＃1是定义的一部分。我认为是。）

闭包是函数式语言的支柱，但它们也存在于许多其他语言中（例如，Java的匿名内部类）。你可以用它们做很酷的事情：它们允许延迟执行和一些优雅的风格。

作者：Paul Cantrell，@ http://innig.net/software/ruby/closures-in-ruby

Answer 61

当内部函数以某种方式可用于外部函数之外的任何作用域时，将创建闭包。

示例：

var outer = function(params){ //Outer function defines a variable called params
    var inner = function(){ // Inner function has access to the params variable of the outer function
        return params;
    }
    return inner; //Return inner function exposing it to outer scope
},
myFunc = outer("myParams");
myFunc(); //Returns "myParams"

Answer 62

闭包很简单

你可能不应该告诉一个六岁的闭包，但是如果你这样做，你可能会说闭包能够获得对在其他函数范围内声明的变量的访问权。

＆＃13;

＆＃13;

function getA() {
  var a = [];

  // this action happens later,
  // after the function returned
  // the `a` value
  setTimeout(function() {
    a.splice(0, 0, 1, 2, 3, 4, 5);
  });

  return a;
}

var a = getA();
out('What is `a` length?');
out('`a` length is ' + a.length);

setTimeout(function() {
  out('No wait...');
  out('`a` length is ' + a.length);
  out('OK :|')
});

＆＃13;

<pre id="output"></pre>

<script>
  function out(k) {
    document.getElementById('output').innerHTML += '> ' + k + '\n';
  }
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 63

不包含自由变量的函数称为纯函数。

包含一个或多个自由变量的函数称为闭包。

var pure = function pure(x){
  return x 
  // only own environment is used
}

var foo = "bar"

var closure = function closure(){
  return foo
  // foo is free variable from the outer environment
}

^{src：https://leanpub.com/javascriptallongesix/read#leanpub-auto-if-functions-without-free-variables-are-pure-are-closures-impure}

Answer 64

闭包是一种稍微高级且经常被误解的JavaScript语言功能。简而言之，闭包是包含函数的对象，以及对创建函数的环境的引用。但是，为了完全理解闭包，JavaScript语言还有两个必须首先被理解的特性 - 第一类函数和内部函数。

一流功能

在编程语言中，如果函数可以像任何其他数据类型一样被操作，则它们被认为是一等公民。例如，可以在运行时构造第一类函数并将其分配给变量。它们也可以传递给其他函数并由其他函数返回。除了满足前面提到的标准外，JavaScript函数还有自己的属性和方法。以下示例显示了一流函数的一些功能。在该示例中，创建了两个函数并将其分配给变量“foo”和“bar”。存储在“foo”中的函数显示一个对话框，而“bar”只返回传递给它的任何参数。该示例的最后一行做了几件事。首先，以“foo”作为参数调用存储在“bar”中的函数。 “bar”然后返回“foo”函数引用。最后，调用返回的“foo”引用，导致显示“Hello World！”。

var foo = function() {
  alert("Hello World!");
};

var bar = function(arg) {
  return arg;
};

bar(foo)();

内部功能

内部函数，也称为嵌套函数，是在另一个函数内部定义的函数（称为外部函数）。每次调用外部函数时，都会创建内部函数的实例。以下示例显示了如何使用内部函数。在这种情况下，add（）是外部函数。在add（）内部，定义并调用doAdd（）内部函数。

function add(value1, value2) {
  function doAdd(operand1, operand2) {
    return operand1 + operand2;
  }

  return doAdd(value1, value2);
}

var foo = add(1, 2);
// foo equals 3

内部函数的一个重要特征是它们具有对外部函数范围的隐式访问。这意味着内部函数可以使用外部函数的变量，参数等。在前面的示例中，add（）的“ value1 ”和“ value2 ”参数作为“ doAdd（） > operand1 “和”operand2“参数。但是，这是不必要的，因为 doAdd（）可以直接访问“ value1 ”和“ value2 ”。上面的示例已在下面重写，以显示 doAdd（）如何使用“ value1 ”和“ value2 ”。

function add(value1, value2) {
  function doAdd() {
    return value1 + value2;
  }

  return doAdd();
}

var foo = add(1, 2);
// foo equals 3

  

创建闭包

     

当可以从中访问内部函数时创建闭包   在创建它的函数之外。这通常发生在   outer函数返回一个内部函数。当发生这种情况时，   内部函数维护对其所在环境的引用   创建了。这意味着它会记住所有变量（和   那些在当时范围内的价值观。以下示例   显示了如何创建和使用闭包。

function add(value1) {
  return function doAdd(value2) {
    return value1 + value2;
  };
}

var increment = add(1);
var foo = increment(2);
// foo equals 3

关于这个例子，有很多事情需要注意。

add（）函数返回其内部函数doAdd（）。通过返回对内部函数的引用，创建了一个闭包。 “value1”是add（）的局部变量，是doAdd（）的非局部变量。非局部变量指的是既不在本地也不在全局范围内的变量。 “value2”是doAdd（）的局部变量。 调用add（1）时，将创建一个闭包并以“increment”存储。在闭包的引用环境中，“value1”绑定到值1。被绑定的变量也被认为是封闭的。这就是名称封闭的来源。 调用increment（2）时，输入闭包。这意味着调用doAdd（），其中“value1”变量保持值为1。封闭基本上可以被认为是创建以下功能。

function increment(value2) {
  return 1 + value2;
}

  

何时使用闭包

     

闭包可用于完成许多事情。它们非常有用   用于配置带参数的回调函数。这个   本节介绍了两种情况，即封闭可以让你的生活如此   开发人员更简单。

使用计时器

与 setTimeout（）和 setInterval（）函数结合使用时，闭包非常有用。更具体地说，闭包允许您将参数传递给 setTimeout（）和 setInterval（）的回调函数。例如，以下代码通过调用 showMessage（）每秒打印一次字符串“some message”。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Closures</title>
  <meta charset="UTF-8" />
  <script>
    window.addEventListener("load", function() {
      window.setInterval(showMessage, 1000, "some message<br />");
    });

    function showMessage(message) {
      document.getElementById("message").innerHTML += message;
    }
  </script>
</head>
<body>
  <span id="message"></span>
</body>
</html>

不幸的是，Internet Explorer不支持通过setInterval（）传递回调参数。 Internet Explorer不显示“某些消息”，而是显示“未定义”（因为实际上没有值传递给showMessage（））。要解决此问题，可以创建一个闭包，它将“message”参数绑定到所需的值。然后可以将闭包用作setInterval（）的回调函数。为了说明这个概念，下面重写了上一个例子中的JavaScript代码以使用闭包。

window.addEventListener("load", function() {
  var showMessage = getClosure("some message<br />");

  window.setInterval(showMessage, 1000);
});

function getClosure(message) {
  function showMessage() {
    document.getElementById("message").innerHTML += message;
  }

  return showMessage;
}

模拟私人数据

许多面向对象的语言支持私有成员数据的概念。但是，JavaScript不是纯粹的面向对象语言，也不支持私有数据。但是，可以使用闭包来模拟私有数据。回想一下，闭包包含对最初创建它的环境的引用 - 现在它已超出范围。由于引用环境中的变量只能从闭包函数访问，因此它们本质上是私有数据。

以下示例显示了一个简单Person类的构造函数。创建每个Person时，将通过“ name ”参数为其指定名称。在内部，Person将其名称存储在“ _name ”变量中。遵循良好的面向对象编程实践，还提供了方法 getName（）来检索名称。

function Person(name) {
  this._name = name;

  this.getName = function() {
    return this._name;
  };
}

Person类还有一个主要问题。因为JavaScript不支持私有数据，所以没有什么可以阻止其他人出现并更改名称。例如，以下代码创建名为Colin的Person，然后将其名称更改为Tom。

var person = new Person("Colin");

person._name = "Tom";
// person.getName() now returns "Tom"

就个人而言，如果只有任何人能够合法地改变我的名字，我不会喜欢它。为了阻止这种情况发生，可以使用闭包来使“_name”变量变为私有。使用闭包在下面重写了Person构造函数。请注意，“_ name”现在是Person构造函数的局部变量，而不是对象属性。形成闭包是因为外部函数 Person（）通过创建公共 getName（）方法来公开内部函数。

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };
}

现在，当调用getName（）时，可以保证返回最初传递给构造函数的值。某人仍然可以向对象添加新的“_name”属性，但只要它们引用闭包绑定的变量，对象的内部工作就不会受到影响。以下代码显示“_name”变量确实是私有的。

var person = new Person("Colin");

person._name = "Tom";
// person._name is "Tom" but person.getName() returns "Colin"

  

何时不使用闭包

     

了解闭包的工作原理以及何时使用它们非常重要。   了解它们何时不是正确的工具同样重要   为了手头的工作。过度使用闭包会导致脚本执行   慢慢地消耗不必要的记忆。因为封闭是如此   简单的创建，有可能在不知不觉中滥用它们   它。本节介绍了应该关闭的几种情况   谨慎使用。

循环

在循环中创建闭包可能会产生误导性结果。这方面的一个例子如下所示。在此示例中，创建了三个按钮。单击“button1”时，应显示“单击按钮1”的警报。应为“button2”和“button3”显示类似的消息。但是，运行此代码时，所有按钮都显示“单击按钮4”。这是因为，当单击其中一个按钮时，循环已完成执行，循环变量已达到其最终值4。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Closures</title>
  <meta charset="UTF-8" />
  <script>
    window.addEventListener("load", function() {
      for (var i = 1; i < 4; i++) {
        var button = document.getElementById("button" + i);

        button.addEventListener("click", function() {
          alert("Clicked button " + i);
        });
      }
    });
  </script>
</head>
<body>
  <input type="button" id="button1" value="One" />
  <input type="button" id="button2" value="Two" />
  <input type="button" id="button3" value="Three" />
</body>
</html>

要解决此问题，必须将闭包与实际循环变量分离。这可以通过调用新函数来完成，该函数又创建新的引用环境。以下示例显示了如何完成此操作。循环变量传递给getHandler（）函数。 getHandler（）然后返回一个独立于原始“for”循环的闭包。

function getHandler(i) {
  return function handler() {
    alert("Clicked button " + i);
  };
}
window.addEventListener("load", function() {
  for (var i = 1; i < 4; i++) {
    var button = document.getElementById("button" + i);
    button.addEventListener("click", getHandler(i));
  }
});

  

在构造函数中不必要的使用

     

构造函数是关闭滥用的另一个常见原因。   我们已经看到了如何使用闭包来模拟私有数据。然而，   如果实际上没有将方法实现为闭包，那就太过分了   访问私人数据。以下示例重新访问Person   class，但是这次添加了一个不使用的sayHello（）方法   私人数据。

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };

  this.sayHello = function() {
    alert("Hello!");
  };
}

  

每次实例化Person时，都会花费时间来创建   sayHello（）方法。如果创建了许多Person对象，则会成为   浪费时间。更好的方法是将sayHello（）添加到   人原型。通过添加到原型，所有Person对象都可以   分享相同的方法。这样可以节省构造函数中的时间   必须为每个实例创建一个闭包。上一个例子是   下面改写了无关的封闭移动到原型中。

function Person(name) {
  var _name = name;

  this.getName = function() {
    return _name;
  };
}

Person.prototype.sayHello = function() {
  alert("Hello!");
};

要记住的事情

• 闭包包含一个函数和对环境的引用 该功能已创建。
• 当外部函数暴露内部函数时形成闭包。 闭包可用于轻松地将参数传递给回调函数。
• 可以使用闭包来模拟私有数据。这很常见 面向对象的编程和命名空间设计。
• 闭包不应该在构造函数中过度使用。添加到 原型是一个更好的主意。

Link

Answer 65

考虑到问题是关于解释它就好像是一个 6岁，我的回答是：

“当你在JavaScript中声明一个函数时，它永远可以访问该函数声明之前的行中可用的所有变量和函数。函数以及它可以访问的所有外部变量和函数是我们称之为封闭。“

Answer 66

MDN解释说我认为最好：

  

闭包是指独立（自由）变量的函数。换句话说，闭包中定义的函数“记住”创建它的环境。

闭包始终具有外部功能和内部功能。内部函数是所有工作发生的地方，外部函数只是保留内部函数创建范围的环境。通过这种方式，闭包的内部函数“记住”创建它的环境/范围。最经典的例子是计数器功能：

var closure = function() {
  var count = 0;
  return function() {
    count++;
    console.log(count);
  };
};

var counter = closure();

counter() // returns 1
counter() // returns 2
counter() // returns 3

在上面的代码中，count由外部函数（环境函数）保留，因此每次调用counter()时，内部函数（工作函数）都可以递增它。

Answer 67

我喜欢Kyle Simpson对闭包的定义：

  

关闭是指函数能够记住并访问其词法   范围，即使该函数在其词法范围之外执行。

词法范围是指内部范围可以访问其外部范围。

这是他在他的书系列中提供的一个修改过的例子“你不知道JS：范围＆amp; amp;瓶盖＆＃39 ;.

char temp[128];
strcpy(temp, word);

Answer 68

闭包是指一个函数关闭的方式，它是在命名空间中定义的，它在调用函数时是不可变的。

在JavaScript中，它发生在你：

• 在另一个函数
中定义一个函数
• 在返回外部函数后调用内部函数

// 'name' is resolved in the namespace created for one invocation of bindMessage
// the processor cannot enter this namespace by the time displayMessage is called
function bindMessage(name, div) {

    function displayMessage() {
        alert('This is ' + name);
    }

    $(div).click(displayMessage);
}

Answer 69

对于一个六岁的孩子......

你知道对象是什么吗？

对象是具有属性和做事的东西。

关于闭包最重要的一点是它们允许你用JavaScript创建对象。 JavaScript中的对象只是函数和闭包，它允许JavaScript在创建对象后存储属性的值。

对象非常有用并且保持一切美观和有条理。不同的对象可以做不同的工作，一起工作对象可以做很复杂的事情。

幸运的是JavaScript已经关闭了制作对象，否则一切都会成为一个混乱的噩梦。

Answer 70

这是一个初学者如何将一个人的头部缠绕在一起，就像一个函数被包裹在一个函数体内，也称为 Closures 。

“Speaking JavaScript”一书中的定义“闭包是一个函数加上与函数创建范围的连接” - Dr.Axel Rauschmayer

那看起来怎么样？这是一个例子

function newCounter() {
  var counter = 0;
   return function increment() {
    counter += 1;
   }
}

var counter1 = newCounter();
var counter2 = newCounter();

counter1(); // Number of events: 1
counter1(); // Number of events: 2
counter2(); // Number of events: 1
counter1(); // Number of events: 3

newCounter 关闭增量，计数器可以通过增量引用和访问。

counter1 和 counter2 会跟踪自己的价值。

简单但有希望清楚地了解封闭围绕着所有这些伟大而先进的答案。

Answer 71

最好的方法是逐步解释这些概念：

<强>变量

console.log(x);
// undefined

在这里，undefined是JavaScript的说法“我不知道x的含义。”

  

变量就像标签。

您可以说，将x标记为值42：

var x = 42;
console.log(x);
// 42

现在JavaScript知道x的含义。

  

您也可以重新分配变量。

使标记x指向不同的值：

x = 43;
console.log(x);
// 43

现在x意味着别的东西。

<强>范围

  

当你创建一个函数时，该函数有自己的变量“框”。

function A() {
  var x = 42;
}

console.log(x);

// undefined

从盒子外面，你看不到盒子里面的东西。

但是从盒子里面，你可以看到盒子外面的东西：

var x = 42;

function A() {
  console.log(x);
}

// 42

  

在内部功能A中，您拥有x的“范围访问权限”。

现在，如果你有两个并排的盒子：

function A() {
  var x = 42;
}

function B() {
  console.log(x);
}

// undefined

  

在函数B内，您无法访问函数A内的变量。

但是如果你将定义函数B放在函数A中：

function A() {

  var x = 42;

  function B() {
    console.log(x);
  }

}

// 42

您现在拥有“范围访问权限”。

<强>功能

在JavaScript中，您可以通过调用它来运行函数：

function A() {
  console.log(42);
}

像这样：

A();

// 42

作为值的功能

在JavaScript中，您可以将标记指向函数，就像指向数字一样：

var a = function() {
  console.log(42);
};

  

变量a现在表示一个函数，您可以运行它。

a();
// 42

你也可以传递这个变量：

setTimeout(a, 1000);

在第二个（1000毫秒）中，函数a指向：

// 42

关闭范围

现在，当您定义函数时，这些函数可以访问其外部作用域。

当您将函数作为值传递时，如果访问丢失将会很麻烦。

  

在JavaScript中，函数可以访问外部作用域变量。   即使他们被传递到其他地方也可以运行。

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  // but you want to run `b` later, rather than right away
  setTimeout(b, 1000);

}

现在发生了什么？

// 'Hello!'

或者考虑一下：

var c;

var a = function() {

  var text = 'Hello!'

  var b = function() {
    console.log(text);
    // inside function `b`, you have access to `text`
  };

  c = b;

}

// now we are out side of function `a`
// call `a` so the code inside `a` runs
a(); 

// now `c` has a value that is a function
// because what happened when `a` ran

// when you run `c`
c();

// 'Hello!'

  

您仍然可以在闭包范围内访问变量。

即使a已完成投放，现在您在c之外运行a。

这里发生的事情在JavaScript中称为“ 闭包 ”。

Answer 72

曾经有一个穴居人

function caveman {

谁拥有非常特别的摇滚乐，

var rock = "diamond";

你自己无法获得岩石，因为它是在穴居人的私人洞穴里。只有穴居人知道如何找到并获得岩石。

return {
    getRock: function() {
        return rock;
    }
};
}

幸运的是，他是一个友善的穴居人，如果你愿意等他回来，他很乐意为你服务。

var friend = caveman();
var rock = friend.getRock();

非常聪明的穴居人。

Answer 73

关闭并不难理解。这只取决于观点。

我个人喜欢在日常生活中使用它们。

function createCar()
{
    var rawMaterial = [/* lots of object */];
    function transformation(rawMaterials)
    {
       /* lots of changement here */
       return transformedMaterial;
    }
    var transformedMaterial = transformation(rawMaterial);
    function assemblage(transformedMaterial)
    {
        /*Assemblage of parts*/
        return car;
    }
    return assemblage(transformedMaterial);
}

我们只需要在特定情况下执行某些步骤。至于材料的转换只有在你有零件时才有用。

Answer 74

我能想到解释 JavaScript闭包的最简单的用例是模块模式。在模块模式中，您可以定义一个函数，然后在所谓的立即调用函数表达式（IIFE）中立即调用它。 您在该函数中编写的所有内容都具有私有范围，因为它是在闭包内定义的，因此允许您在JavaScript中“模拟”隐私。像这样：

 var Closure = (function () {
    // This is a closure
    // Any methods, variables and properties you define here are "private"
    // and can't be accessed from outside the function.

    //This is a private variable
    var foo = "";

    //This is a private method
    var method = function(){

    }
})();

另一方面，如果您想在闭包外部显示一个或多个变量或方法，则可以将它们返回到对象文字中。像这样：

var Closure = (function () {
  // This is a closure
  // Any methods, variables and properties you define here are "private"
  // and can't be accessed from outside the function.

  //This is a private variable
  var foo = "";

  //This is a private method
  var method = function(){

  }

  //The method will be accessible from outside the closure
  return {
    method: method
  }

})();

Closure.method();

希望它有所帮助。 的问候，

Answer 75

单词 closure 只是指能够访问关闭的对象（六岁的东西）（六） 功能（六岁：盒子）中的一岁：私人）。即使功能（六岁：盒子）超出范围（六岁：远远地发送）。

Answer 76

让我们从这里开始，如在MDN上定义的那样：Closures是指独立（自由）变量的函数（在本地使用但在封闭范围内定义的变量）。换句话说，这些功能记得＆＃39;他们被创造的环境。

词汇范围
请考虑以下事项：

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function    
  }
  displayName();    
}
init();

init（）创建一个名为name的局部变量和一个名为displayName（）的函数。 displayName（）函数是一个在init（）中定义的内部函数，只能在init（）函数体内使用。 displayName（）函数没有自己的局部变量。但是，因为内部函数可以访问外部函数的变量，所以displayName（）可以访问父函数init（）中声明的变量名。

function init() {
    var name = "Mozilla"; // name is a local variable created by init
    function displayName() { // displayName() is the inner function, a closure
        alert (name); // displayName() uses variable declared in the parent function    
    }
    displayName();    
}
init();

运行代码并注意displayName（）函数中的alert（）语句成功显示name变量的值，该值在其父函数中声明。这是词法作用域的一个示例，它描述了解析器在嵌套函数时如何解析变量名称。单词＆＃34; lexical＆＃34;指的是词法作用域使用在源代码中声明变量的位置来确定变量可用的位置。嵌套函数可以访问在其外部作用域中声明的变量。

<强>封闭
现在考虑以下示例：

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

运行此代码与上面的init（）函数的前一个示例具有完全相同的效果：这次，字符串＆＃34; Mozilla＆＃34;将显示在JavaScript警告框中。不同的是，有趣的是displayName（）内部函数在执行之前从外部函数返回。

乍一看，这段代码仍然有用，似乎不太直观。在某些编程语言中，函数内的局部变量仅在该函数的执行期间存在。一旦makeFunc（）完成执行，您可能会期望名称变量不再可访问。但是，因为代码仍然按预期工作，所以在JavaScript中显然不是这样。

原因是JavaScript中的函数形成了闭包。闭包是函数和声明该函数的词法环境的组合。此环境由创建闭包时在范围内的任何局部变量组成。在这种情况下，myFunc是对运行makeFunc时创建的函数displayName的实例的引用。 displayName的实例维护对其词汇环境的引用，其中存在变量名称。出于这个原因，当调用myFunc时，变量名仍可供使用，＆＃34; Mozilla＆＃34;被传递给警报。

这是一个稍微有趣的例子 - makeAdder函数：

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

在这个例子中，我们定义了一个函数makeAdder（x），它接受一个参数x，并返回一个新函数。它返回的函数接受一个参数y，并返回x和y之和。

本质上，makeAdder是一个函数工厂 - 它创建的函数可以为其参数添加特定值。在上面的例子中，我们使用函数工厂创建了两个新函数 - 一个为其参数添加5，另一个添加10。

add5和add10都是闭包。它们共享相同的函数体定义，但存储不同的词法环境。在add5的词汇环境中，x是5，而在add10的词汇环境中，x是10。

实用闭包

闭包非常有用，因为它们允许您将某些数据（词法环境）与对该数据进行操作的函数相关联。这与面向对象编程有明显的相似之处，其中对象允许我们将一些数据（对象的属性）与一个或多个方法相关联。

因此，您可以在通常只使用一种方法的任何地方使用闭包。

您可能希望这样做的情况在网络上特别常见。我们在前端JavaScript中编写的大部分代码都是基于事件的 - 我们定义了一些行为，然后将其附加到用户触发的事件（例如点击或按键）。我们的代码通常作为回调附加：单个函数，它是为响应事件而执行的。

例如，假设我们希望向调整文本大小的页面添加一些按钮。一种方法是指定body元素的font-size（以像素为单位），然后使用相对的em单位设置页面上其他元素的大小（例如标题）：

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.2em;
}

我们的交互式文字大小按钮可以更改body元素的font-size属性，并且由于相对单位，调整将被页面上的其他元素拾取。 这是JavaScript：

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

size12，size14和size16现在是将正文文本分别调整为12,14和16像素的函数。我们可以将它们附加到按钮（在本例中为链接），如下所示：

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>


function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

要了解有关闭包的更多信息，请访问link on MDN

Answer 77

闭包基本上创造了两件事： - 一个功能 - 只有该功能可以访问的私有范围

就像在功能周围涂上一些涂层一样。

所以对于一个6岁的孩子来说，可以用类比来解释。假设我建造了一个机器人。那个机器人可以做很多事情。在这些事情中，我把它编程为计算他在天空中看到的鸟的数量。每次他看到25只鸟，他都应该告诉我他从一开始就看到了多少只鸟。

除非他告诉我，否则我不知道他见过多少只鸟。只有他知道。这是私人范围。这基本上就是机器人的记忆。假设我给了他4 GB。

告诉我他看过多少只鸟是返回的功能。我也创造了这个。

这个比喻有点太糟糕了，但我想有人可以改进它。

Answer 78

我以前读过所有这些，但它们都非常有用。有些人非常接近得到简单的解释然后变得复杂或保持抽象，打败目的并且未能显示非常简单的现实世界用途。

虽然通过所有的例子和解释你可以很好地了解闭包是什么，而不是通过评论和代码，我仍然不满意一个非常简单的插图，帮助我获得闭包有用而不会变得如此复杂。我的妻子想要学习编码，我想我不仅要在这里展示什么，而且为什么，以及如何。

我不确定一个六岁的孩子会不会这样，但我认为这可能会更接近于以现实世界的方式展示一个简单的案例，这个案例可能非常有用并且很容易理解。

最好的（或最接近最简单的）之一就是复述莫里斯的傻瓜闭馆例子。

将“SayHi2Bob”概念更进一步展示了阅读所有答案可以收集到的两个基本内容：

1. 闭包可以访问包含函数的变量。
2. 闭包持久存在于自己的内存空间中（因此对各种oop-y实例化内容都很有用）

向我自己证明和证明这一点，我做了一点小提琴：

http://jsfiddle.net/9ZMyr/2/

function sayHello(name) {
  var text = 'Hello ' + name; // Local variable
  console.log(text);
  var sayAlert = function () {
      alert(text);
  }
  return sayAlert;
}

sayHello(); 
/* This will write 'Hello undefined' to the console (in Chrome anyway), 
but will not alert though since it returns a function handle to nothing). 
Since no handle or reference is created, I imagine a good js engine would 
destroy/dispose of the internal sayAlert function once it completes. */

// Create a handle/reference/instance of sayHello() using the name 'Bob'
sayHelloBob = sayHello('Bob');
sayHelloBob();

// Create another handle or reference to sayHello with a different name
sayHelloGerry = sayHello('Gerry');
sayHelloGerry();

/* Now calling them again demonstrates that each handle or reference contains its own 
unique local variable memory space. They remain in memory 'forever' 
(or until your computer/browser explode) */
sayHelloBob();
sayHelloGerry();

这展示了关于闭包的两个基本概念。

用简单的术语来解释为什么这很有用，我有一个基本函数，我可以在其中创建包含在该内存引用中持久保存的唯一数据的引用或句柄。每次我想说出别人的名字时，我都不必重写这个功能。我已将该例程封装起来并使其可重用。

对我而言，这至少导致构造函数，oop实践，单例与实例化实例及其自身数据等的基本概念等。

如果你开始使用这个新手，那么你可以继续进行更复杂的基于对象属性/成员的调用，并希望这些概念可以随身携带。

Answer 79

我认为退后一步并检查一个更为笼统的“闭包”概念是有价值的 - 即所谓的“联合运算符”。

在数学中，“join”运算符是部分有序集合上的函数，它返回大于或等于其参数的最小对象。在符号中，连接[a，b] = d使得d> = a且d> = b，但是不存在e使得d> d。 e> = a或d> e＆gt; = b。

因此，连接为您提供了比部件“更大”的最小东西。

现在，请注意JavaScript范围是部分有序的结构。因此，有一个合情合理的概念。特别是，范围的连接是比原始范围更大的最小范围。该范围称为闭包。

因此变量a，b，c的闭包是将a，b和c带入范围的最小范围（在程序范围的格子中！）。

Answer 80

我对闭包的看法：

闭包可以与书架上的书籍进行比较。

假设您已经阅读了一本书，并且您喜欢本书中的某些页面。您在该页面上放置了一个书签来跟踪它。

现在，一旦你读完这本书，你就不再需要这本书了，除了你想要访问那个页面。你可能只是剪掉了页面，但是你会松开故事的背景。所以你把这本书放回书架上，带有书签。

这类似于闭包。这本书是外部函数，页面是你的内部函数，它从外部函数返回。书签是对页面的引用，故事的上下文是词法范围，您需要保留它。书架是功能堆栈，不能清理旧书，直到你抓住页面。

代码示例：

function book() {
   var pages = [....]; //array of pages in your book
   var bookMarkedPage = 20; //bookmarked page number
   function getPage(){
       return pages[bookMarkedPage];
   }
   return getPage;
}

var myBook = book(),
    myPage = myBook.getPage();

当你运行book()函数时，你正在堆栈中分配内存以使函数运行。但是由于它返回一个函数，因此内存函数无法释放内存函数，因为内部函数可以访问变量从它之外的上下文，在这种情况下'pages'和'bookMarkedPage'。

因此，有效地调用book()会返回对闭包的引用，即不仅是函数，而且是对书及其上下文的引用，即对函数 getPage 的引用，状态 pages 和 bookMarkedPage 变量。

需要考虑的一些要点：

第1点： 书架，就像功能堆栈一样，空间有限，所以明智地使用它。

第2点： 考虑一下这样一个事实：当您只想跟踪单个页面时是否需要保留整本书。您可以通过在返回闭包时不存储书中的所有页面来释放部分内存。

这是我对闭包的看法。希望它有所帮助，如果有人认为这是不正确的，请告诉我，因为我非常有兴趣了解更多关于范围和封闭的内容！

Answer 81

最简单，最简短，最容易理解的答案：

闭包是一个代码块，其中每一行可以引用具有相同变量名的同一组变量。

如果＆＃34;这＆＃34;意味着与其他地方不同的东西，然后你知道它是两个不同的封闭。

Answer 82

Also... Perhaps we should cut your 27-year-old friend a little slack, because the entire concept of "closures" really is(!) ... voodoo!

By that I mean: (a) you do not, intuitively, expect it ...AND... (b) when someone takes the time to explain it to you, you certainly do not expect it to work!

Intuition tells you that "this must be nonsense... surely it must result in some kind of syntax-error or something!" How on earth(!) could you, in effect, "pull a function from 'the middle of' wherever-it's-at," such that you could [still!] actually have read/write access to the context of "wherever-it-was-at?!"

When you finally realize that such a thing is possible, then ... sure ... anyone's after-the-fact reaction would be: "whoa-a-a-a(!)... kew-el-l-l-l...(!!!)"

But there will be a "big counter-intuitive hurdle" to overcome, first. Intuition gives you plenty of utterly-plausible expectations that such a thing would be "of course, absolutely nonsensical and therefore quite impossible."

Like I said: "it's voodoo."

Answer 83

关闭可以是私有和公共变量或函数。

var ClusureDemo = function() {
    //privare variables
    var localVa1, localVa2;

    //private functions
    var setVaOne = function(newVa) {
        localVa1 = newVa;
    },
    setVaTwo = function(newVa) {
        localVa2 = newVa;
    },
    getVaOne = function() {
        return localVa1;
    },
    getVaTwo = function() {
        return localVa2;
    };

    return {
        //public variables and functions
        outVaOne : localVa1,
        outVaTwo : localVa2,
        setVaOne : setVaOne,
        setVaTwo : setVaTwo,
        getVaOne : getVaOne,
        getVaTwo : getVaTwo
    };
};

//Test Demo
var app = new ClusureDemo();
app.outVaOne = 'Hello Variable One';
app.outVaTwo = 'Hello Variable Two';
app.setVaOne(app.outVaOne);
app.setVaTwo(app.outVaTwo);

alert(app.getVaOne());
alert(app.getVaTwo());

Demo

Answer 84

闭包只是在函数可以访问其外部作用域时，即使在作用域的函数执行完毕之后也是如此。 示例：

function multiplier(n) {
    function multiply(x) {
          return n*x;
    }
    return mutliply;
}

var 10xmultiplier = multiplier(10);
var x = 10xmultiplier(5); // x= 50

我们可以看到，即使在乘数完成执行之后，内部函数multiply仍然可以访问x的值，在本例中为10。

闭包的一个非常常见的用途就是currying（上面的例子），我们用参数逐步调整函数，而不是一次提供所有的参数。

我们可以实现这一点，因为Javascript（除了原型OOP）允许以功能方式编程，其中高阶函数可以将其他函数作为参数（fisrt类函数）。 functional programming in wikipedia

我强烈建议你阅读Kyle Simpson的这本书：2本书系列的一部分专门用于闭包，它被称为范围和闭包。 you don't know js: free reading on github

Answer 85

闭包是一种可以访问其定义的环境信息的函数。

对于某些人来说，信息是创建时环境中的值。对于其他人，信息是创建时环境中的变量。

如果闭包引用的词法环境属于已退出的函数，则（在关闭时引用环境中的变量）这些词汇变量将继续存在以供闭包引用。 / p>

闭包可以被认为是一个全局变量的特例 - 只为该函数创建了一个私有副本。

或者它可以被认为是一种方法，其中环境是对象的特定实例，其属性是环境中的变量。

前者（闭包作为环境）类似于后者，其中环境副本是传递给前者中每个函数的上下文变量，而实例变量在后者中形成上下文变量。

因此，闭包是一种调用函数的方法，无需将上下文明确指定为参数或方法调用中的对象。

var closure = createclosure(varForClosure);
closure(param1);  // closure has access to whatever createclosure gave it access to,
                  // including the parameter storing varForClosure.

VS

var contextvar = varForClosure; // use a struct for storing more than one..
contextclosure(contextvar, param1);

VS

var contextobj = new contextclass(varForClosure);
contextobj->objclosure(param1);

对于可维护的代码，我建议使用面向对象的方式。但是，对于快速简单的任务集（例如创建回调），闭包可以变得更自然，更清晰，尤其是在lamda或匿名函数的上下文中。