JavaScript 函数闭包(colsure)

理解闭包,你首先必须理解JS的变量作用域,JavaScript作用域和作用域链

ES6之前,变量的作用域分为全局作用域和局部作用域。一方面函数内部可以直接读取全局变量,另一方面,在函数外部自然无法读取函数内的局部变量。

1.那么问题来了,我们该如何从外部读取局部变量?

我们知道,函数内部的函数是可以访问父函数的变量。

function patty(){
   var sum=666;
   function pattySon(){ 
     alert(sum);
   }
}

在上面的代码中,函数pattySon被包括在函数patty内部,这时patty内部的所有局部变量,对pattySon都是可见的。但是反过来就则不成立。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然pattySon可以访问patty的内部变量,那我们只要返回pattySon,就可以从外部访问patty中的局部变量了。

function patty(){
   var sum=666;
   function pattySon(){ 
     alert(sum);
    }
   return pattySon;
}

var res=patty();
res();    //666

2.闭包是什么

简而言之,闭包就是一个访问父函数局部变量的函数。
比如,将父函数的(内部)函数或者变量指定给一个全局变量、或者一个全局性对象的属性。或者直接返回这个内部函数。


3.闭包的用途

闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,变量的值始终保持在内存,另一个就是避免使用使用全局变量,全局变量在复杂程序中会造成许多麻烦(比如命名冲突,垃圾回收等)

事实上,通过使用闭包,我们可以做很多事情:
(1)结果缓存
设想我们有一个处理过程很耗时的函数对象,那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。
闭包正可以做到这一点,因为它不会释放外部的引用,从而函数内部的值可以得以保留。单例模式也是利用了闭包的原理

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
     
CachedSearchBox.attachSearchBox("input");

(2)封装源码

(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间接访问立即执行函数里面的变量。这也是Node里面常用到特性吧~
又比如各种js库用来封装源码。以jQuery为例

function (window, undefined){
    //创建jQeury对象
        var jQuery = function(selector, context){
            return new jQuery.fn.init(selector, context);
        }

        jQuery.fn = jQuery.prototype = {
            //原型上的方法,即所有jQuery对象都可以共享的方法和属性
            init:function(selector, context){
           }
        }

        jQuery.fn.init.prototype = jQuery.fn;
        window.jQeury = window.$ = jQuery;
    }();
})(window);

(3)实现类(模拟私有变量)和继承

//实现类
function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    };   

    var p = new Person();
    p.setName("Tom");
    alert(p.getName());

   //继承
    var Tom= function(){};
    //继承自Person
    Tom.prototype = new Person();
    //添加私有方法
    Tom.prototype.Say = function(){
        alert("Hello,my name is Tom");
    };
    var a = new Tom();
    Tom.setName("Tom");
   Tom.Say();
    alert(Tom.getName());

我们定义了Person,它就像一个类,我们new一个Person对象,访问它的方法。下面我们定义了Tom,继承Person,并添加自己的方法。


4.使用闭包的注意点

(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是:
fn=null //应及时解除引用,否则会占用更多存。
(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。


5.解决闭包时造成的问题的利器——匿名自执行函数

立即执行函数表达式(Immediately-Invoked Function Expression), 还有其他的名字:自执行匿名函数(self-executing anonymous function)。 接触到这个IIFE,最早就是为了解决闭包时造成的问题。

  • 解决闭包中的循环问题
    一个常见的错误出现在循环中使用闭包,假设我们需要每隔1s输出循环中调用循环序号
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000*i);
}

上面的代码不会输出数字 0 到 9,而是会每隔1s输出数字 10 十次。当 console.log 被调用的时候,此时 for循环已经结束, i 的值被修改成了 10。这个时候再执行 setTimeout 的五个回调函数,里面的 console.log(i); 的 i 去向上找作用域,只能找到 window下 的 i,即 10。所以输出都是 10。
为了正确的获得循环序号,我们需要人为给 console.log(i); 创造作用域。

(1)使用自执行匿名函数。
for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, e*1000);
    })(i);
}
(2)使用bind
for(var i=0;i<7;i++){
  setTimeout(function(i){console.log(i)}.bind(null,i),i*1000)
}
(3)当然我们有更简洁的方式,使用ES6的let关键字
for (let i = 0; i < 10; i++) {   //let 代替 var
  setTimeout(function (){
    console.log(i); 
   },i*1000); 
}

let 为代码块的作用域,所以每一次 for 循环,console.log(i); 都引用到 for 代码块作用域下的i,因为这样被引用,所以 for 循环结束后,这些作用域在 setTimeout 未执行前都不会被释放。

如果不懂,看这里http://es6.ruanyifeng.com/#docs/let#

IIFE的其他用处
  • 避免全局变量污染
    我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处。
    比如:别的函数可能误用这些变量;造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的)。

假设我需要把当前事件以 "2017/1/1 0:10:24" 的形式赋给某个变量,而且又只需要做一次,那么立即只执行函数绝对是你首选。

var currentTimr=(function(){
   var time=new Date();
   var year=time.getFullYear();
   var month=time.getMonth();
   var date=time.getDtate();
   var hour=time.getHours();
   var min=time.getMinutes();
   var sec=time.getSeconds();
   return year+'/'+month+'/'+date+'  '+hour+':'+min+':'+sec;
})()

同样可以防止包冲突

a.js
var num=1;
b.js
var num=2;
如果在页面中同时引用a.js和lb.js两个库,必然导致num变量被覆盖

a.js

   (function(){
       var num=1;
       //code...
   })();

b.js

(function(){
   var num=2; 
  //code...
 })();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容

  • 作用域和闭包是 JavaScript 最重要的概念之一,想要进一步学习 JavaScript,就必须理解 Java...
    劼哥stone阅读 1,174评论 1 13
  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zouCode阅读 1,271评论 0 13
  • ● 闭包基础 ● 闭包作用 ● 闭包经典例子 ● 闭包应用 ● 闭包缺点 ● 参考资料 1、闭包基础 作用域和作...
    lzyuan阅读 929评论 0 0
  • 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。 一、变量...
    zock阅读 1,075评论 2 6
  • 不跑马的日子你损失了什么?当你因为伤病,没法完成训练计划的时候,你选择怎样去做? 你是咬牙坚持完成训练量?还是减少...
    宁静火山阅读 574评论 0 2