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

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

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

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

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

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

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

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

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

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

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

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

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

    ————————————————
    版权声明:本文为CSDN博主「羊二哥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_43586120/article/details/89456183

  • 相关阅读:
    B2B商城网站前端开发
    Scss开发临时学习过程||webpack、npm、gulp配置
    移动开发注意几点
    拥有的50个CSS代码片段(上)
    css3基础、(弹性、响应式)布局注意点
    js封装、简单实例源码记录
    ES8
    es7与es8
    Iterator
    Math,Number
  • 原文地址:https://www.cnblogs.com/gongxianjin/p/15744951.html
Copyright © 2011-2022 走看看