理解JavaScript中的闭包

在JavaScript中，函数是可以定义作用域的，函数内部定义的变量，外部是不能访问的，比如下面代码：

function func() {  var foo= 'hello';}console.log(foo); // Uncaught ReferenceError: foo is not defined

如果我们想要从函数外部访问函数内容定义的变量，可以这样做：

function func() {  var foo = 'hello';  return function() {    return foo;  }}var f = func();var foo = f();console.log(foo); // hello

这就是闭包，其作用之一：可以在函数外部访问函数内部定义的变量

假如我们要做一个自增1的计数器，可以使用闭包：

function counter() {  var count = 0;  return function() {    return ++count;  }}var c1 = counter();console.log(c1()); // 1console.log(c1()); // 2console.log(c1()); // 3// 调用counter()，获取一个新的计数器var c2 = counter();console.log(c2()); // 1console.log(c2()); // 2// 两个计数器之间不受影响console.log(c1()); // 4

由上述代码可以看出，我们调用c1()时，实质上是调用了counter()方法返回的函数，所以这里并没有重新声明并初始化count，而在在内存中取出，所以闭包的第二个作用就是：可以把函数内部定义的变量保存到内存中

到这里大家应该知道闭包是什么了吧？

那么闭包可以用来做什么呢？这里列举两个场景

场景一：点击li标签获取正确的index

<ul>  <li>0</li>  <li>1</li>  <li>2</li>  <li>3</li></ul>// 错误的写法var lis = document.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {  var li = lis[i];  // 因为i是共享的，所以遍历到最后i都为4了  li.onclick = function() {    console.log(i);  }}// 正确的写法var lis = document.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {  var li = lis[i];  // 每个匿名函数内部都维护了自己的变量，所以互不干扰  li.onclick = (function(index) {    return function() {      console.log(index);    }  })(i);}

场景二：维护私有属性

function counter() {  // 私有属性count  var count = 0;  return {    increase: function() {      count++;    },    decrease: function() {      count--;    },    getCount: function() {      return count;    }  }}var c = counter();// 只能通过increase()与decrease()修改其值c.increase();// 只能通过getCount()获取其值console.log(c.getCount());

以上就是我对闭包的理解，比较粗浅，有不足之处希望大佬们指出，谢谢。