JavaScript中闭包机制的由来和应用

JavaScript中闭包机制的由来和应用

前端开发者经常会接触到闭包。

说起闭包，很多人第一时间想到的是闭包的概念

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

至于说为什么会有闭包，看了很多解释，感觉回答都不在点上。不少人说的都是闭包的作用，而不是闭包的由来，为什么JavaScript要引入闭包的机制。

之前有在维基百科里看到响应的解释，这里给大家转述一下：

在JavaScript中，函数作为一等公民，既可以作为函数的返回值，也可以作为函数的参数传入。那么在函数调用的时候，就会出现funarg问题，打破了基于栈的内存分配模式。为了解决这个问题，这才引入了闭包机制。

下面再解释一下funarg问题

在面向对战的编程语言中，函数的每一次调用，它的局部变量和函数参数被存放在一个被ushed这些变量的栈中。当从一个函数返回的时候，这些变量被popped（退出）。这种模型对于函数用作函数值有很大的缺陷

举个例子

function testFn() {
 
  let localVar = 10;
 
  function innerFn(innerParam) {
    console.log(innerParam + localVar);
  }
 
  return innerFn;
}
 
let someFn = testFn();
someFn(20); // 30

在这个例子中， localVar 变量对于 innerFn 函数来说就是自由的。

在这个系统中将会使用面向堆栈的模式来存放局部变量，这就意味着在 testFn 函数返回的时候它的所有的局部变量都将从栈中移除。然后这将导致从外部激活 innerFun 函数时出错。

而且，在这种特殊情况下，在面向堆栈的实现中，根本不可能返回 innerFn 函数，因为对于 testFn 而言 innerFn 也是局部的，那么在 testFn 返回的时候也会被移除。

为了解决这个问题，就把函数对应的父级环境存放在函数的内部[[Scoped]]属性。这也就意味着，函数在创建后就会在其scpoed属性中保存对应的作用域链。

闭包的应用：

说的最多的就是防抖和节流了，这里可以自行搜一下对应的文章。也可以看看我的下一篇文章，javascript中防抖和节流的实现