【JavaScript闭包】关于JavaScript闭包的理解

关于JavaScript闭包的理解

闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现，今天我们一起来梳理关于闭包的知识点。

一、变量作用域

要理解闭包，必须要理解变量作用域，在JavaScript中变量又分为全局变量和局部变量。

• 全局变量：在全局环境中声明的变量
• 局部变量：在函数中声明的变量

当函数在执行时，会创建一个封闭的执行期上下文环境，函数内部声明的变量仅可在函数内部使用，外部无法访问，而全局变量则在任何地方都可以使用。

举个简单的栗子：

	var global = "window"
	function foo() {
	  var a = 0;
	  console.log(global) // window
	}
	foo();
	console.log(a) // Uncaught ReferenceError: a is not defined

二、如何从外部读取局部变量

正常情况下，外部是无法访问局部变量的，但是我们有时候需要得到函数内的局部变量，那该怎么办呢？

方法就是可以在函数的内部，再定义一个函数。

	function foo() {
	  var a = 666;
	  function bar() {
	    console.log(a); // 666
	  }
	}

在上面栗子中，bar被包括在foo内部，这时foo内部的所有局部变量对bar都是可见的。但是反过来就不行，bar内部的局部变量对foo不可见。这就是Javascript语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。
所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然bar可以获取foo中的局部变量，那是不是只要把bar作为返回值，我们就可以在foo外部读取它的内部变量呢？先看下面栗子

	function foo() {
	  var a = 666;
	
	  function bar() {
	    console.log(a);
	  }
	  
	  return bar;
	}
	var result = foo();
	result(); // 666

上面栗子我们可以验证，函数内返回函数是可以获取它上一级函数的局部变量的，这个栗子就已经涉及到我们说的闭包了。

三、什么是闭包

闭包是指有权访问另一个函数作用域中的变量的函数，可以理解为闭包是能够读取其他函数内部变量的函数。
由于在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

四、闭包有什么用

1、模仿块级作用域

在ES6之前是没有块级作用域，定义一个for循环时，由于JavaScript不会告诉你变量是否已经被声明，所以容易造成命名冲突，如果在全局环境定义的变量，就会污染全局环境，因此可以利用闭包的特性来模仿块级作用域。

2、储存变量

闭包的另一个特点是可以保存外部函数的变量，内部函数保留了对外部函数的活动变量的引用，所以变量不会被释放。
这种写法可以用在把一些不经常变动计算起来又比较复杂的值保存起来，节省每次的访问时间。

3、封装私有变量

我们可以把函数当作一个范围，函数内部的变量就是私有变量，在外部无法引用，但是我们可以通过闭包的特点来访问私有变量。

五、闭包的7种形式

1、函数作为返回值

函数作为返回值是闭包最常用的一种形式

var foo = function(){
    var b = 'local';
    var bar = function(){
        return b;
    }
    return bar;
}
console.log(foo()());

2、函数赋值

一种变形的形式是将内部函数赋值给一个外部变量

var inner;
var foo = function(){
    var b = 'local';
    var bar = function(){
        return b;
    };
    inner = bar;
};
foo();
console.log(inner());

3、函数参数

闭包可以通过函数参数传递函数的形式来实现

var inner = function(fn){
    console.log(fn());
}
var foo = function(){
    var b = 'local';
    var bar = function(){
        return b;
    }
    inner(bar);
}
foo();

4、立即执行函数（IIFE）

由前面的示例代码可知，函数foo()都是在声明后立即被调用，因此可以使用IIFE来替代。

  function inner(fn){
      console.log(fn());
  }

  (function(){
      var b = 'local';
      var bar = function(){
        return b;
      }
      inner(bar);
  })();

5、循环赋值

在闭包问题上，最常见的一个错误就是循环赋值的错误。

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  var lis = document.querySelectorAll('li')
  for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function(){
      console.log(i)
    }
  }
    
    
  // 结果是每次点击i都是4  

正确的写法如下：

  var lis = document.querySelectorAll('li')  for (var i = 0; i < lis.length; i++) {    lis[i].onclick = (function (j) {      return function () {        console.log(j)      }    })(i)  }

6、g(s)etter

我们通过提供getter()和setter()函数来将要操作的变量保存在函数内部，防止其暴露在外部

  function person() {    var name = '张三'    var obj = {      getName: function () {        return name      },      setName: function (n) {        name = n      }    }    return obj  }  var p = person()  console.log(p.getName()); // 张三  p.setName('李四');  console.log(p.getName()); // 李四

7、迭代器

我们经常使用闭包来实现一个累加器

var add = function () {    var number = 0;    return function () {      return ++number;    }  };  var add1 = add() // 闭包  var add2 = add() // 闭包console.log(add1())console.log(add1())console.log(add2())

运行结果是：1 2 1

注意：每个闭包都是各自的独立，上面栗子中add1和add2引用各自的词法作用域内的变量number。每次调用其中一个累加器时，通过改变number变量的值，会改变这个闭包的词法环境。然而在一个闭包内对变量的修改，不会影响到另外一个闭包中的变量。

六、闭包注意事项

通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止，因为闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收。这是优点也是缺点，不必要的闭包只会徒增内存消耗，所以我们在使用的时候需要注意这方面。可以通过设置null手动释放对闭包的引用。

function makeAdder(x) {  return function(y) {    return x + y;  };}var add3 = makeAdder(3);var add5 = makeAdder(5);console.log(add3(2));  // 5console.log(add5(5));  // 10// 需要手动释放对闭包的引用add3 = null;add5 = null;