JavaScript关闭如何工作?

qodio 发布于 2019-11-10 closures 最后更新 2019-11-10 11:53 189 浏览

你如何解释JavaScript闭包给了解它们构成的概念的知识的人(例如函数,变量等),但是自己并不理解闭包? 我在Wikipedia上看到the Scheme example,但不幸的是它没有帮助。

已邀请:

ased

赞同来自:

内容太长未翻译

ket

赞同来自:

闭包就像一个物体。无论何时调用函数,它都会被实例化。 JavaScript中闭包的范围是词法,这意味着闭包所属的函数中包含的所有内容都可以访问其中的任何变量。 如果你,变量包含在闭包中

  1. 使用var foo=1;
  2. 分配
  3. 只需写下var foo;
如果内部函数(包含在另一个函数中的函数)访问这样的变量而没有在var自己的范围内定义它,它会修改外部闭包中变量的内容。 闭包比产生它的函数的运行时更长。如果其他函数使它超出定义它们的闭包/作用域(例如作为返回值),那些将继续引用该闭包。

实施例
 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

nipsa

赞同来自:

Pinocchio:1883年的封闭(在JavaScript之前的一个世纪) 我认为这可以最好地解释给一个6岁的子元素带着一个不错的冒险...... Adventures of Pinocchio的一部分,其中Pinocchio正被一只超大的鲨鱼吞噬......

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);

wab

赞同来自:

如果你想向一个六岁的子元素解释它,那么你必须找到一些非常简单且没有代码的东西。 告诉子元素他是“开放的”,这表明他能够与其他人,他的朋友建立关系。在某个时间点,他确定了朋友(我们可以知道他的朋友的名字),这是一个封闭。如果你拍摄他和他的朋友的照片,那么他相对于他的友谊能力是“封闭的”。但总的来说,他是“开放的”。在他的一生中,他会有许多不同的朋友。其中一组是关闭。

bea

赞同来自:

闭包很难解释,因为它们被用来使某些行为工作,每个人都直观地期望工作。我发现解释它们的最佳方式(以及我学习它们的方式)是想象没有它们的情况:

    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。

nsit

赞同来自:

Wikipedia on closures

In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.
从技术上讲,在JavaScript中,每个函数都是一个闭包。它始终可以访问周围范围中定义的变量。 由于JavaScript中的范围定义构造是一个函数,而不是像许多其他语言中的代码块,我们通常所说的JavaScript中的闭包是一个函数,它使用已经执行的周围函数中定义的非局部变量。 闭包通常用于创建具有一些隐藏私有数据的函数(但并非总是如此)。
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)并在以后执行,每次调用它时都会生成一个数据库函数。每个生成的函数都有自己的隐藏数据库对象。闭包的另一个用法示例是当我们不返回函数,而是包含用于不同目的的多个函数的对象时,每个函数都可以访问相同的数据。

sesse

赞同来自:

闭包很简单: 以下简单示例涵盖了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,在make_calculator返回后很长时间内,该计算器的addmultiply函数仍然可以使用它。 如果您熟悉堆栈帧,这些计算器似乎很奇怪:在make_calculator返回后,他们如何继续访问n?答案是想象JavaScript不使用“堆栈帧”,而是使用“堆帧”,它可以在使它们返回的函数调用之后持久存在。 诸如addmultiply之类的内部函数(它们访问在外部函数 ** 中声明的变量)被称为闭包。 这几乎就是闭包。 点击
* 例如,它涵盖了another answer中给出的“闭包傻瓜”一文中的所有要点,除了示例6,它只是表明变量可以在声明之前使用,一个不错的事实上要知道但与封闭完全无关。它还涵盖了the accepted answer中的所有点,除了函数将其参数复制到局部变量(命名函数参数)的点(1),以及(2)复制数字创建一个新数字,但复制对象引用会给你对同一个对象的另一个引用。这些也很好知道但又与封闭完全无关。它也与this answer中的示例非常相似,但有点短,不太抽象。它没有涵盖this answerthis comment,这是因为JavaScript很难将循环变量的当前值插入到内部函数中:“插入”步骤只能通过包含内部函数的辅助函数来完成函数并在每次循环迭代时调用。 (严格地说,内部函数访问辅助函数的变量副本,而不是插入任何东西。)同样,在创建闭包时非常有用,但不是闭包的一部分或它是如何工作的。由于闭包在ML等函数式语言中的工作方式不同,还存在额外的混淆,其中变量绑定到值而不是存储空间,从而提供了一种持续理解闭包的人(即“插入”方式),即只是对JavaScript不正确,其中变量总是绑定到存储空间,而永远不会绑定到值。 ** 任何外部函数,如果有多个是嵌套的,或者甚至在全局上下文中,如this answer明确指出的那样。

zomnis

赞同来自:

来自个人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被赋予调用with参数3的结果。也就是b函数的实例,其中x = 3.换句话说,c现在是一个等效于的函数:
var c = function b(y) {
    return 3 + y;
}
函数b在其上下文中记住x = 3。因此:
var d = c(4);
将值3 + 4分配给d,即7。 备注:如果有人在创建函数b的实例后修改了x(例如x = 22)的值,这也将反映在b中。因此,稍后对c(4)的调用将返回22 + 4,即26。 闭包还可用于限制全局声明的变量和方法的范围:
(function () {
    var f = "Some message";
    alert(f);
})();
上面是一个闭包,其中函数没有名称,没有参数,并且立即被调用。突出显示的代码声明了全局变量f,将f的范围限制为闭包。 现在,有一个常见的JavaScript警告,闭包可以帮助:
var a = new Array();
for (var i=0; i<2; i++) {
    a[i]= function(x) { return x + i ; }
}
从上面可以看出,大多数人会假设数组a将初始化如下:
a[0] = function (x) { return x + 0 ; }
a[1] = function (x) { return x + 1 ; }
a[2] = function (x) { return x + 2 ; }
实际上,这是a的初始化方式,因为上下文中i的最后一个值是2:
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在创建函数实例时保存i的更改值的本地副本。

lnon

赞同来自:

一个六岁子元素的答案(假设他知道一个函数是什么,变量是什么,以及是什么数据): 函数可以返回数据。您可以从函数返回的一种数据是另一种功能。当返回该新函数时,创建它的函数中使用的所有变量和参数都不会消失。相反,该父功能“关闭”。换句话说,除了它返回的函数之外,什么都看不到它并看到它使用的变量。该新函数具有特殊的能力,可以回顾创建它的函数并查看其中的数据。

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
解释它的另一个非常简单的方法是在范围方面: 无论何时在较大范围内创建较小的范围,较小的范围始终都能够查看较大范围内的范围。

nin

赞同来自:

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

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

fearum

赞同来自:

这是一个简单的实时场景。请仔细阅读,您将了解我们如何使用闭包(请参阅座位编号如何变化)。 之前解释的所有其他示例也非常适合理解该概念。

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

rtotam

赞同来自:

我只是将它们指向Mozilla Closures page。这是我发现的关闭基础知识和实际用法的最佳,最简洁和简单的解释。强烈建议任何学习JavaScript的人。 是的,我甚至推荐给一个6岁的子元素 - 如果这个6岁的子元素正在学习闭包,那么他们已经准备好理解文章中提供的简洁明了的解释是合乎逻辑的。

tmodi

赞同来自:

关闭并不难理解。这仅取决于观点。 我个人喜欢在日常生活中使用它们。

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);
}
我们只需要在特定情况下执行某些步骤。至于材料的转换只有在你有零件时才有用。

cnon

赞同来自:

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

  • 它可以作为值和
  • 传递
  • 具有该值的任何人按需执行
  • 它可以从创建它的上下文中引用变量 (也就是说,它在变量访问方面是关闭的 数学意义上的“封闭”一词)。
(“闭包”这个词实际上有一个不精确的含义,有些人不认为标准#1是定义的一部分。我认为是。) 闭包是函数式语言的支柱,但它们也存在于许多其他语言中(例如,Java的匿名内部类)。你可以用它们做很酷的事情:它们允许延迟执行和一些优雅的风格。 作者:Paul Cantrell,@ http://innig.net/software/ruby/closures-in-ruby

taut

赞同来自:

内容太长未翻译

dnulla

赞同来自:

我不明白为什么这里的答案如此复杂。 这是一个闭包:

var a = 42;
function b() { return a; }
是。你可能每天都要多次使用它。 点击
There is no reason to believe closures are a complex design hack to address specific problems. No, closures are just about using a variable that comes from a higher scope from the perspective of where the function was declared (not run). Now what it allows you to do can be more spectacular, see other answers.

homnis

赞同来自:

内容太长未翻译

zhic

赞同来自:

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

function foo(x) {
  var tmp = 3;
function bar(y) {
    console.log(x + y + (++tmp)); // will log 16
  }
bar(10);
}
foo(2);
这将始终记录16,因为bar可以访问被定义为foo的参数的x,并且它还可以从foo访问tmp。 这是一个关闭。函数不必返回以便被称为闭包。只需访问直接词法范围之外的变量就可以创建一个闭包。
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);
上面的函数也会记录16,因为bar仍然可以引用xtmp,即使它不再直接在范围内。 但是,由于tmp仍然在bar关闭内部,因此它也会增加。每次调用bar时它都会递增。 闭包最简单的例子是:
var a = 10;
function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();
调用JavaScript函数时,会创建一个新的执行上下文。与函数参数和父对象一起,此执行上下文还接收在其外部声明的所有变量(在上面的示例中,“a”和“b”)。 可以通过返回它们的列表或将它们设置为全局变量来创建多个闭包函数。所有这些都将引用相同的x和相同的tmp,它们不会制作自己的副本。 这里的数字x是一个文字数字。与JavaScript中的其他文字一样,当调用foo时,将数字x复制到foo作为其参数x。 另一方面,JavaScript在处理对象时总是使用引用。如果说,你用一个对象调用了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进行几次调用后,age.memb将为2!此引用是HTML对象的内存泄漏的基础。

hiure

赞同来自:

内容太长未翻译

rsequi

赞同来自:

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

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

oalias

赞同来自:

闭包很简单 你可能不应该告诉六岁的闭包,但如果你这样做,你可能会说闭包能够获得对在其他函数范围内声明的变量的访问权限。 enter image description here
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 :|')
});
<pre id="output"></pre>
<script>
  function out(k) {
    document.getElementById('output').innerHTML += '> ' + k + '\n';
  }
</script>

gcum

赞同来自:

对于一个六岁的子元素? 您和您的家人住在神秘的Ann Ville镇。你有一个住在隔壁的朋友,所以你打电话给他们,让他们出来玩。你拨打:

000001 (jamiesHouse)
一个月后,你和你的家人离开安维尔到下一个城镇,但你和你的朋友仍然保持联系,所以现在你必须拨打你朋友住的城镇的区号,然后再拨打他们的'适当的号码:
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)
意见? 更重要的是,我对现代六岁子元素的耐心有很多疑问......

eomnis

赞同来自:

A closure is a function having access to the parent scope, even after the parent function has closed.
var add = (function() {
  var counter = 0;
  return function() {
    return counter += 1;
  }
})();
add();
add();
add();
// The counter is now 3
示例说明:
  • 变量add被赋予自调用函数的返回值。
  • 自我调用功能只运行一次。它将计数器设置为零(0),并返回一个函数表达式。
  • 这种方式成为一种功能。 “精彩”部分是它可以访问父范围内的计数器。
  • 这称为JavaScript闭包。它使函数可以拥有“私有”变量。
  • 计数器受匿名函数范围的保护,只能使用add函数进行更改。
Source

hiure

赞同来自:

在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

ueos

赞同来自:

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

// 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 );

gquia

赞同来自:

我在一段时间后写了一篇博文,解释了闭包。这就是我所说的关于你想要一个闭包的原因。

Closures are a way to let a function have persistent, private variables - that is, variables that only one function knows about, where it can keep track of info from previous times that it was run.
从这个意义上讲,它们让函数有点像具有私有属性的对象。 全文: So what are these closure thingys?

gautem

赞同来自:

A closure is a function having access to the parent scope, even after the parent function has closed.
所以基本上闭包是另一个函数的函数。我们可以说像子元素功能。
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables. The inner function has access not only to the outer function’s variables but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly. You create a closure by adding a function inside another function.
此外,它是非常有用的方法,在许多着名的框架中使用,包括AngularNode.jsjQuery
Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.
但是真实编码中的闭包是怎么样的? 看看这个简单的示例代码:
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的一个很好的解释和示例: 实用的封闭
Closures are useful because they let you associate some data (the lexical environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods. Consequently, you can use a closure anywhere that you might normally use an object with only a single method. Situations where you might want to do this are particularly common on the web. Much of the code we write in front-end JavaScript is event-based — we define some behavior, then attach it to an event that is triggered by the user (such as a click or a keypress). Our code is generally attached as a callback: a single function which is executed in response to the event. For instance, suppose we wish to add some buttons to a page that adjust the text size. One way of doing this is to specify the font-size of the body element in pixels, then set the size of the other elements on the page (such as headers) using the relative em unit:
阅读下面的代码并运行代码,看看闭包如何帮助我们轻松地为每个部分创建单独的函数:
//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

riure

赞同来自:

Closures的作者很好地解释了闭包,解释了我们为什么需要它们,并解释了理解闭包所必需的LexicalEnvironment。
以下是摘要: 如果访问变量,但它不是本地的,该怎么办?像这儿: Enter image description here 在这种情况下,解释器在中找到变量 外部LexicalEnvironment对象。 该过程包括两个步骤:

  1. 首先,当创建函数f时,它不会创建为空 空间。有一个当前的LexicalEnvironment对象。在这种情况下 上面,它是窗口(a在功能时是未定义的 创建)。
Enter image description here 创建函数时,它会获得一个名为[[Scope]]的隐藏属性,该属性引用当前的LexicalEnvironment。 Enter image description here 如果读取变量但在任何地方都找不到,则会生成错误。 嵌套函数 函数可以嵌套在另一个函数中,形成一个LexicalEnvironments链,也可以称为范围链。 Enter image description here 因此,函数g可以访问g,a和f。 关闭 外部函数完成后,嵌套函数可能会继续存在: Enter image description here 标记LexicalEnvironments: Enter image description here 如我们所见,this.say是用户对象中的属性,因此在用户完成后它将继续存在。 如果你还记得,当创建this.say时,它(作为每个函数)获得一个内部引用this.say.[[Scope]]到当前的LexicalEnvironment。因此,当前用户执行的LexicalEnvironment保留在内存中。 User的所有变量也都是它的属性,因此它们也被仔细保存,而不是通常的垃圾。 重点是确保如果内部函数将来想要访问外部变量,它就能够这样做。 总结一下:
  1. 内部函数保留对外部的引用 LexicalEnvironment。
  2. 内部函数可以从中访问变量 任何时候即使外部功能完成。
  3. 浏览器将LexicalEnvironment及其所有属性(变量)保留在内存中,直到有一个引用它的内部函数。
这称为闭包。 (您可能还想阅读What is a practical use for a closure in JavaScript?)

qet

赞同来自:

要了解闭包,您必须深入到程序中并按字面顺序执行,就好像您是运行时一样。让我们看看这段简单的代码: Enter image description here JavaScript分两个阶段运行代码:

  • 编译阶段// JavaScript不是纯粹的解释语言
  • 执行阶段
当JavaScript经历编译阶段时,它会提取变量和函数的声明。这称为吊装。在此阶段遇到的函数将保存为内存中的文本blob,也称为lambda。编译完成后,JavaScript进入执行阶段,分配所有值并运行该函数。要运行该函数,它通过从堆中分配内存并重复该函数的编译和执行阶段来准备执行上下文。该存储区域称为功能范围。执行开始时有一个全局范围。范围是理解闭包的关键。 在此示例中,首先定义变量a,然后在编译阶段定义f。所有未声明的变量都保存在全局范围内。在执行阶段,使用参数调用f。分配了f的范围,并为其重复编译和执行阶段。 参数也保存在f的本地范围中。每当创建本地执行上下文或作用域时,它都包含指向其父作用域的引用指针。所有变量访问都遵循此词法范围链来查找其值。如果在本地范围内找不到变量,则它跟随链并在其父范围内找到它。这也是局部变量覆盖父范围中变量的原因。父作用域称为本地范围或函数的“闭包”。 在设置g的范围时,它获得了一个指向其父级范围f的词法指针。 f的范围是g的闭包。在JavaScript中,如果有一些函数,对象或作用域的引用,如果你能以某种方式访问​​它们,它将不会被垃圾收集。所以当myG运行时,它有一个指向f范围的指针,这是它的闭包。即使f已返回,此内存区域也不会收集垃圾。就运行时而言,这是一个闭包。

那是什么关闭?
  • 它是函数与其范围链之间的隐式永久链接......
  • 函数定义(lambda)隐藏的[[scope]]引用。
  • 保留范围链(防止垃圾回收)。
  • 在函数运行时随时使用并复制为“外部环境引用”。

隐性关闭
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

killo

赞同来自:

考虑到问题是关于解释它就好像是一个6岁的子元素,我的答案是: “当你在JavaScript中声明一个函数时,它永远可以访问该函数声明之前的行中可用的所有变量和函数。函数以及它可以访问的所有外部变量和函数就是我们所说的闭包。 “

jvitae

赞同来自:

封闭是许多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将是一个“空指针”,你需要建立一个getter和setter并开始传递引用。听起来不像JavaScript吗?感谢强大的关闭。 我为什么要在乎? 你真的不必知道使用它们的闭包。但正如其他人也指出的那样,它们可以用来创造虚假的私人变量。在您需要私有变量之前,只需像往常一样使用它们。

adolor

赞同来自:

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

var calculate = {
    number: 0,
    init: function (num) {
        this.number = num;
    },
    add: function (val) {
        this.number += val;
    },
    rem: function (val) {
        this.number -= val;
    }
};
并从calculate.number变量中读取结果,无论如何都需要“返回”。

qnon

赞同来自:

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

Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.
词法范围是指内部范围可以访问其外部范围。 这是他在他的系列文章“你不了解JS:范围& amp; amp;闭包。
function foo() {
  var a = 2;
function bar() {
    console.log( a );
  }
  return bar;
}
function test() {
  var bz = foo();
  bz();
}
// prints 2. Here function bar referred by var bz is outside 
// its lexical scope but it can still access it
test(); 

tet

赞同来自:

这个答案是对YouTube视频Javascript Closures的总结。所以该视频的完全信用。 闭包只是状态函数,它们维护私有变量的状态。 通常当您调用函数时,如下图所示。变量在使用的堆栈(运行RAM内存)上创建,然后解除分配。 enter image description here 但是现在有些情况下我们想要保持Javascript闭包使用的函数的这种状态。闭包是一个函数内部函数,带有一个返回调用,如下面的代码所示。 enter image description here 所以上面的计数器函数的闭包代码看起来如下所示。它是一个带有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概念的构建块,如抽象,封装和创建自包含模块。 因此,无论你想要封装什么,你都可以把它作为私有,并且应该把它暴露给公众。这些组件也是自包含的隔离对象,因此它们不会污染全局变量。 遵循OOP原则的对象是自包含的,遵循抽象,遵循封装等等。在Javascript中使用out闭包这很难实现。 enter image description here

rqui

赞同来自:

符合图解说明:How do JavaScript closures work behind the scenes。 本文解释了如何以直观的方式分配和使用范围对象(或LexicalEnvironments)。就像,对于这个简单的脚本:

"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();
执行顶级代码时,我们有以下范围对象的排列: Enter image description here 当调用myFunc()时,我们有以下范围链: Enter image description here 了解范围对象的创建,使用和删除方式是了解大局并了解封闭装置如何工作的关键。 有关所有详细信息,请参阅上述文章。

krerum

赞同来自:

稻草人 我需要知道点击一个按钮多少次,每三次点击就做一些事......

相当明显的解决方案
// 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注意事项)

zin

赞同来自:

我发现第8章第6节“闭包”,JavaScript:The Definitive Guide,David Flanagan,第6版,O'Reilly,2011。我会试着解释。

  1. 调用函数时,会创建一个新对象来保存该调用的局部变量。
  2. 函数的范围取决于其声明位置,而不是其执行位置。
现在,假设在外部函数中声明的内部函数并引用该外部函数的变量。进一步假设外部函数返回内部函数,作为函数。现在有一个外部引用,指向内部函数范围内的任何值(根据我们的假设,它包括外部函数的值)。 JavaScript将保留这些值,因为它们已经在完成的外部函数中传递,因此它们仍然保留在当前执行的范围内。所有函数都是闭包,但感兴趣的闭包是内部函数,在我们假设的场景中,当它们(内部函数)被返回时,它们的“封闭”内部保留外部函数值(我希望我在这里正确使用语言)来自外部职能。我知道这不符合六年的要求,但希望它仍然有用。

yvitae

赞同来自:

我越想到关闭越多,我认为这是一个两步过程:init - action

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?

snihil

赞同来自:

我倾向于通过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(arrindex);
}
  • 在上面的代码中,createClosure(n)在循环的每次迭代中被调用。请注意,我将变量命名为n以突出显示它是在新函数范围中创建的新变量,并且与绑定到外部范围的index不同。
  • 这会创建一个新范围,n绑定到该范围;这意味着我们有10个独立的范围,每次迭代一个。
  • createClosure(n)返回一个返回该范围内的n的函数。
  • 在每个范围内,n绑定到调用createClosure(n)时的值,因此返回的嵌套函数将始终返回调用createClosure(n)时的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(badArrindex);
}
  • 在上面的代码中,循环在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 CLOSURES DONE WRONG
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10
n = 10

jfugit

赞同来自:

想象一下,你镇上有一个非常大的公园,你可以看到一个名叫科德先生的魔术师用他的魔杖(称为JavaScript)在公园的不同角落开始棒球比赛。 当然,每个棒球比赛都有完全相同的规则,每个比赛都有自己的比分板。 当然,一个棒球比赛的得分与其他比赛完全分开。 关闭是特别的方式,科德先生将他所有神奇的棒球比赛的得分分开。

vomnis

赞同来自:

调用函数后,它将超出范围。如果该函数包含类似回调函数的内容,那么该回调函数仍在范围内。如果回调函数在父函数的直接环境中引用某个局部变量,那么自然你会期望该变量对于回调函数是不可访问的并且返回undefined。 闭包确保回调函数引用的任何属性都可供该函数使用,即使其父函数可能已超出范围。

xnobis

赞同来自:

最好的方法是逐步解释这些概念: 变量

console.log(x);
// undefined
在这里,undefined是JavaScript的说法“我不知道x的意思。”
Variables are like tags.
你可以说,标记x指向值42
var x = 42;
console.log(x);
// 42
现在JavaScript知道x的含义。
You can also re-assign a variable.
使标记x指向不同的值:
x = 43;
console.log(x);
// 43
现在x意味着别的东西。 范围
When you make a function, the function has its own "box" for variables.
function A() {
  var x = 42;
}
console.log(x);
// undefined
从盒子外面,你看不到盒子里面的东西。 但是从盒子里面,你可以看到盒子外面的东西:
var x = 42;
function A() {
  console.log(x);
}
// 42
Inside function A, you have "scope access" to x.
现在,如果你有两个并排的盒子:
function A() {
  var x = 42;
}
function B() {
  console.log(x);
}
// undefined
Inside function B, you have no access to variables inside function A.
但是如果你在函数A中放置定义函数B
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);
};
Variable a now means a function, you can run it.
a();
// 42
您还可以传递此变量:
setTimeout(a, 1000);
在第二个(1000毫秒)中,调用a指向的函数:
// 42
关闭范围 现在,当您定义函数时,这些函数可以访问其外部作用域。 当您将函数作为值传递时,如果访问丢失将会很麻烦。
In JavaScript, functions keep their access to outer scope variables. Even when they are passed around to be run somewhere else.
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!'
You can still access variables in the closure scope.
即使a已经完成运行,现在您在a之外运行c。 这里发生的事情在JavaScript中称为“闭包”。

isunt

赞同来自:

以下示例是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

wqui

赞同来自:

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

jvitae

赞同来自:

The children will always remember the secrets they have shared with their parents, even after their parents are gone. This is what closures are for functions.
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"
这就是所有要说的。

mid

赞同来自:

函数在定义它的对象/函数的范围内执行。所述函数可以访问在执行时定义的对象/函数中定义的变量。 从字面上看它......就像代码写的那样:P

faut

赞同来自:

这就是初学者如何将一个人的头部缠绕在一起,就像一个函数被包裹在一个函数体(也称为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将跟踪自己的价值。 简单但希望清楚地了解封闭是围绕所有这些伟大和先进的答案。

dsit

赞同来自:

我能想到解释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();
希望能帮助到你。 问候,

faut

赞同来自:

我以前读过所有这些,但它们都非常有用。有些人非常接近于获得简单的解释然后变得复杂或保持抽象,打败目的并且未能显示非常简单的真实世界用途。 虽然通过所有的例子和解释,你可以很好地了解闭包是什么,而不是通过注释和代码,我仍然不满意一个非常简单的插图,帮助我获得闭包有用而不会变得如此复杂。我的妻子想要学习编码,我想我需要能够在这里展示不仅是什么,而且为什么,以及如何。 我不确定一个六岁的子元素会得到这个,但我认为这可能会更接近于以现实世界的方式展示一个简单的案例,这个案例可能非常有用并且很容易理解。 最好的(或最接近最简单的)之一是莫里斯的傻瓜闭馆例子的复述。 采用“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实践,单例与具有自己数据的实例化实例等的基本概念等。 如果你用这个启动一个新手,那么你可以继续进行更复杂的基于对象属性/成员的调用,并希望这些概念可以随之进行。

nerror

赞同来自:

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

// 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

aut_id

赞同来自:

你正在睡觉,你邀请丹。 你告诉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.");

qporro

赞同来自:

我对闭包的看法: 可以将闭包与书架上的书籍进行比较。 假设您已经阅读了一本书,并且您喜欢本书中的某些页面。您在该页面上放置了一个书签来跟踪它。 现在,一旦你读完这本书,你就不再需要这本书了,除了你想要访问那个页面。你可能只是剪掉了页面,但是你会松开故事的背景。所以你用书签将书放回书架。 这与封闭类似。这本书是外部函数,页面是你的内部函数,它从外部函数返回。书签是对页面的引用,故事的上下文是词法范围,您需要保留它。书架是功能堆栈,不能清理旧书,直到你抓住页面。 代码示例:

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,页面状态和bookMarkedPage变量的引用。 要考虑的一些要点: 第1点: 书架,就像功能堆栈一样,空间有限,所以明智地使用它。 第2点: 考虑一下这样一个事实:当您只想跟踪单个页面时是否需要保留整本书。您可以通过在返回闭包时不存储书中的所有页面来释放部分内存。 这是我对闭包的看法。希望它有所帮助,如果有人认为这是不正确的,请告诉我,因为我非常有兴趣了解范围和封闭更多!

vet

赞同来自:

(我不会考虑6岁的事情。) 在像JavaScript这样的语言中,你可以将函数作为参数传递给其他函数(函数是一等公民的语言),你经常会发现自己做的事情:

var name = 'Rafael';
var sayName = function() {
  console.log(name);
};
您看,sayName没有name变量的定义,但它确实使用了在sayName之外定义的name的值(在父作用域中)。 假设您将sayName作为参数传递给另一个函数,该函数将sayName称为回调函数:
functionThatTakesACallback(sayName);
注意:
  1. sayName将从functionThatTakesACallback内部调用(假设,由于我在此示例中未实现functionThatTakesACallback)。
  2. 调用sayName时,会记录name变量的值。
  3. functionThatTakesACallback没有定义name变量(好吧,它可以,但没关系,所以假设它没有。)
因此,我们在functionThatTakesACallback内调用sayName,并引用name内未定义的PLACEHOLDER_FOR_CODE_17变量。 那么会发生什么?一个ReferenceError: name is not defined? 没有! name的值在闭包内捕获。您可以将此闭包视为与函数关联的上下文,该函数包含定义该函数的可用值。 因此:即使name不在将调用函数sayName的范围内(functionThatTakesACallback内),sayName也可以访问与sayName关联的闭包中捕获的name的值。

fharum

赞同来自:

闭包允许JavaScript程序员编写更好的代码。富有创意,富有表现力和简洁。我们经常在JavaScript中使用闭包,而且,无论我们的JavaScript经验如何,我们无疑会一次又一次地遇到它们。闭包可能看起来很复杂,但希望在您阅读本文之后,闭包将更容易被理解,因此对您日常的JavaScript编程任务更具吸引力。 在进一步阅读之前,您应该熟悉JavaScript variable scope,因为要了解闭包,您必须了解JavaScript的变量范围。

什么是封闭? 闭包是一个内部函数,可以访问外部(封闭)函数的变量范围链。闭包有三个作用域链:它可以访问自己的作用域(在大括号之间定义的变量),它可以访问外部函数的变量,并且可以访问全局变量。 内部函数不仅可以访问外部函数的变量,还可以访问外部函数的参数。注意,内部函数不能调用外部函数的arguments对象,但是,即使它可以直接调用外部函数的参数。 您可以通过在另一个函数中添加函数来创建闭包。 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 ();

}

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

闭包广泛用于Node.js;他们是Node.js异步,非阻塞架构的主力军。闭包也常用于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​
  });
​});

闭包规则和副作用 1.即使在外部函数返回后,闭包也可以访问外部函数的变量: 闭包最重要和最棘手的功能之一是,即使在外部函数返回后,内部函数仍然可以访问外部函数的变量。是的,你读得正确。当JavaScript中的函数执行时,它们使用创建它们时生效的相同范围链。这意味着即使在返回外部函数之后,内部函数仍然可以访问外部函数的变量。因此,您可以稍后在程序中调用内部函数。此示例演示:
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

2. Closures存储对外部函数变量的引用: 它们不存储实际值。当在调用闭包之前外部函数变量的值发生变化时,闭包变得更有趣。这个强大的功能可以通过创造性的方式加以利用,例如Douglas Crockford首先演示的私有变量示例:
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

3.关闭失败 因为闭包可以访问外部函数变量的更新值,所以当外部函数的变量随for循环变化时,它们也会导致错误。从而:
// 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


更多信息可以在这里找到 -
  1. http://javascript.info/tutorial/closures
  2. http://www.javascriptkit.com/javatutors/closures.shtml

godio

赞同来自:

还有......也许我们应该让你这位27岁的朋友有点松懈,因为“封闭”的整个概念确实是(!)......伏都教! 我的意思是:(a)你没有,直觉地,期望它......和...(b)当有人花时间向你解释时,你当然不希望它起作用! Intuition告诉你“这一定是废话......肯定会导致某种语法错误或其他什么!”实际上,你怎么可能“从'中间'向某个地方拉取一个函数”,这样你就可以[仍然!]实际上具有对“上下文”的上下文的读/写访问权限但此结果的?!” 当你终于意识到这样的事情是可能的时候,那么......当然......任何人的事后反应都会是:“哇哇哇!(!)...... kew-el-lll ......(!! !)” 但首先要克服一个“大反直觉障碍”。直觉给了你很多完全合理的期望,这样的事情“当然是绝对荒谬的,因此是不可能的”。 就像我说的那样:“这是伏都教。”

taut

赞同来自:

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

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"

qet

赞同来自:

给出以下功能
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时,都会创建一个新的闭包。变量ab具有相同的introduce函数,但它链接到不同的闭包。即使在person函数完成执行后,该闭包仍然存在。 Enter image description here
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 as instance properties
  • 这些properties是私人的
  • inner functions as instance methods
每次调用function
  • 将创建一个包含所有局部变量的新object
  • 此对象的方法可以访问该实例对象的"properties"

dodit

赞同来自:

无论我们使用什么设施来传输其词法范围之外的内部函数,它都将保持范围引用它最初声明的位置,并且无论我们在何处执行它,都将执行关闭。

aet

赞同来自:

认真对待这个问题,我们应该找出一个典型的6岁子元素的认知能力,尽管如此,对JavaScript感兴趣的人并不那么典型。 在Childhood Development: 5 to 7 Years 上,它说:

Your child will be able to follow two-step directions. For example, if you say to your child, "Go to the kitchen and get me a trash bag" they will be able to remember that direction.
我们可以使用这个例子来解释闭包,如下所示:
The kitchen is a closure that has a local variable, called trashBags. There is a function inside the kitchen called getTrashBag that gets one trash bag and returns it.
我们可以在JavaScript中编写代码,如下所示:
function makeKitchen () {
  var trashBags = ['A', 'B', 'C']; // only 3 at first
return {
    getTrashBag: function() {
      return trashBags.pop();
    }
  };
}
var kitchen = makeKitchen();
kitchen.getTrashBag(); // returns trash bag C
kitchen.getTrashBag(); // returns trash bag B
kitchen.getTrashBag(); // returns trash bag A
进一步说明闭包有趣的原因:
  • 每次调用makeKitchen()时,都会创建一个新的闭包,其中包含单独的trashBags
  • trashBags变量是每个厨房内部的本地变量,无法在外部访问,但getTrashBag属性的内部函数可以访问它。
  • 每个函数调用都会创建一个闭包,但是除非可以从闭包外部调用可以访问闭包内部的内部函数,否则不需要保持闭包。使用getTrashBag函数返回对象就可以了。

lest

赞同来自:

只要函数有权访问其外部作用域,即使在作用域的函数执行完毕后,闭包也就是这样。 例:

function multiplier(n) {
    function multiply(x) {
          return n*x;
    }
    return mutliply;
}
var 10xmultiplier = multiplier(10);
var x = 10xmultiplier(5); // x= 50
我们可以看到,即使在乘数完成执行之后,内部函数乘法仍然可以访问x的值,在本例中为10。 闭包的一个非常常见的用途就是currying(上面的例子),我们用参数逐步调整函数,而不是一次提供所有的参数。 我们可以实现这一点,因为Javascript(除了原型OOP)允许以功能方式编程,其中高阶函数可以将其他函数作为参数(fisrt类函数)。 functional programming in wikipedia 我强烈建议你阅读Kyle Simpson撰写的这本书:2本书系列的一部分专门用于闭包,它被称为范围和闭包。 you don't know js: free reading on github

zomnis

赞同来自:

闭包是一种可以从其定义的环境中访问信息的函数。 对于某些人来说,信息是创建时环境中的价值。对于其他人,信息是创建时环境中的变量。 如果闭包引用的词法环境属于已退出的函数,则(在关闭环境中的变量的情况下)这些词汇变量将继续存在以供闭包引用。 闭包可以被认为是全局变量的特殊情况 - 只为该函数创建一个私有副本。 或者可以将其视为一种方法,其中环境是对象的特定实例,其属性是环境中的变量。 前者(闭包作为环境)类似于后者,其中环境副本是传递给前者中每个函数的上下文变量,而实例变量在后者中形成上下文变量。 因此,闭包是一种调用函数的方法,无需将上下文明确指定为参数或方法调用中的对象。

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或匿名函数的上下文中。

mut

赞同来自:

内容太长未翻译

zfugit

赞同来自:

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

Imagine - you are playing with your little brothers and sisters in the entire house, and you are moving around with your toys and brought some of them into your older brother's room. After a while your brother returned from the school and went to his room, and he locked inside it, so now you could not access toys left there anymore in a direct way. But you could knock the door and ask your brother for that toys. This is called toy's closure; your brother made it up for you, and he is now into outer scope.
与一个门被草稿锁定而内部没人(一般功能执行)的情况相比,然后发生一些局部火灾并烧毁房间(垃圾收集器: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来玩它。

znemo

赞同来自:

JavaScript函数可以访问它们:

  1. 参数
  2. 本地人(即他们的本地变量和本地函数)
  3. 环境,包括:
    • globals,包括DOM
    • 外部职能中的任何内容
如果函数访问其环境,则该函数是闭包。 请注意,外部函数不是必需的,尽管它们确实提供了我在此不讨论的好处。通过访问其环境中的数据,闭包可以使数据保持活动状态。在外部/内部函数的子例子中,外部函数可以创建本地数据并最终退出,但是,如果任何内部函数在外部函数退出后仍然存在,那么内部函数将保留外部函数的本地数据活。 使用全局环境的闭包示例: 想象一下,Stack Overflow Vote-Up和Vote-Down按钮事件实现为闭包,voteUp_click和voteDown_click,它们可以访问外部变量isVotedUp和isVotedDown,它们是全局定义的。 (为简单起见,我指的是StackOverflow的问题投票按钮,而不是答案投票按钮数组。) 当用户单击VoteUp按钮时,voteUp_click函数检查isVotedDown ==是否确定是否投票或仅取消向下投票。函数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
}
所有这四个函数都是闭包,因为它们都访问它们的环境。

wsed

赞同来自:

好的,6岁的关闭风扇。你想听听关闭的最简单的例子吗? 让我们想象下一个情况:司机坐在车里。那辆车在飞机内。飞机在机场。驾驶员能够进入车外的东西,但是在飞机内部,即使飞机离开机场,也是一种封闭。而已。当您转动27时,请查看more detailed explanation或以下示例。 这是我如何将我的飞机故事转换为代码。

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");

afuga

赞同来自:

闭包是指函数以在命名空间中定义的方式关闭,该命名空间在调用函数时是不可变的。 在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);
}

nnihil

赞同来自:

我相信较短的解释,请参阅下图。

Enter image description here function f1() ..>浅红色框 function f2() ..>红色小盒子 这里我们有两个函数,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()在这里调用: Enter image description here

ynulla

赞同来自:

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();

cet

赞同来自:

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

包含一个或多个自由变量的函数称为闭包。
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

in_id

赞同来自:

dlaliberte的第一点示例:

A closure is not only created when you return an inner function. In fact, the enclosing function does not need to return at all. You might instead assign your inner function to a variable in an outer scope, or pass it as an argument to another function where it could be used immediately. Therefore, the closure of the enclosing function probably already exists at the time that enclosing function was called since any inner function has access to it as soon as it is called.
var i;
function foo(x) {
    var tmp = 3;
    i = function (y) {
        console.log(x + y + (++tmp));
    }
}
foo(2);
i(3);

prem

赞同来自:

如果你理解得很好,你可以解释它。最简单的方法是从上下文中抽象出来。除了代码,甚至编程放在一边。一个比喻的例子会做得更好。 让我们想象一个功能是一个墙壁是玻璃的房间,但它们是特殊的玻璃,就像在审讯室里一样。从外面看,它们是不透明的,从内部透明。它可以是其他房间内的房间,唯一的联系方式是电话。 如果你从外面打电话,你不知道里面有什么,但你知道如果你给他们一定的信息,里面的人会做任务。他们可以看到外面的东西,所以他们可以向你询问外面的东西并对那些东西做出改变,但你不能从外面改变它里面的东西,你甚至看不到(知道)里面的东西。你打电话给那个房间的人看到外面的东西,但不知道房间内的房间是什么,所以他们就像你从外面那样与他们互动。最内部房间内的人可以看到很多东西,但最外层房间的人甚至不知道最内部房间的存在。 对于每个内部房间的呼叫,该房间中的人员记录有关该特定呼叫的信息,并且他们非常好,以至于他们从不将一个呼叫内容与其他呼叫内容混淆。 房间是功能,可见性是范围,人做任务是陈述,东西是对象,电话是函数调用,电话信息是参数,呼叫记录是范围实例,最外层的房间是全局对象。

get

赞同来自:

我认为退后一步,检查一个更为笼统的“闭合”概念 - 即所谓的“连接算子”是有价值的。 在数学中,“连接”运算符是部分有序集合上的函数,它返回大于或等于其参数的最小对象。在符号中,连接[a,b] = d使得d> = a且d> = b,但是不存在e使得d> e> = a或d> e> = b。 因此,连接为您提供了比零件“更大”的最小的东西。 现在,请注意JavaScript范围是部分有序的结构。因此,有一个明智的联合概念。特别是,范围的连接是比原始范围更大的最小范围。该范围称为闭包。 因此,变量a,b,c的闭包是将a,b和c带入范围的最小范围(在程序范围的格子中!)。

benim

赞同来自:

对于一个六岁的子元素...... 你知道什么是对象吗? 对象是具有属性和做东西的东西。 关闭闭包最重要的一点是它们允许你用JavaScript创建对象。 JavaScript中的对象只是函数和闭包,它允许JavaScript在创建对象后存储对象的属性值。 对象非常有用并且保持一切美观和有条理。不同的对象可以做不同的工作,一起工作对象可以做复杂的事情。 很幸运,JavaScript有制作物品的封闭物,否则一切都会成为一个混乱的噩梦。

yquo

赞同来自:

也许除了最早熟的六岁子元素之外,还有一些例子,但是有一些例子帮助我在JavaScript中实现了关闭概念。 闭包是一个可以访问另一个函数范围(其变量和函数)的函数。创建闭包的最简单方法是使用函数内的函数;原因是在JavaScript中,函数始终可以访问其包含函数的作用域。

function outerFunction() {
    var outerVar = "monkey";
function innerFunction() {
        alert(outerVar);
    }
innerFunction();
}
outerFunction();
警告:猴子 在上面的例子中,调用了outerFunction,后者又调用了innerFunction。注意innerVar如何可用于innerFunction,通过正确警告outerVar的值来证明。 现在考虑以下内容:
function outerFunction() {
    var outerVar = "monkey";
function innerFunction() {
        return outerVar;
    }
return innerFunction;
}
var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());
警告:猴子 referenceToInnerFunction设置为outerFunction(),它只返回对innerFunction的引用。当调用referenceToInnerFunction时,它返回outerVar。同样,如上所述,这表明innerFunction可以访问outerVar的变量outerVar。此外,有趣的是,即使在outerFunction完成执行后,它仍保留此访问权限。 在这里,事情变得非常有趣。如果我们要删除outerFunction,比如将其设置为null,您可能会认为referenceToInnerFunction将失去对outerVar值的访问权限。但这种情况并非如此。
function outerFunction() {
    var outerVar = "monkey";
function innerFunction() {
        return outerVar;
    }
return innerFunction;
}
var referenceToInnerFunction = outerFunction();
alert(referenceToInnerFunction());
outerFunction = null;
alert(referenceToInnerFunction());
警告:猴子 警告:猴子 但这是怎么回事?现在,为了将outerFunction设置为null,referenceToInnerFunction如何知道outerVar的值? referenceToInnerFunction仍然可以访问outerVar的值的原因是因为当首先通过将innerFunction放在outerFunction中来创建闭包时,innerFunction将对outerFunction的作用域(其变量和函数)的引用添加到其作用域链中。这意味着innerFunction具有指向所有outerFunction变量的指针或引用,包括outerVar。因此,即使在outerFunction完成执行时,或者即使它被删除或设置为null,其范围内的变量(如outerVar)也会留在内存中,因为在返回到的内部函数部分上对它们的未完成引用referenceToInnerFunction。要从内存中真正释放outerVar和其余的outerFunction变量,你必须摆脱对它们的这种杰出引用,比如将referenceToInnerFunction设置为null。 ////////// 关于闭包的另外两件事要注意。首先,闭包将始终可以访问其包含函数的最后一个值。
function outerFunction() {
    var outerVar = "monkey";
function innerFunction() {
        alert(outerVar);
    }
outerVar = "gorilla";
innerFunction();
}
outerFunction();
警告:大猩猩 其次,当创建一个闭包时,它会保留对其所有封闭函数的变量和函数的引用;它无法挑选。但是,闭包应该谨慎使用,或者至少要谨慎使用,因为它们可能会占用大量内存;在包含函数完成执行后很长时间内,很多变量都可以保存在内存中。

eet

赞同来自:

前言:这个答案是在问题是:

Like the old Albert said : "If you can't explain it to a six-year old, you really don't understand it yourself.”. Well I tried to explain JS closures to a 27 years old friend and completely failed. Can anybody consider that I am 6 and strangely interested in that subject ?
我很确定我是唯一一个试图从字面上解决初始问题的人之一。从那以后,这个问题已经发生了几次变异,所以我现在的回答可能看起来非常愚蠢了。空间不足。希望这个故事的总体思路对某些人来说仍然很有趣。
在解释困难的概念时,我非常喜欢类比和隐喻,所以让我试着用一个故事。 很久以前: 有一位公主......
function princess() {
她生活在一个充满冒险的美好世界。她遇到了她的白马王子,骑着独角兽,与龙搏斗,遇到说话的动物以及许多其他奇幻的东西。
    var adventures = [];
function princeCharming() { /* ... */ }
var unicorn = { /* ... */ },
        dragons = [ /* ... */ ],
        squirrel = "Hello!";
/* ... */
但她总是要回到她沉闷的家务和成年人的世界。
    return {
而且她经常会告诉他们最近作为公主的惊人冒险经历。
        story: function() {
            return adventures[adventures.length - 1];
        }
    };
}
但他们所看到的只是一个小女孩......
var littleGirl = princess();
...讲述关于魔法和幻想的故事。
littleGirl.story();
即使成年人知道真正的公主,他们也永远不会相信独角兽或龙,因为他们永远看不到它们。成年人说他们只存在于小女孩的想象中。 但我们知道真相;里面有公主的小女孩...... ......真是个公主,里面有个小女孩。

wrerum

赞同来自:

MDN解释得最好我认为:

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.
闭包始终具有外部功能和内部功能。内部函数是所有工作发生的地方,外部函数只是保留内部函数创建范围的环境。通过这种方式,闭包的内部函数“记住”创建它的环境/范围。最经典的例子是计数器功能:
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()时,内部函数(工作函数)都可以递增它。

xporro

赞同来自:

尽管互联网上存在许多关于JavaScript闭包的漂亮定义,但我试图用我最喜欢的闭包定义来解释我六岁的朋友,这有助于我更好地理解闭包。 什么是关闭? 闭包是一个内部函数,可以访问外部(封闭)函数的变量范围链。闭包有三个作用域链:它可以访问自己的作用域(在大括号之间定义的变量),它可以访问外部函数的变量,并且可以访问全局变量。 闭包是函数的局部变量 - 在函数返回后保持活动状态。 闭包是指独立(自由)变量的函数。换句话说,闭包中定义的函数“记住”创建它的环境。 闭包是范围概念的延伸。使用闭包,函数可以访问创建函数的作用域中可用的变量。 闭包是一个堆栈帧,在函数返回时不会释放。 (好像'stack-frame'是malloc'ed而不是堆栈!) 诸如Java之类的语言提供了将方法声明为私有的能力,这意味着它们只能由同一类中的其他方法调用。 JavaScript不提供本机方式,但可以使用闭包来模拟私有方法。 “闭包”是一个表达式(通常是一个函数),它可以将自由变量与绑定这些变量的环境(“关闭”表达式)结合在一起。 闭包是一种抽象机制,允许您非常干净地分离关注点。 闭包的使用: 闭包在隐藏功能实现的同时仍然可以显示界面。 您可以使用闭包在JavaScript中模拟封装概念。 闭包在jQueryNode.js中广泛使用。 尽管对象文字很容易创建并且便于存储数据,但是在大型Web应用程序中创建静态单例命名空间时,闭包通常是更好的选择。 闭包示例: 假设我6岁的朋友最近在他的小学结识了这一点,我觉得这个加上这两个数字的例子对于六岁的学生来说是最简单易学的。 示例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);
    });
});
有用的链接: 感谢以上链接,这有助于我更好地理解和解释闭包。

xet

赞同来自:

关闭一词只是指能够访问一个函数(六岁:盒子)中关闭(六岁:私人)的对象(六岁:事物)。即使功能(六岁:盒子)超出范围(六岁:远远发送)。

nrerum

赞同来自:

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);​
Proof that this example creates a closure even if the inner function doesn't return * C#问题

laut

赞同来自:

这是我能给出的最禅的答案: 你期望这段代码做什么?在运行它之前在评论中告诉我。我很好奇!

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 ,希望如此)并粘贴代码in并点击 Enter 。 如果这段代码打印出你所期望的(JavaScript新手 - 最后忽略“未定义”),那么你已经有了无言的理解。换句话说,变量i是内部函数实例闭包的一部分。 我这样说是因为,一旦我理解了这段代码将foo()的内部函数实例放入barbaz然后通过这些变量调用它们,没有其他任何让我感到惊讶的事情。 但如果我错了,控制台输出让你感到惊讶,请告诉我!

yet

赞同来自:

闭包是函数中的一个函数,可以访问其“父”函数的变量和参数。 例:

function showPostCard(Sender, Receiver) {
var PostCardMessage = " Happy Spring!!! Love, ";
function PreparePostCard() {
        return "Dear " + Receiver + PostCardMessage + Sender;
    }
return PreparePostCard();
}
showPostCard("Granny", "Olivia");

nquae

赞同来自:

最简单,最简短,最容易理解的答案: 闭包是一个代码块,其中每一行可以引用具有相同变量名的同一组变量。 如果“this”表示与其他地方不同的东西,那么你知道它是两个不同的闭包。

eomnis

赞同来自:

我敢肯定,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! :)

gvel

赞同来自:

这个答案的版本图片:[已解决] 忘记范围每一件事并记住:当变量需要某处时,javascript不会破坏它。变量始终指向最新值。 例1: enter image description here 例2: enter image description here 例3: enter image description here

iest

赞同来自:

曾经有一个穴居人

function caveman {
谁有一个非常特殊的岩石,
var rock = "diamond";
你自己无法获得岩石,因为它是在穴居人的私人洞穴里。只有穴居人知道如何找到并获得岩石。
return {
    getRock: function() {
        return rock;
    }
};
}
幸运的是,他是一个友好的穴居人,如果你愿意等他回来,他很乐意为你找到它。
var friend = caveman();
var rock = friend.getRock();
相当聪明的穴居人。

mnatus

赞同来自:

闭包基本上创造了两件事:

  • 一个功能
  • 只有该功能才能访问的私有范围 这就像在功能周围涂上一些涂层。 所以对于一个6岁的子元素来说,可以用类比来解释。假设我建造了一个机器人。那个机器人可以做很多事情。在这些事情中,我把它编程为计算他在天空中看到的鸟的数量。每次他看到25只鸟,他应该告诉我他从一开始就看到了多少只鸟。 除非他告诉我,我不知道他见过多少只鸟。只有他知道。这是私人范围。这基本上就是机器人的记忆。假设我给了他4 GB。 告诉我他看到的鸟有多少是返回的功能。我也创造了那个。 这个比喻有点太糟糕了,但我想有人可以改进它。

gvel

赞同来自:

我如何向一个六岁的子元素解释: 你知道成年人如何拥有房子,他们称之为家?当一个妈妈有一个子元素,子元素真的没有任何东西,对吧?但是它的父级拥有一所房子,所以每当有人问子元素“你的家在哪里?”时,他/她就可以回答“那所房子!”,并指向其父级的房子。一个“关闭”是子元素总是(即使在国外)能够说它有一个家的能力,即使它真的是父级拥有房子。

but

赞同来自:

我整理了一个交互式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