[转载]深入解析JavaScript解析机制与闭包原理实例

本文转载自 https://www.qdfuns.com/article/51786/71518dc9a8ce693a77d4c233fbab08ec.html[]

js解析机制：
js代码解析之前会创建一个如下的词法环境对象（仓库）：LexicalEnvironment{ }
在扫描js代码时会把：

• 1、用声明的方式创建的函数的名字;
• 2、用var定义的变量的名字存到这个词法环境中;
• 3、同名的时候：函数声明会覆盖变量，下面的函数声明会覆盖上面的同名函数;
• 4、函数的值为：对函数的一个引用; 变量的值为undefined;
• 5、如果用函数表达式的方式创建一个函数：
  var fn = function(){ } 这样词法环境中存的是一个变量名fn，并赋值为undefined;
  在调用函数的时候如果在函数上面调用就会出现和变量一样的情况报错undefined;
  这也是以两种不同方式创建函数的区别;
  

  LexicalEnvironment（这个词法环境===window）
  {
  fn： 对函数的一个引用;
  b：undefined;
  }

  用声明的方式创建的函数：

• function fn(){ };

  用var定义的变量：

• var b=5;

  每次调用函数的时候就会创建一个新的词法环境对象（仓库）：LexicalEnvironment{ };
  在解析函数内部的变量和函数声明的时候跟全局词法环境相同，不过有两点需要注意，如下：

• LexicalEnvironment（这个词法环境===fn）
  {
  a：对函数的一个引用;（解析的时候函数声明把变量覆盖了，尽管变量已经被赋值为1）
  b：2;（解析的时候把变量存在了词法环境里，同时赋值为2）
  }

  function fn (a，b){
    alert(a)// function a(){ }
    alert(b)//2
    var b= 100;
    function a(){ }
  }
  fn(1,2);

  调用函数并传递参数的时候，词法环境里会再存变量名的同时赋值，如果是函数内部有同名的函数声明则会把传入的参数覆盖;如果形参只有一个，那么另一个实参则被赋值为undefined;

闭包：

定义：（有多种定义）
1、（比较通俗的定义）：函数嵌套函数，内部函数可以引用外部函数的参数和变量，这些参数和变量不会被垃圾回收机制所回收;
2、在计算机科学中，闭包是词法闭包的简称，是引用了自由变量的函数，这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外（意思就是不会被销毁）。
3、闭包是由函数和其相关的引用环境组合而成的实体。（潜台词就是这个函数将和引用环境同时存在，必须有引用）
综合来说，不管怎么定义都是在围绕着两个本质：函数在引用变量，这个变量将不会被销毁。
什么叫做被引用的自由变量离开了创造它的环境？如下：

　　　　

function fn(){
  var a = 10;
  var b = 20;
  return function fn2(){
    alert(a);
  }
}
var result = fn();
result();//10;

以上代码就是fn2在被return出去以后，离开了fn函数这个环境，但是在外部调用依然能够访问到fn的变量;
这就是被引用的变量不会被销毁;同理在自执行函数这个闭包里，虽然自执行函数在自身执行过后内部变量本该被垃圾回收机制所回收，但是由于其内部有引用它的变量的子函数，也就是说构成了闭包，它的变量依然不会被销毁;

由此可见闭包的一个作用就是：我们能够通过闭包的方法来在外部访问到一个内部函数的变量;
很多人在解释闭包的时候都会把子函数return出去以后在外部调用，其实无论在哪里调用，闭包都已经形成了，只要是函数嵌套函数，并且子函数引用了父函数的变量，（不论子函数有没有被调用，这个用一种方法证明：在子函数内部打断点，在f12中观察闭包里的内容，已经出现了引用函数，这时候调用还没有被执行）这个时候闭包已经形成了。
闭包的本质：就是形成了作用域链。
注意：形成闭包的条件：1、函数要嵌套;2、子函数要引用父函数的变量（如果没有引用，则不会形成闭包，如果是引用父函数的父函数的变量也会形成闭包）;
父函数每调用一次，就会形成一个新的闭包（函数每调用一次，就 会复制一份），也就是说形成一个新的词法作用域，重新引用父函数的变量;
以下代码说明：

　　

function fn() {
  var num = 1;
  return function() {
    num++;
    alert(num);
  }
}
var result1 = fn();
result1();//2;
result1();//3;
var result2 = fn();
result2();//2;
result2();//3;

在fn被调用两次时，都形成了新的闭包，有各自新的词法作用域，所以result2的输出结果不受result1的影响;
函数每调用一次，都会复制一份新的，可以说明for循环里i的问题;

for (var i = 0; i < 5; i++) {
  (function(index){
    oDiv.onclick = function() {
      alert(index)
    }
  })(i)
}

自执行函数每调用一次都会复制一份新的，传进的i值也在变化，由于在函数静态作用域里，在预解析阶段已经确定了变量的作用域，所以子函数引用的父函数变量index只能是每次复制的那个父函数变量，所以就实现了我们想要取不同的i值的目的;

闭包的用途：

1、匿名自执行函数

不污染全局变量，（否则被声明为全局变量的话别的函数可能误用这些变量;造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。提高效率;
2、结果缓存：

我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间利用闭包，它不会释放外部的引用，从而函数内部的值可以得以保留。这样我们在第二次调用的时候，就会从缓存中读取到该资源。

3、实现封装;

4、实现类和继承（构造函数）;

闭包练习题：

var name = "The Window";
 2 var object = {
 3   name: "My Object",
 4   getNameFunc: function () {
 5     return function () {
 6       return this.name;
 7     };
 8   }
 9 };
10 
11 console.log(object.getNameFunc()())//object.getNameFunc()得到一个函数fn(),且fn()函数里面没有引用外部函数的变量，则没有形成闭包，所以相当于window.fn(),所以最终fn里面的this指向window，最终输出‘the window’

var name = "The Window";　　
var object = {　　　　
  name: "My Object",
  getNameFunc: function () {
    var that = this;
    return function () {
      return that.name;
    };
  }
};
console.log(object.getNameFunc()())//object.getNameFunc()得到一个函数fn(),这个fn里面引用了外部的that变量，形成了闭包，且这个that保存的是object,所以再次执行fn()函数的时候 会读取闭包里面的数据，最终输出'my object'