7.彻底搞懂javascript-闭包

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30871293

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c09f8e951882530544f1e53

版权

关于闭包的讨论的太多太多了，这里不讲晦涩难懂的概念。

我们来想一个问题,

如何把函数的运行上下文保存下来？

啥？

function print() {
    var inFunction = 'inFunction';
    console.log(inFunction);
}

print()
复制代码

我们知道在进入函数运行的时候，会创建函数的运行上下文，并放在栈顶：

当函数运行完毕，把函数运行上下文从运行栈中弹出：

大家会发现，对上次运行的函数时创建的词法环境的访问链路，断掉了，我们找不到了，无法再引用函数词法环境里的变量（上图中红色框框所示）。

那有没有办法，把这个对这个词法环境的引用保存下来呢？

答案是有的。

我们回忆一下：函数创建时会把创建函数时候的运行上下文的词法环境保存在函数对象的[[scope]]中。因此，如果我们在函数运行的上下文创建一个函数，这个函数的[[scope]]就可以保存父级函数运行的时的词法环境了。像这样：

function print() {
    var inFunction = 'inFunction';
    console.log(inFunction);
    function inner() {
        var inFunction = inFunction;
    }
}

print()
复制代码

如上图，发现虽然可以通过内部函数的[[scope]]其访问 "失联"的词法环境，我们发现，内部函数由于外部函数运行上下文的退出，也处于“失联”状态，我们在全局上下文上无法访问内部函数。

其实很直观的，如果在全局上创建一个变量，并把内部函数返回给它，它不就可以通过全局变量访问内部函数了，进而可以访问外部函数那些“失联的词法环境”。

function print() {
    var inFunction = 'inFunction';
    console.log(inFunction);
    function inner() {
        var inFunction = inFunction;
    }
    
    return inner
}

var inner = print();
inner();
复制代码

如下图所示：

我们发现，即使函数运行上下文退出了，我们在全局环境中还是可以访问到所退出的函数的词法环境。

更近一步思考：既然可以在函数内部返回一个函数对象给全局变量，可以保持对已经退出运行栈的运行上下文的词法环境的访问，如果我们在函数内返回一个普通对象呢？把需要被全局环境访问的“东西”复制到对象上，然后把对象返回，我们也可以在全局变量通过对象找到那些“失联”的信息。

function print() {
  var inFunction = 'inFunction';
  console.log(inFunction);
  function inner() {
      var inFunction = inFunction;
  }
  
  return {
    inFunction:inFunction,
    inner:inner
  }
}

var obj = print();
console.log(obj.inFunction);
复制代码