闭包和垃圾回收机制

闭包就是有权限访问 其他函数作用域的局部变量的 一个函数

在JS中，变量的作用域属于函数作用域，在函数执行后作用域就会被清理、内存也随之被收回，但是由于闭包时建立在一个函数内部的子函数，由于其可访问上级作用域的原因，即使上级函数执行完，作用域也不会随之销毁，这时的子函数---也就是闭包，便拥有了访问上级作用域中的变量的权限，即使上级函数执行完后，作用域内的值也不会被销毁。

function a(){
  var i=0;
  function b(){
      alert(++i);
  }
  return b;
}
var c=a();
c();  // 1
c();  // 2
c();  // 3

这段代码有两个特点：

1、函数b嵌套在函数a内部；

2、函数a返回函数b。

这样在执行完var c=a( )后，变量c实际上是指向了函数b，再执行c( )后就会弹出一个窗口显示i的值（第一次为1）。

这段代码其实就创建了一个闭包，这是因为函数a外的变量c引用了函数a内的函数b。

也就是说，当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

 

【对比】：

function fn3(){
    var a = 10;
    return function(){
        a--;
        console.log(a);
    }
}
fn3()();//9
fn3()();//9

当fn3()()第一次执行完后，整个fn3()被销毁，第二次fn3()相当于重新开辟了一块新的空间，所以第二次fn3()()和第一次打印的结果无关。

function fn3(){
    var a = 10;
    return function(){
        a--;
        console.log(a);
    }
}

var val = fn3();
val(); //9
val(); //8 

外部的函数连续调用了内部的两次，当fn3第一次执行完后，val=9并没有被销毁，第二次是在第一次基础之上的

 val指向的对象会永远存在堆内存中,即使是fn3已经执行完毕

 val = null;   //如果val不再使用，将其指向的对象释放

 

function Person(){
    var a = 10;
    return {
        age:function(){
            a += 1;
            console.log(a);
        }
    }
}
var result = Person();
result.age();  // 11
result.age();  // 12

 

通常， 函数的作用域及其所有变量都会在函数执行结束后被销毁。

但是， 在创建了一个闭包以后， 这个函数的作用域就会一直保存到闭包不存在为止。

    function add(x) {
        return function(y) {
            return x + y
        }
    }
    var add5 = add(5);
    var add10 = add(10);
    console.log(add5(2));
    console.log(add10(2));

相当于在上一次的基础上继续加2，因为上一次结果被存在了内存当中，没有被释放

 

释放对闭包的引用

    add5 = null;

    add10 = null;

从上述代码可以看到add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的环境。

在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。最后通过 null 释放了 add5 和 add10 对闭包的引用。

 

闭包解决了什么

阮一峰在他的博客中写到：在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

 

务实一点的说法应该是下面这样：

由于闭包可以缓存上级作用域，那么就使得函数外部打破了“函数作用域”的束缚，可以访问函数内部的变量。
以平时使用的 AJAX 成功回调为例，这里其实就是个闭包，由于上述的特性，回调就拥有了整个上级作用域的访问和操作能力，提高了极大的便利。开发者不用去学钩子函数来操作上级函数作用域内部的变量了

 

闭包最大的用处： 1） 一个是可以读取函数内部的变量；

                              2） 另一个就是让这些变量的值始终保存在内存中。

 

 

闭包的应用场景

闭包随处可见，一个 Ajax 请求的成功回调，一个事件绑定的回调方法，一个 setTimeout 的延时回调，或者一个函数内部返回另一个匿名函数，这些都是闭包。
简而言之，无论使用何种方式对函数类型的值进行传递，当函数在别处被调用时，都有闭包的身影

垃圾回收机制

 

如果一个对象不再被引用， 那么这个对象就会被垃圾回收机制回收；
如果两个对象互相引用， 且不再被第3者所引用， 那么这两个互相引用的对象也会被回收。
（在闭包中，父函数被子函数引用，子函数又被外部的一个变量引用，这就是父函数不被回收的原因）

 

我们知道，程序的运行需要内存，如果一个程序持续不断地运行，而内存没有及时释放的话，那么它的内存占用会iu越来越高，轻则影响系统性能，重则导致进程崩溃。

如果不再用到的内存，没有及时释放，我们就称之为内存泄漏。显然，这对于我们程序员来讲简直是个噩梦。

所以，大多数语言都有它自身的垃圾回收机制，这样的好处是自动帮我们清理不必要的内存占用，但是我们的可控性却比较差，而C语言就无法自动清理垃圾，但它的可控性较强。

在javascript中，我们的垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存，以此来解决内存泄漏的问题。 现在各大浏览器通常采用的垃圾回收机制有两种方法：标记清除，引用计数。js中最常用的垃圾回收方式就是标记清除。

 

1.标记清除

        在一个函数中声明一个变量，就将这个变量标记为"进入环境"，从逻辑上讲，永远不能释放进入环境变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。而当变量离开环境时，则将其标记为"离开环境"。

function foo(){
    var name = 'edward';    //被标记"进入环境"
    var age = "25";         //被标记"进入环境"
}
foo();    //执行完毕后之后，name和age又被标记"离开环境"，被回收

垃圾回收机制在运行的时候会给存储在内存中的所有变量都加上标记（可以是任何标记方式），然后，它会去掉处在环境中的变量及被环境中的变量引用的变量标记（闭包）。而在此之后剩下的带有标记的变量被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收机制到下一个周期运行时，将释放这些变量的内存，回收它们所占用的空间。

 

2.引用计数

        语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

const arr = [1,2,3,4];
console.log("welcome to my blog");

上面的代码中，数组[1,2,3,4]是一个值，会占用内存。变量arr是仅有的对这个值的引用，因此引用次数为1。尽管后面的代码没有用到arr，它是会持续占用内存。

如果增加一行代码，解除arr对[1,2,3,4]引用，这块内存就可以被垃圾回收机制释放了。

const arr = [1,2,3,4];
console.log("welcome to my blog");
arr = null;

因此，并不是说有了垃圾回收机制，程序员就轻松了。你还是需要关注内存占用：那些很占空间的值，一旦不再用到，你必须检查是否还存在对它们的引用。如果是的话，就必须手动解除引用。

【思考】：

什么情况会引起内存泄漏？
虽然有垃圾回收机制但是我们编写代码操作不当还是会造成内存泄漏。

1.    意外的全局变量引起的内存泄漏。

原因：全局变量，不会被回收。

解决：使用严格模式避免。

2.    闭包引起的内存泄漏

原因：闭包可以维持函数内局部变量，使其得不到释放。

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3.    没有清理的DOM元素引用

原因：虽然别的地方删除了，但是对象中还存在对dom的引用

解决：手动删除。

4.    被遗忘的定时器或者回调

原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

解决：手动删除定时器和dom。

5.    子元素存在引用引起的内存泄漏

原因：div中的ul li  得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。

解决：手动删除清空。

 

什么放在内存中？什么不放在内存中？
基本类型是：Undefined/Null/Boolean/Number/String

基本类型的值存在内存中，被保存在栈内存中。从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本。

引用类型：object

引用类型的值是对象，保存在堆内存中。

1.    包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。

2.    js不允许直接访问内存中的位置，也就是不能直接访问操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。

 

栈和堆的区别
　　一、堆栈空间分配区别：
　　1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
　　2、堆（操作系统）： 一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收，分配方式倒是类似于链表。
　　二、堆栈缓存方式区别：
　　1、栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放；
　　2、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。
　　三、堆栈数据结构区别：
　　堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
　　栈（数据结构）：一种先进后出的数据结构。

【小练习】：请说出下列的打印结果

1. 

    function foo() {
        var a = 1

        function fn() {
            a++;
            console.log(a)

        }
        return fn()
    }
    
    console.log(foo);
    foo();
    foo();

2.

    function fn1() {
        var a = 1;
        var b = 2;

        function fn() {
            a++;
            console.log(a)
        }
        return fn;

    }

    var x = fn1();
    x();
    x();
    var x = fn1();
    x();