JavaScript作用域闭包简述

Posted 2020-08-17 y丶卿

作用域

　　技术一般水平有限，有什么错的地方，望大家指正。

　　作用域就是变量起作用的范围。作用域包括全局作用域，函数作用域以块级作用域，ES6中的let和const可以形成块级作用域。

　　除了块级作用域，在函数外面声明的变量可以在任何一个地方被访问到,这些变量的作用域都是全局作用域，全局作用域中的变量可以再任何一个地方使用：

var a = "zt";
function fn1(){
    console.log(a);
}
function fn2(){
    console.log(a);
}
fn1();
fn2();

　　在函数里面声明的变量只能在当前函数内使用，这些变量的作用域我们称为函数作用域，只在当前函数内有效：

function fn1(){
    var a = "zt";
    console.log(a);
}
function fn2(){
    console.log(a)
}
fn1();
fn2();//报错提示a没有定义

　　函数内定义的变量只在当前函数内有效，在函数以外的地方是不能被访问到的，fn2函数内没有定义a，全局作用域中也没有a使用一个不存在的变量所以报错。

作用域链

　　作用域是可以嵌套的比如在全局作用域里面创建一个函数，函数里面可以在创建一个函数，这样就发生了作用域的嵌套，作用域链可以把作用域链接起来。当使用一个变量的时候，会优先在当前作用域内去寻找变量，如果当前作用域内不存在就会去上层作用域去寻找一直到全局作用域，如果还不能找到变量就会报错。　　

var a = "global";
function fn1(){
    console.log(a);
}
fn1();

作用域是静态的

　　我们先看一个例子：

  var flag = "outer";
  function demo(){
      var flag = "inner";
      function inner(){
          console.log(flag);
      }
      return inner;
  }
  var fn = demo();
  fn();//inner

  var flag = "outer";
  function demo(){
      var flag = "inner";
      fn();
  }
  function fn(){
      console.log(flag);
  }
  demo();//outer

　　通过这两个例子我们可以看出函数的作用域是静态的，一个函数不管在哪被调用，它的作用域都是声明时的作用域。函数的作用域在声明时就已经被创建，在调用函数时会去访问他已经创建的作用域。

闭包

　　闭包在MDN中的定义为：闭包是指那些可以访问独立变量的函数，所以在定义上我们可以把所有的函数都看做是闭包。闭包即密闭的空间，我们可以很自然的想到函数，因为函数就会生成一个密闭的空间，如果函数想称为一个闭包只需要在使用一个外部变量即可（使用外部变量的函数就是闭包）。通过闭包可以给我们带来一些便利，就是可以在高等级的作用域使用低等级作用域中的变量：

  function demo(){
      var flag = "test";
      return function(){
          console.log(flag);
      }
  }
  demo()();

　　我们把demo函数里面的函数通过return使其可以在外部使用，我们已经说过作用域都是静态的，这样我们在外部使用return的函数时，就可以看到我们在全局作用域中调用函数最后输出了demo函数里面的"test"。

　　这样我们可以做一些更有意义的事：

  var data = [];
  function demo(){
      var data = [];
      return{
          add:function(a){
              data.push(a);
          },
          print:function(){
              console.log(data);
          }
      }
  }
  var tool = demo();
  tool.add(1);
  tool.add(2);
  tool.add(3);
  tool.print();//[1, 2, 3]

　　我们可以利用demo函数里面的data来存储我们的信息而且不用担心它被破坏（demo里面的data被私有化），而且我们也可以在外部在声明一个同名的data来存储别的信息，这两个不会产生任何冲突。

　　闭包也可以帮我们解决一些小问题：

  for(var i=0;i<4;i++){
      setTimeout(function(){
          console.log(i);
      });
  }

　　我们预期的结果是打印当前循环的i值结果输出全是4。先解释一下出现这么情况的原因：JS是一种单线程的语言，而setTimeout是异步的，只有当我们的代码执行完成以后setTimeout的处理函数才会执行，而执行的时候i的值已经是4了所以最终的输出全是4。

　　我们可以通过闭包来解决这一问题：

  for(var i=0;i<4;i++){
      (function(i){
          setTimeout(function(){
              console.log(i)
          })
      }(i))
  }

　　闭包可以形成一个独立的作用域这样每次循环都会有一个独立的函数作用域，循环完成后虽然i的值仍然是4但是setTimeout的处理函数在寻找i的时候会优先找到作为参数的i，而每一个参数i都表示当次循环的i，利用闭包我们可以完美的解决这种问题。

　　在我们实际开发的过程中，遇到这种情况我们就可以通过闭包来解决，我们所说的"这种情况"通常有三个特点：

　　1.首先有一个循环

　　2.循环里面会创建函数，并且函数是延后执行的

　　3.这些延后执行的函数会使用一个共同的变量，并且这个共同的变量和当前的循环值有关系

　　我们按照这个规律套一下上面的代码：

　　循环有了，每次循环也会生成一个函数，这些函数也都是在循环完成后才能执行，而且每一个函数都使用共同的i，而i就是当前的循环值，正好符合我们的三个特点。我们通过(function(){}())这种方式(匿名函数自执行)来形成一个闭包达到我们预期的目的。

　　更深层次的了解，可以在网上查阅相关资料。