js-闭包

1.概念

　　闭包函数：声明在一个函数中的函数，叫做闭包函数。

　　闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其他外部函数被返回（函数结束）了之后。

2.特点

　　让外部访问函数内部变量成为可能；

　　局部变量会常驻在内存中；

　　可以避免使用全局变量，防止全局变量污染；

　　会造成内存泄漏（有一块内存空间被长期占用，而不释放）

3.闭包创建

　　闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动的对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。

　　闭包内存泄漏为： key = value, key被删除了value常驻内存中；局部变量闭包升级版（中间引用的变量）=> 自由变量；

4.结论

　　闭包找到的是同一地址中父级函数中对应变量最终的值；　　

5.闭包应用场景

/* 例子1 */　　

function funA() {
  var a = 10;  //funA的活动对象之中；
  return function(){  //匿名函数的活动对象；
      alert(a);
  } 
}
var b = funA()
b();  // 10;

/* 例子2 */

function outerFn() {
  var i = 0;
  function innerFn() {
    i++;
    console.log(i)
  } 
  return innerFn;  
}

var inner = outerFn();  // 每次外部函数执行的时候，都会开辟一块内存空间，外部函数的地址不同，都会重新创建一个新的地址
inner()
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2(); // 1 2 3 1 2 3

/* 例子3 */

var i = 0;
function outerFn() {
  function innerFn() {
      i++;
      console.log(i);
  }
  return innerFn;
}

var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();  // 1 2 3 4

/* 例子4 */

function fn() {
    var a = 3;
    return function() {
      return ++a;
    }  
}

alert(fn()()); // 4
alert(fn()()); // 4

/* 例子5 */

function outerFn() {
  var i = 0;
  function innerFn(){
    i++;
    console.log(i)
  }
  return innerFn;
}

var inner1 = outerFn();
var inner2 = outerFn();

inner1();
inner2();
inner1();
inner2();  // 1 1 2 2

/* 例子6 */

(function() {
  var m = 0;
  function getM() { return m; }
  function seta(val) { m = val; }
  window.g = getM;
  window.f = seta;
})();
f(100);
console.info(g());  // 100 闭包找到的是同一地址中父级函数中应变量最终的值

/* 例子7 */

function a() {
  var i = 0;
  function b() { alert(++i); }
  return b;
}

var c = a();
c();  // 1
c();  // 2

/* 例子8 */

function f() {
  var count = 0;
  return function() {
    count++;
    console.info(count);
  }
}

var t1 = f();
t1();   // 1
t1();   // 2
t1();   // 3

/* 例子9 */

var add = function(x) {
  var sum = 1;
  var tmp = function(x) {
    sum = sum + x;
    return tmp;
  }
  tmp.toString = function() {
    return tmp;
  }
  return tmp;
}
alert(add(1)(2)(3));   // 6

/* 例子10 */

var lis = document.getElementsByTagName('li');
for (var i =0; i<lis.length; i++){
  (function(i) {
    lis[i].onclick = function() {
      console.log(i);
    }
  })(i)    // 事件处理函数中闭包的写法
}

/* 例子11 */

function m1(){
  var x = 1;
  return function(){
    console.log(++x);
  }
}

m1()();  // 2
m1()();  // 2
m1()();  // 2

var m2 = m1();
m2();  // 2
m2();  // 3
m2();  // 4 

/* 例子12 */

var fn = (function(){
    var i =10;
    function fn(){
      console.log(++i);
    }
    return fn;
})()
fn();  // 11
fn();  // 12

/* 例子13 */

function love1() {
   var num = 223;
   var me1 = function() {
     console.log(num);
   }
   num++;
   return me1;
}
var loveme1 = love1();
loveme1();  // 输出224

/* 例子14 */

function fun(n, o) {
    console.log(o);
    return {
       fun: function(m) {
           return fun(m, n);
       }
    };
}

var a = fun(0);  // undefined
a.fun(1);   // 0
a.fun(2);  // 0
a.fun(3);  // 0

var b = fun(0).fun(1).fun(2).fun(3);  // undefined  0  1  2
var c = fun(0).fun(1);
c.fun(2);
c.fun(3);  // undefined  0 1 1

/* 例子15 */

function fn() {
    var arr = [];
    for(var i = 0; i < 5; i++) {
      arr[i] = function (){
        return i;
      }  
    }
    return arr;
}
var list = fn();
for (var i = 0 ; len = list.length; i < len; i++) {
  console.log(list[i]());
} //  5 5 5 5 5

/* 例子16 */

function fn(){
  var arr = [];
  for(var i = 0; i < 5; i++) {
    arr[i] = (function(i) {
      return function () {
        return i;
      }
    })(i)
  }
  return arr;
}
var list = fn();
for(var i = 0; i< list.length; i++) {
    console.log(list[i]());
} // 0 1 2 3 4