#每日一题# 介绍一下JavaScript的闭包以及应用场景

闭包

JavaScript 是一种非常面向函数的语言。它给了我们很大的自由度。在 JavaScript 中，我们可以动态创建函数，可以将函数作为参数传递给另一个函数，并在完全不同的代码位置进行调用。正如你不知道的JavaScript中定义的那样：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

嵌套函数

当一个函数是在另一个函数中创建的时，那么该函数就被称为“嵌套”的。 JavaScript 中很容易实现这一点。

我们可以使用嵌套来组织代码，比如这样：

function sayHiBye(firstName, lastName) {

  // 辅助嵌套函数使用如下
  function getFullName() {
    return firstName + " " + lastName;
  }

  alert( "Hello, " + getFullName() );
  alert( "Bye, " + getFullName() );

}

这里创建的 嵌套 函数 getFullName() 是为了更加方便。它可以访问外部变量，因此可以返回全名。嵌套函数在 JavaScript 中很常见。

更有意思的是，可以返回一个嵌套函数：作为一个新对象的属性或作为结果返回。之后可以在其他地方使用。不论在哪里调用，它仍然可以访问相同的外部变量。

下面的 makeCounter 创建来一个 “counter” 函数，该函数在每次调用时返回下一个数字：

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2

词法作用域（Lexical scope）

我们需要理解词法作用域的一些知识。请看下面的例子：

1: let val1 = 2
2: function multiplyThis(n) {
3:   let ret = n * val1
4:   return ret
5: }
6: let multiplied = multiplyThis(6)
7: console.log('example of scope:', multiplied)

这里想说明，我们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript的一个复杂之处在于它如何查找变量，如果在函数执行上下文中找不到变量，它将在上一层上下文中寻找它，如果在它的上一层上下文中没有找到，就一直往上，直到它在全局执行上下文中查找为止。(如果最后找不到，它就是 undefined)。
下面列出向个步骤来解释一下（如果你已经熟悉了，请跳过）：

• 在全局执行上下文中声明一个新的变量val1，并将其赋值为2。
• 行2 - 5，声明一个新的变量 multiplyThis，并给它分配一个函数定义。
• 第6行，声明一个在全局执行上下文 multiplied 新变量。
• 从全局执行上下文内存中查找变量multiplyThis，并将其作为函数执行，传递数字 6 作为参数。
• 新函数调用(创建新执行上下文），创建一个新的 multiplyThis 函数执行上下文。
• 在 multiplyThis 执行上下文中，声明一个变量n并将其赋值为6
• 第 3 行。在multiplyThis执行上下文中，声明一个变量ret。
• 继续第 3 行。对两个操作数 n 和 val1 进行乘法运算.在multiplyThis执行上下文中查找变量 n。我们在步骤6中声明了它,它的内容是数字6。在multiplyThis执行上下文中查找变量val1。multiplyThis执行上下文没有一个标记为 val1 的变量。我们向上一层上下文查找，上一层上下文是全局执行上下文，在全局执行上下文中寻找 val1。哦，是的、在那儿，它在步骤1中定义，数值是2。
• 继续第 3 行。将两个操作数相乘并将其赋值给ret变量，6 * 2 = 12，ret现在值为 12。
• 返回ret变量，销毁multiplyThis执行上下文及其变量 ret 和 n 。变量 val1 没有被销毁，因为它是全局执行上下文的一部分。
• 回到第6行。在调用上下文中，数字 12 赋值给 multiplied 的变量。
• 最后在第7行，我们在控制台中打印 multiplied 变量的值

在这个例子中，我们需要记住一个函数可以访问在它的调用上下文中定义的变量，这个就是词法作用域（Lexical scope）。

最后BOSS闭包

看看下面的代码，并试着弄清楚会发生什么。

 1: function createCounter() {
 2:   let counter = 0
 3:   const myFunction = function() {
 4:     counter = counter + 1
 5:     return counter
 6:   }
 7:   return myFunction
 8: }
 9: const increment = createCounter()
10: const c1 = increment()
11: const c2 = increment()
12: const c3 = increment()
13: console.log('example increment', c1, c2, c3)

• 同上， 行1 - 8。我们在全局执行上下文中创建了一个新的变量createCounter，它得到了指定的函数定义。
• 同上，第9行。我们在全局执行上下文中声明了一个名为increment的新变量。
• 同上，第9行。我们需要调用createCounter函数并将其返回值赋给increment变量。
• 同上，行1 - 8。调用函数，创建新的本地执行上下文。
• 同上，第2行。在本地执行上下文中，声明一个名为counter的新变量并赋值为 0 。
• 行3 - 6。声明一个名为myFunction的新变量，变量在本地执行上下文中声明,变量的内容是另一个函数定义。如第4行和第5行所定义，现在我们还创建了一个闭包，并将其作为函数定义的一部分。闭包包含作用域中的变量，在本例中是变量counter(值为0)。
• 第7行。返回myFunction变量的内容,删除本地执行上下文。myFunction和counter不再存在。控制权交给了调用上下文，我们返回函数定义和它的闭包，闭包中包含了创建它时在作用域内的变量。
• 第9行。在调用上下文(全局执行上下文)中，createCounter返回的值被指定为increment，变量increment现在包含一个函数定义(和闭包),由createCounter返回的函数定义,它不再标记为myFunction，但它的定义是相同的,在全局上下文中，称为increment。
• 第10行。声明一个新变量(c1)。
• 继续第10行。查找变量increment，它是一个函数，调用它。它包含前面返回的函数定义,如第4-5行所定义的。(它还有一个带有变量的闭包)。
• 创建一个新的执行上下文，没有参数，开始执行函数。
• 第4行。counter = counter + 1，寻找变量 counter，在查找本地或全局执行上下文之前，让我们检查一下闭包，瞧，闭包包含一个名为counter的变量，其值为0。在第4行表达式之后，它的值被设置为1。它再次被储存在闭包里，闭包现在包含值为1的变量 counter。
• 第5行。我们返回counter的值，销毁本地执行上下文。
• 回到第10行。返回值(1)被赋给变量c1。
• 第11行。我们重复步骤10-14。这一次，在闭包中此时变量counter的值是1。它在第12步设置的，它的值被递增并以2的形式存储在递增函数的闭包中,c2被赋值为2。
• 第12行。重复步骤10-14,c3被赋值为3。
• 第13行。我们打印变量c1 c2和c3的值。

您可能会问，是否有任何函数具有闭包，甚至是在全局范围内创建的函数?答案是肯定的。在全局作用域中创建的函数拥有闭包，但是由于这些函数是在全局作用域中创建的，所以它们可以访问全局作用域中的所有变量，闭包的概念并不重要。

当函数返回函数时，闭包的概念就变得更加重要了。返回的函数可以访问不属于全局作用域的变量，但它们仅存在于其闭包中。

闭包的缺点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

应用场景

函数防抖与节流

当你需要在一个输入框中当用户输入完成后才触发事件时，就会用到防抖。

/*
   debounce(防抖)
   @parm: fn 事件触发函数
*/
function debounce(fn, interval = 300) {
    //创建一个标记用来存放定时器的返回值
    let timeout = null;
    return function () {
        //每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout);
        //然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
            //将 this 指向正确的对象。保证能正确获取到 event 对象
            fn.apply(this, arguments);
        }, interval);
    };
}

当你需要在一定时间内只触发一次事件，就需要用到节流。

/*
  throttle(节流)
  @parm: fn 事件触发函数
*/

function throttle(fn, interval = 300) {
    //通过闭包保存一个标记
    let canRun = true;
    return function () {
        //在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
        //立即设置为false
        canRun = false;
        //将外部传入的函数的执行放在setTimeout中
        setTimeout(() => {
            //将 this 指向正确的对象。保证能正确获取到 event 对象
            fn.apply(this, arguments);
            //最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
            canRun = true;
        }, interval);
    };
}

使用闭包设计单例模式

class CreateUser {
    constructor(name) {
        this.name = name;
        this.getName();
    }
    getName() {
         return this.name;
    }
}
// 代理实现单例模式
var ProxyMode = (function() {
    var instance = null;
    return function(name) {
        if(!instance) {
            instance = new CreateUser(name);
        }
        return instance;
    }
})();
// 测试单体模式的实例
var a = ProxyMode("aaa");
var b = ProxyMode("bbb");
// 因为单体模式是只实例化一次，所以下面的实例是相等的
console.log(a === b);    //true

为多个组件独立属性

假如我现在要在页面中使用echarts画6个线状图，需要6个容器 ,需要为每个容器元素声明一个独立id,不然会混乱。

 constructor(){
 this.state = {id: "EchartsLine"+Util.clourse()};
 }
componentDidMount() {


    this.myEChart =echarts.init(document.getElementById(this.state.id));//不同id
   
}

<div
    id={this.state.id}
    
    className='echarts-line'>
</div>

clourse(){
    let clourse = (function(){
        var a = 1;
        return function(){
            return a++;
        }
    })(this);
    this.clourse = clourse;
}
//使用数字命名 不用害怕被篡改

拿到正确的值（老掉牙的问题了😝）

for(var i=0;i<10;i++){
    setTimeout(function(){
        console.log(i)//10个10
    },1000)
}

遇到这种问题 如何用解决呢？

for(var i=0;i<10;i++){
((j)=>{
  setTimeout(function(){
        console.log(j)//1-10
    },1000)})(i)
  
}

原理是 声明了10个自执行函数，保存当时的值到内部。

模块机制

function Module() {
  var something = "cool";
  var another = [1,2,3];
  function doSomething() {
    console.log(something);
  }
  function doAnother() {
    console.log(another.join("!"));
  }
  return {
    doSomething,
    doAnother
  }
}

var foo = Module();
foo.doSomething();
foo.doAnother();

推荐阅读