JavaScript之闭包

时间: 2020-05-01阅读: 327标签: 闭包

闭包(closure)是掌握JavaScript从人门到深入一个非常重要的门槛,它是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面写下我的学习笔记~


    闭包-无处不在

    前端编程中,使用闭包是非常常见的,我们经常有意无意,直接或间接用到了闭包。闭包可以使传递数据更加灵活(比如处理一些点击事件)

    !function() {      
      var localData = "localData here";    
         document.addEventListener('click',    //处理点击事件时用到了外部局部变量,比如这里的localData       
            function(){              
               console.log(localData); 
        }); 
    }();

    又比如下面这个例子:(是不是很亲切~~)

    !function() {      
      var localData = "localData here";      
      var url = "http://www.baidu.com/";      
      $.ajax({ 
         url : url,          
         success : function() {              
            // do sth...              
            console.log(localData); 
            } 
        }); 
    }();

    再来看一个例子~~这种情况就是我们通常所说的闭包

    function outer() {   
      var localVal = 30;    
      return function(){      
        return localVal;    
      } 
    } 
    var func = outer();  
    func(); // 30

    这个例子中调用outer()返回匿名函数function(),这个匿名函数中可以访问outer()的局部变量localVal,在outer()调用结束后,再次调用func()的时候,仍然能访问到outer()的局部变量localVal


    闭包的概念

    闭包,不同于一般的函数,它允许一个函数在立即词法作用域外调用时,仍可访问非本地变量。 –维基百科

    闭包就是能够读取其他函数内部变量的函数。 –阮一峰

    由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成”定义在一个函数内部的函数”。

    所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁


    闭包的用途

    闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

    function f1(){
        var n=999;
        nAdd=function(){n+=1}
        function f2(){
          alert(n);
        }
        return f2;
      }
      var result=f1();
      result(); // 999
      nAdd();
      result(); // 1000

    在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。

    为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

    这段代码中另一个值得注意的地方,就是”nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。


    闭包-封装

    (function() {   
       var _userId = 23492;   
       var _typeId = 'item';    
       var export = {}; 
    
       function converter(userId) {          
         return +userId; 
       } 
        export.getUserId = function() {         
           return converter(_userId);     
       } 
       export.getTypeId = function() {          
          return _typeId; 
       }         
       window.export = export;   //通过此方式输出
    }());
    
      export.getUserId(); // 23492 
      export.getTypeId();  // item 
      export._userId;    // undefined  
      export._typeId;    // undefined       
      export.converter; // undefined

    利用闭包的特性能让我们封装一些复杂的函数逻辑,在这个例子中调用export上的方法(getUserId,getTypeId)间接访问函数里私有变量,但是直接调用export._userId是没法拿到_userId的。这也是Node里面常用到特性吧~


    常见错误之循环闭包

    下面这个案例,我们添加3个div,值分别为aaa,bbb,ccc,我们想实现的是点击aaa输出1,点击bbb输出2,点击ccc输出3

    document.body.innerhtml = "<div id=div1>aaa</div>" + "<div id=div2>bbb</div><div id=div3>ccc</div>";  
    for (var i = 1; i < 4; i++) {      
      document.getElementById('div' + i).         
        addEventListener('click', function() {         
        alert(i); // all are 4! 
        });  
    }

    结果点击aaa,bbb还是ccc都是alert(4)~~

    产生这样的问题在于这个i的值在初始化完成的时候就已经是4了

    要达到我们想要的点击aaa输出1,点击bbb输出2,点击ccc输出3,要用到闭包的技巧,在每次循环的时候,用立即执行的匿名函数把它包装起来,这样子做的话,每次alert(i)的值就取自闭包环境中的i,这个i来自每次循环的赋值i就能输出1,2,3了

    document.body.innerhtml = "<div id=div1>aaa</div>" + "<div id=div2>bbb</div>" + "<div id=div3>ccc</div>";  
    for (var i = 1; i < 4; i++) {
      !function(i){ //②再用这个参数i,到getElementById()中引用     
        document.getElementById('div' + i).       
          addEventListener('click', function() {         
          alert(i); // 1,2,3
         });  
      }(i);  //①把遍历的1,2,3的值传到匿名函数里面
    }


    思考题

    如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。(来自阮老师)这题目总结得真秒~~

    代码片段一

    var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          return function(){
            return this.name;
          };
        }
      };
      alert(object.getNameFunc()());

    代码片段二

    var name = "The Window";
      var object = {
        name : "My Object",
        getNameFunc : function(){
          var that = this;
          return function(){
            return that.name;
          };
        }
      };
      alert(object.getNameFunc()());
    站长推荐

    1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

    2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

    链接: http://www.fly63.com/article/detial/8928

    关闭

    搞懂JS闭包

    闭包(Closure)是JS比较难懂的一个东西,或者说别人说的难以理解, 本文将以简洁的语言+面试题来深入浅出地介绍一下。在将闭包之前,需要先讲一下作用域。JS中有全局作用域和局部作用域两种。

    带你一分钟理解 JavaScript 闭包

    闭包就是一个函数引用另外一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私有变量。这是优点也是缺点,不必要的闭包只会徒增内存消耗!另外使用闭包也要注意变量的值是否符合你的要求

    前端开发闭包理解,JavaScript-闭包

    闭包(closure)是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠...

    JavaScript 闭包详解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量

    如何才能通俗易懂的解释js里面的‘闭包’?

    即变量都存在在指定的作用域中,如果在当前作用中找不到想要的变量,则通过作用域链向在父作用域中继续查找,直到找到第一个同名的变量为止(或找不到,抛出 ReferenceError 错误)。这是 js 中作用域链的概念

    JS闭包的应用(私有变量、珂理化、偏函数)

    柯里化是把接受 n 个参数的 1 个函数改造为只接受 1个参数的 n 个互相嵌套的函数的过程。也就是fn(a, b, c)会变成fn(a)(b)(c)。偏函数和珂理化的区别是,不再强调单函数。例如1个入参返回2个入参函数。

    JavaScript必须掌握的基础 --- 闭包

    闭包是一个让初级JavaScript使用者既熟悉又陌生的一个概念。因为闭包在我们书写JavaScript代码时,随处可见,但是我们又不知道哪里用了闭包。

    JavaScript 闭包的底层运行机制

    我研究JavaScript闭包(closure)已经有一段时间了。我之前只是学会了如何使用它们,而没有透彻地了解它们具体是如何运作的。那么,究竟什么是闭包?Wikipedia给出的解释并没有太大的帮助。闭包是什么时候被创建的,什么时候被销毁的?具体的实现又是怎么样的?

    JavaScript 作用域、命名空间及闭包

    变量作用域:一个变量的作用域是程序源代码中定义这个变量的区域,在函数内声明的变量是局部变量,它只在该函数及其嵌套作用域里可见(js 函数可嵌套定义);

    Js中的闭包与高级函数

    在JavaScript中,函数是一等公民。JavaScript是一门面向对象的编程语言,但是同时也有很多函数式编程的特性,如Lambda表达式,闭包,高阶函数等,函数式编程时一种编程范式。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!