js闭包通过故事来诠释

闭包，作为面试必问题目之一，很多人并不能准确的理解闭包的意思及用法

最近看《你不知道JavaScript》上卷 感觉自己顿悟了 我用自己的理解 去用人话解释一下闭包到底是什么

原文中闭包解释：

《你不知道JavaScript》无论通过何种手段将内部函数传递到所在的词法作用域以外， 它都会持有对原始定义作用域的引用， 无论在何处执行这个函数都会使用闭包。

《JavaScript高级编程 第4版》闭包指的是那些引用了另一个函数作用域中变量的函数，通常是在嵌套函数中实现的。

原文的意思生涩难懂，我用一个例子来说明闭包到底是什么

一名间谍 去 foo国 窃取国家情报，间谍逃出foo国 传播了foo国家情报

用代码演示一下

var spy; // 间谍

function foo(){
	var info = '国家情报';
    spy = function(){
    	console.log(info) // 窃取国家情报
    }
}

foo() //国家成立

spy() //传播foo国家情报

看chrom调试截图 闭包(Closure) 已经存在了 间谍可以拿到foo国家的信息 并传播出去

// 获取国家情报方法1
function foo(){
	var info = '国家情报';
  	function spy(){ // 国家内部策反一个间谍
    	console.log(info) // 窃取国家情报
    }
    return spy; // 间谍装备弹射器 可以飞到接壤的国家
}
var x = foo(); // x国家 和 foo国家 接壤 间谍飞到x国
x();// x国 已获取到国家情报

// 获取国家情报方法2
function foo(){
	var info = '国家情报';
    function spy(){ // 国家内部策反一个间谍
    	console.log(info) // 窃取国家情报
    }
    x(spy) // x国挖地道到foo国 
}

function x(spy){ // 间谍通过地道来x国 把foo国家的情报说了出来
	spy()
}

foo()

无论通过何种手段将间谍送出foo国家以外，间谍手里还拿着foo国家的信息，无论间谍去那个国家都能传递foo国家的信息 这就是闭包

—————————————————————————————————————————————————————————————————————————————————

现在说另一种形式闭包(回调)

  function wait(message) {
    setTimeout( function timer() {
      console.log( message );
    }, 1000 );
  } 
  wait( "Hello, closure!" );

来看一下chrome调试图 回调函数timer使用 wait的作用域 的闭包 wait 执行一秒后

回收机制(函数执行结束后将会被回收)一旦形成闭包，闭包所在的作用域将无法被垃圾回收机制回收

重点 重点 重点 记住就完了 在定时器、 事件监听器、Ajax 请求、 跨窗口通信、 Web Workers 或者任何其他的异步（或者同步） 任务中， 只要使用了回调函数， 实际上就是在使用闭包！

关键的问题出现了，闭包后作用域中的变量将不会再被回收如果这个变量中的数据特别大，传说中的内存泄漏就出现了

  // 定时器
  function wait(message) {
    function process(data){
    	// 这里使用特别大的数据量
        
    	console.log(data)
    }
  	var BigData = {x:1,y:2,z:3} // 简单表示一下特别大的数据量
    process(BigData);
    // 回调 使整个wait作用域形成了闭包
    // 从而导致BigData变量无法被垃圾回收机制进行回收从而可能导致的内存泄漏
    setTimeout( function timer() {
      console.log( message );
    }, 1000 );
  } 
  
  wait( "Hello, closure!" );
  
  // 事件监听
  function assignHandler() {
    let element = document.getElementById('someElement');
    let id = element.id;
    element.onclick = () => console.log(id);
  }

点击事件调试截图

当执行点击事件后将创建了一个闭包将element元素保存起来不会被回收 如果遇到获取多个dom元素时可能就会遇到内存泄漏 所以使用闭包须谨慎啊