闭包原理

2020-03-18 本文已影响0人弓长晓

忠于兴趣，诚待文字，取悦自己，理解他人。

变量
作用域
作用域链
闭包

0-1javascript变量

1JavaScript 变量：JavaScript 变量是存储数据值的容器
声明（创建） JavaScript 变量：通过 -var- 关键词来声明 JavaScript 变量：

0-2javascript作用域

2JS作用域大致分为三：全局作用域和局部作用域，以及ES6的块级作用域
全局作用域:最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：

<script>
      var outerVar = "outer";
      function fn(){
         console.log(outerVar);
      }
      fn();//result:outer
</script>

局部作用域:和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，而对于函数外部是无法访问的，最常见的例如函数内部

<script>
      function fn(){
         var innerVar = "inner";
      }
      fn();
      console.log(innerVar);//报错，是没有定义
</script>

值得一提的是如果你在函数内部没有用var定义函数，那你其实声明了一个全局的变量

   <script>
      function fn(){
         innerVar = "inner";
      }
      fn();
      console.log(innerVar);// result:inner
   </script>

同样原理我们看如下代码：

  <script>
      var scope = "global";
      function fn(){
         console.log(scope);//result:undefined
         var scope = "local";
         console.log(scope);//result:local;
      }
      fn();
   </script>

不要怀疑，对就如你眼中看到一样，js和别的语言有区别，函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”：

0-3javascript作用域链

我对作用域链的理解是：
在内部函数可以访问外部函数变量的这种机制，用所梯度链式查找的方式，决定哪些数据能被内部函数访问的过程。那我就想问，为啥内部可以访问外部？

0-4javascript执行环境

所谓执行环境（有时也称环境）它是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。js为每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中.
①比如：

<script>
      var name = "小美"; 
      function got1(){
         return name; 
      }
      function got2(){
         return name;
      }
      got1();
      got2();
</script>

全局执行环境是最外围的执行环境，全局执行环境被认为是window对象，因此所有的全局变量和函数都作为window对象的属性和方法创建的。 js的执行顺序是根据函数的调用来决定的，当一个函数被调用时，该函数环境的变量对象就被压入一个环境栈中。而在函数执行之后，栈将该函数的变量对象弹出，把控制权交给之前的执行环境变量对象。

当某个函数第一次被调用时，就会创建一个执行环境(execution context)以及相应的作用域链，并把作用域链赋值给一个特殊的内部属性([scope])。然后使用this，arguments(arguments在全局环境中不存在)和其他命名参数的值来初始化函数的活动对象(activation object)。当前执行环境的变量对象始终在作用域链的第0位。
因此我们可以看过程图：当got1()第一调用的时候，会创建一个由got1函数对象创建的执行环境，可以看到got1里并没有scope变量，于是沿着作用域链(scope chain)向后寻找，结果在全局变量对象里找到了scope，所以就返回全局变量对象里的scope值。执行过后，栈会将got1()对象“销毁”，然后执行同样步骤的got2（）

那这些又和闭包有什么关系那？

<script>
      function out(){
         var scope = "outer";
         function into(){
            return scope;
         }
         return innto;
      }
      var fn = out();
      fn();
</script>

以上其实就是一个闭包，而闭包的原理也就是图鉴的原理！我们分析代码：

outer()内部返回了一个into函数，

①当调用out时，into函数的作用域链就已经被初始化了，（也就是说已经执行了图示的过程，在本作用域内没有，然后到父级类找）
②一般来说，当某个环境中的所有代码执行完毕后，该环境被销毁（弹出环境栈），保存在其中的所有变量和函数也随之销毁（全局执行环境变量直到应用程序退出，如网页关闭才会被销毁） 但是像上面那种有内部函数的又有所不同，
③当out()函数执行结束，执行环境被销毁，但是其关联的活动对象并没有随之销毁，而是一直存在于内存中，因为该活动对象被其内部函数的作用域链所引用

0-5闭包

0-5-1什么是闭包?

闭包：闭包（Closure）是JavaScript语言中一个非常重要的特性

MDN：闭包是函数和声明该函数的词法环境的组合。
在Javascript语言中，只有函数中的子函数才能引用函数中的变量，简单来说，闭包就是定义在函数中的函数，是函数内外部连接的桥梁
闭包的意义是：当前作用域总是能够访问外部作用域中的变量；函数是唯一拥有自身作用域的结构，所以闭包的创建依赖于函数
百度百科：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

0-5-2闭包的作用

读取自身函数外部的变量（沿着作用域链寻找）
让这些外部变量始终保存在内存中
延长局部变量的生命周期
维护私有变量-局部变量的安全

0-5-3闭包的条件

1. 外层函数和子函数
1. 外层函数必须有局部变量
1. 子函数要操作外层函数的局部变量
1. 让子函数和外部产生关联。 // 关联不一定是返回函数

0-5-4闭包案例

写个闭包：就用this，今天碰到的

　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());//result:The Window