• js闭包的理解


    本文来源:MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

      闭包:最开始的解释就是说函数套函数,嵌套(内部)函数对其容器(外部)函数是私有的。它自身就形成了一个闭包。

    function makeFunc() {
        var name = "Mozilla";
        function displayName() {
            alert(name);
        }
        return displayName;
    }
    
    var myFunc = makeFunc();
    myFunc();

      makeFunc() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 makeFunc() 里的内部函数,仅在该函数体内可被获取;重点:闭包可以让你从内部函数访问外部函数作用域,所以说makeFunc()就是一个闭包。

         在例子中,myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用(因为makeFunc() return displayName),而 displayName 实例仍可访问其词法作用域(makeFunc函数的作用域--根据声明变量的位置来确定该变量可被访问的位置 )中的变量,即可以访问到 name 。由此,当 myFunc 被调用时,name 仍可被访问,其值 Mozilla 就被传递到alert中。

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

      我们定义了 makeAdder(x) 函数,它接受一个参数 x ,并返回一个新的函数。返回的函数接受一个参数 y,并返回x+y的值

    用闭包模拟私有方法  (如何使用闭包来定义公共函数,并令其可以访问私有函数和变量)

    var makeCounter = function() {
      var privateCounter = 0;
      function changeBy(val) {
        privateCounter += val;
      }
      return {
        increment: function() {
          changeBy(1);
        },
        decrement: function() {
          changeBy(-1);
        },
        value: function() {
          return privateCounter;
        }
      }  
    };
    
    var Counter1 = makeCounter();
    var Counter2 = makeCounter();
    console.log(Counter1.value()); /* logs 0 */
    Counter1.increment();
    Counter1.increment();
    console.log(Counter1.value()); /* logs 2 */
    Counter1.decrement();
    console.log(Counter1.value()); /* logs 1 */
    console.log(Counter2.value()); /* logs 0 */

      利用闭包实现新添加的属性(方法)--封装新的方法,每调用一个函数,都会有属于自己的环境,各自互不干扰。

      每个闭包都是引用自己词法作用域内的变量 privateCounter 。每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。 

    加一道闭包笔试题,每次执行打印的是多少?

    function fun(n,o){
        console.log(o);
        return{
            fun:function(m){
                return fun(m,n);
            }
        }
    }
    
    var a = fun(0);
    a.fun(1);
    a.fun(2);
    a.fun(3);
    
    var b = fun(0).fun(1).fun(2).fun(3);
    
    var c = fun(0).fun(1);
    
    c.fun(2);
    c.fun(3);
    

      

    -------------------------------答案-------------------------------------
    a    //undefined 0 0 0
    b    //undefined 0 1 2
    c    //undefined 0 1 1

  • 相关阅读:
    【Android】4.1 UI设计器
    【Android】4.0 Android项目的基本结构
    【Android】3.25 示例25--调启百度地图
    【Android】3.24 示例24--OpenGL绘制功能
    【Android】3.23 示例23--瓦片图功能
    【Android】3.22 示例22--LBS云检索功能
    【Android】3.21 示例21—兴趣点收藏功能
    【Android】3.20 示例20—全景图完整示例
    【Android】3.19 示例19--全景图HelloWorld
    Java并发编程之happens-before
  • 原文地址:https://www.cnblogs.com/jiayeyuan/p/11719057.html
Copyright © 2020-2023  润新知