zoukankan      html  css  js  c++  java
  • 闭包,看这一篇就够了——带你看透闭包的本质,百发百中

    原文链接:点我

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

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

    2、特点
      让外部访问函数内部变量成为可能;

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

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

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

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

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

    上面的都是什么鬼,是人话么,能看懂早就看懂了,生气······

    不过,答应我,看完例子再回看上面的概念,会理解的更!透!彻!

    ---------------------------------------------我是容易看懂的分界线-----------------------------------------------
    4、闭包的应用场景
    结论:闭包找到的是同一地址中父级函数中对应变量最终的值
    最终秘诀就这一句话,每个例子请自行带入这个结论!!!!!!!!!!!!!

    /* 例子1 */

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


    /* 例子2 */

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

    /* 例子3 */

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

    /* 例子4 */

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


    /* 例子5 */

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


    /* 例子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 闭包找到的是同一地址中父级函数中对应变量最终的值


    /* 例子7 */

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


    /* 例子8 */

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


    /* 例子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 sum;
     9 }
    10 return tmp;
    11 }
    12 alert(add(1)(2)(3)); //6


    /* 例子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 }
     9 /* 例子11 */
    10 
    11 function m1(){
    12 var x = 1;
    13 return function(){
    14 console.log(++x);
    15 }
    16 }
    17 
    18 m1()(); //2
    19 m1()(); //2
    20 m1()(); //2
    21 
    22 var m2 = m1();
    23 m2(); //2
    24 m2(); //3
    25 m2(); //4

    /* 例子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


    /* 例子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


    /* 例子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 var a = fun(0); //undefined
    10 a.fun(1); //0
    11 a.fun(2); //0
    12 a.fun(3); //0
    13 var b = fun(0).fun(1).fun(2).fun(3); //undefined 0 1 2
    14 var c = fun(0).fun(1);
    15 c.fun(2);
    16 c.fun(3); //undefined 0 1 1


    /* 例子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


    /* 例子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,len = list.length;i < len ; i ++){
    14 console.log(list[i]());
    15 } //0 1 2 3 4

    本文转载自大佬CSDN博客,刚一看就觉得很靠谱,不是死逮着理论分析那种;列举了各种栗子供大家琢磨到底什么是闭包,用到什么场景下,非常实用,所以转载了过来,广而传之,一起学习!

    作者:时来运转
    大佬们好,我是Web前端菜鸟,初来乍到,想跟诸位共同学习成长;
    综上是我每日闲时整理笔记,文章如有侵权请诸位及时告知我,谢谢关照!

  • 相关阅读:
    cocos2dx游戏开发——别踩白块学习笔记(二)——经典模式的实现
    cocos2dx游戏开发——别踩白块学习笔记(一)——Block类
    《数据结构与算法分析》学习笔记(三)——链表ADT
    《数据结构与算法分析》学习笔记(二)——算法分析
    cocos2dx游戏开发——微信打飞机学习笔记(三)——WelcomeScene的搭建
    cocos2dx游戏开发——微信打飞机学习笔记(二)——游戏框架
    cocos2dx游戏开发——微信打飞机学习笔记(一)——开发准备
    《数据结构与算法分析》学习笔记(一)——递归思想!
    好的博客mark
    [uart]理解线路规程的作用
  • 原文地址:https://www.cnblogs.com/myfate/p/14599194.html
Copyright © 2011-2022 走看看