详细聊聊浏览器是如何看闭包的

浏览器是如何看闭包的？

首先，让我们来回顾一下什么是闭包。闭包是在定义函数时创建的一种特殊作用域。可以访问父级作用域中定义的变量和函数，即使父级作用域已经被销毁了。这使得我们可以创建私有变量和函数，也可以用于实现某些高级特性，例如函数记忆和柯里化等。

那么，当浏览器解析Javascript代码时，是如何看待闭包的呢？以下是完整攻略：

1. 函数作用域

Javascript 采用的是函数作用域，在函数内部定义的变量和函数只能在该函数内部被访问，即使其他代码块也不能访问。当函数执行结束后，这些变量和函数的引用也随之销毁。

function foo() {
  var a = 1;
  function innerFoo() {
    console.log(a);
  }
  innerFoo();
}
foo();  // 输出 1

1. 闭包

当函数中嵌套函数并且内部函数可以访问父级函数中的变量时，就产生了闭包。内部函数可以访问父级函数中的变量，并且随着父级函数的执行而存活，不受父级函数执行完毕的影响。

function foo() {
  var a = 1;
  function innerFoo() {
    console.log(a);
  }
  return innerFoo;
}
var inner = foo();
inner();  // 输出 1

在这个例子中，当调用 foo 函数时，内部函数 innerFoo 被返回并赋值给变量 inner。此时，innerFoo 函数依然可以访问到父级函数 foo 中的变量 a。当调用 inner 函数时，输出变量 a 的值 1。

1. 内存空间的管理

由于闭包的特殊作用域，函数执行结束后不能立即销毁内存，因为内部函数可能会持有外部变量的引用。这就需浏览器在内存空间中维护完整的作用域树并对其进行垃圾回收。

在一些复杂的场景中，闭包可能会导致内存泄漏问题。当内部函数持有父级函数中的变量引用并且父级函数不被销毁时，内存就会一直被占用。因此，我们应该避免滥用闭包，尤其是在循环中使用闭包引用循环变量。

示例一：

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

var counter1 = createCounter();
counter1();  // 输出1
counter1();  // 输出2

var counter2 = createCounter();
counter2();  // 输出1

在这个例子中，createCounter 函数返回了一个匿名函数，并且内部函数可以访问父级函数中的变量 count，每次调用内部函数 count 的值都会加 1。我们可以创建多个计数器并且每个计数器都有自己的 count 变量。

示例二：

function bindEvent() {
  var btns = document.querySelectorAll('button');
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function () {
      console.log(i);
    });
  }
}

bindEvent();

在这个例子中，我们希望为每个按钮添加点击事件，并在点击时输出按钮的索引。如果你以为这样写是正确的，那么你就错了。由于内部函数持有外部变量的引用，所有点击事件中输出的 i 都是相同的，并且等于 for 循环结束后的值 btns.length。正确的写法是使用闭包将 i 保存在一个新的函数作用域中。

function bindEvent() {
  var btns = document.querySelectorAll('button');
  for (var i = 0; i < btns.length; i++) {
    (function (index) {
      btns[index].addEventListener('click', function () {
        console.log(index);
      });
    })(i);
  }
}

bindEvent();