理解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()); // 1
console.log(c1()); // 2
console.log(c1()); // 3

// 调用counter()，获取一个新的计数器
var c2 = counter();
console.log(c2()); // 1
console.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());

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