• js-闭包


    1.概念

      闭包函数:声明在一个函数中的函数,叫做闭包函数。

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

    2.特点

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

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

      可以避免使用全局变量,防止全局变量污染;

      会造成内存泄漏(有一块内存空间被长期占用,而不释放)

    3.闭包创建

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

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

    4.结论

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

    5.闭包应用场景

    /* 例子1 */  

    1 function funA() {
    2   var a = 10;  //funA的活动对象之中;
    3   return function(){  //匿名函数的活动对象;
    4       alert(a);
    5   } 
    6 }
    7 var b = funA()
    8 b();  // 10;
    View Code

    /* 例子2 */

     1 function outerFn() {
     2   var i = 0;
     3   function innerFn() {
     4     i++;
     5     console.log(i)
     6   } 
     7   return innerFn;  
     8 }
     9 
    10 var inner = outerFn();  // 每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同,都会重新创建一个新的地址
    11 inner()
    12 inner();
    13 inner();
    14 var inner2 = outerFn();
    15 inner2();
    16 inner2();
    17 inner2(); // 1 2 3 1 2 3
    View Code

    /* 例子3 */

     1 var i = 0;
     2 function outerFn() {
     3   function innerFn() {
     4       i++;
     5       console.log(i);
     6   }
     7   return innerFn;
     8 }
     9 
    10 var inner1 = outerFn();
    11 var inner2 = outerFn();
    12 inner1();
    13 inner2();
    14 inner1();
    15 inner2();  // 1 2 3 4
    View Code

    /* 例子4 */

    1 function fn() {
    2     var a = 3;
    3     return function() {
    4       return ++a;
    5     }  
    6 }
    7 
    8 alert(fn()()); // 4
    9 alert(fn()()); // 4
    View Code

    /* 例子5 */

     1 function outerFn() {
     2   var i = 0;
     3   function innerFn(){
     4     i++;
     5     console.log(i)
     6   }
     7   return innerFn;
     8 }
     9 
    10 var inner1 = outerFn();
    11 var inner2 = outerFn();
    12 
    13 inner1();
    14 inner2();
    15 inner1();
    16 inner2();  // 1 1 2 2
    View Code

    /* 例子6 */

    1 (function() {
    2   var m = 0;
    3   function getM() { return m; }
    4   function seta(val) { m = val; }
    5   window.g = getM;
    6   window.f = seta;
    7 })();
    8 f(100);
    9 console.info(g());  // 100 闭包找到的是同一地址中父级函数中应变量最终的值
    View Code

    /* 例子7 */

    1 function a() {
    2   var i = 0;
    3   function b() { alert(++i); }
    4   return b;
    5 }
    6 
    7 var c = a();
    8 c();  // 1
    9 c();  // 2
    View Code

    /* 例子8 */

     1 function f() {
     2   var count = 0;
     3   return function() {
     4     count++;
     5     console.info(count);
     6   }
     7 }
     8 
     9 var t1 = f();
    10 t1();   // 1
    11 t1();   // 2
    12 t1();   // 3
    View Code

    /* 例子9 */

     1 var add = function(x) {
     2   var sum = 1;
     3   var tmp = function(x) {
     4     sum = sum + x;
     5     return tmp;
     6   }
     7   tmp.toString = function() {
     8     return tmp;
     9   }
    10   return tmp;
    11 }
    12 alert(add(1)(2)(3));   // 6
    View Code

    /* 例子10 */

    1 var lis = document.getElementsByTagName('li');
    2 for (var i =0; i<lis.length; i++){
    3   (function(i) {
    4     lis[i].onclick = function() {
    5       console.log(i);
    6     }
    7   })(i)    // 事件处理函数中闭包的写法
    8 }
    View Code

    /* 例子11 */

     1 function m1(){
     2   var x = 1;
     3   return function(){
     4     console.log(++x);
     5   }
     6 }
     7 
     8 m1()();  // 2
     9 m1()();  // 2
    10 m1()();  // 2
    11 
    12 var m2 = m1();
    13 m2();  // 2
    14 m2();  // 3
    15 m2();  // 4 
    View Code

    /* 例子12 */

    1 var fn = (function(){
    2     var i =10;
    3     function fn(){
    4       console.log(++i);
    5     }
    6     return fn;
    7 })()
    8 fn();  // 11
    9 fn();  // 12
    View Code

    /* 例子13 */

     1 function love1() {
     2    var num = 223;
     3    var me1 = function() {
     4      console.log(num);
     5    }
     6    num++;
     7    return me1;
     8 }
     9 var loveme1 = love1();
    10 loveme1();  // 输出224
    View Code

    /* 例子14 */

     1 function fun(n, o) {
     2     console.log(o);
     3     return {
     4        fun: function(m) {
     5            return fun(m, n);
     6        }
     7     };
     8 }
     9 
    10 var a = fun(0);  // undefined
    11 a.fun(1);   // 0
    12 a.fun(2);  // 0
    13 a.fun(3);  // 0
    14 
    15 var b = fun(0).fun(1).fun(2).fun(3);  // undefined  0  1  2
    16 var c = fun(0).fun(1);
    17 c.fun(2);
    18 c.fun(3);  // undefined  0 1 1
    View Code

    /* 例子15 */

     1 function fn() {
     2     var arr = [];
     3     for(var i = 0; i < 5; i++) {
     4       arr[i] = function (){
     5         return i;
     6       }  
     7     }
     8     return arr;
     9 }
    10 var list = fn();
    11 for (var i = 0 ; len = list.length; i < len; i++) {
    12   console.log(list[i]());
    13 } //  5 5 5 5 5
    View Code

    /* 例子16 */

     1 function fn(){
     2   var arr = [];
     3   for(var i = 0; i < 5; i++) {
     4     arr[i] = (function(i) {
     5       return function () {
     6         return i;
     7       }
     8     })(i)
     9   }
    10   return arr;
    11 }
    12 var list = fn();
    13 for(var i = 0; i< list.length; i++) {
    14     console.log(list[i]());
    15 } // 0 1 2 3 4
    View Code
  • 相关阅读:
    HDU 3555 Bomb (数位DP)
    ms sqlserver数据库主文件特别大怎么办
    w3wp.exe占用cpu特别高
    Excel的数据批量替换
    用Excel的分列功能格式化时间
    sql cte的使用
    数据结构
    http与浏览器学习
    长方形裁切优化与矩形物料排料
    架构知识
  • 原文地址:https://www.cnblogs.com/wei-dong/p/12929157.html
Copyright © 2020-2023  润新知