js闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。具体怎么理解呢，各位看官请仔细看好下文

我们来看看闭包的用途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。

1、匿名自执行函数

我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，
比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。
除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，
比如UI的初始化，那么我们可以使用闭包：

代码如下:

var datamodel = {   
    table : [],   
    tree : {}   
};   
    
(function(dm){   
    for(var i = 0; i < dm.table.rows; i++){   
       var row = dm.table.rows[i];   
       for(var j = 0; j < row.cells; i++){   
           drawCell(i, j);   
       }   
    }   
      
    //build dm.tree     
})(datamodel);  

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，
因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

2、缓存

再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，
那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，
然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，
从而函数内部的值可以得以保留。

代码如下:

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("input1");   

这样，当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，
我们就可以从缓存中取道该对象，而不用再去创建一个新的searchbox对象。

3 、实现封装

可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：

复制代码 代码如下:

var person = function(){   
    //变量作用域为函数内部，外部无法访问   
    var name = "default";      
      
    return {   
       getName : function(){   
           return name;   
       },   
       setName : function(newName){   
           name = newName;   
       }   
    }   
}();   
    
print(person.name);//直接访问，结果为undefined   
print(person.getName());   
person.setName("abruzzi");   
print(person.getName());   

得到结果如下： 
  
undefined 
default 
abruzzi 
 
4、 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，
这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包，
我们可以模拟出这样的机制。还是以上边的例子来讲：

复制代码 代码如下:

function Person(){   
    var name = "default";      
      
    return {   
       getName : function(){   
           return name;   
       },   
       setName : function(newName){   
           name = newName;   
       }   
    }   
};   
    
    
var john = Person();   
print(john.getName());   
john.setName("john");   
print(john.getName());   
    
var jack = Person();   
print(jack.getName());   
jack.setName("jack");   
print(jack.getName());   

运行结果如下： 
  
default 
john 
default 
jack 
由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。

转载于:https://www.cnblogs.com/qingqinglanlan/p/7365476.html

详解之-js闭包的用途相关推荐

  1. php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动

    本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...

  2. layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法

    详解Vue.js和layui日期控件冲突问题解决办法 发布于 2020-8-10| 复制链接 摘记: 事故还原: 今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果 ...

  3. vue 加载页面时触发时间_详解Vue.js在页面加载时执行某个方法

    详解Vue.js在页面加载时执行某个方法 jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 ...

  4. vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传

    详解Vue.js调用手机相机和相册以及上传 发布于 2020-7-7| 复制链接 摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...

  5. js定义全局变量 vue页面_详解Vue.js 定义全局变量的几种实现方式

    详解Vue.js 定义全局变量的几种实现方式 发布于 2020-8-11| 复制链接 本篇文章主要介绍了VUE 全局变量的几种实现方式,小妖觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小妖 ...

  6. php中 继承中的概念,JavaScript_JavaScript中的继承方式详解，js继承的概念 js里常用的如下 - phpStudy...

    JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...

  7. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变量: ...

  8. 大咖说*图书分享-Node布道师狼叔｜三卷书详解Node.js

    狼书系列图书以Node.js为主,讲解了Node.js的基础知识.开发调试方法.源码原理和应用场景等内容,旨在向读者展示如何通过新的Node.js和npm编写出更具前端特色.更具工程化优势的代码. 嘉 ...

  9. php setcookie 参数1,setcookie各个参数详解__Vue.js

    setcookie各个参数详解 定义和用法 setcookie() 函数向客户端发送一个 HTTP cookie. cookie 是由服务器发送到浏览器的变量.cookie 通常是服务器嵌入到用户计算 ...

最新文章

  1. WPF DataGridRow Event
  2. kvm之三：本地安装虚拟机
  3. Android中从assets资源中读取图片文件并保存到内部存储器并加载显示在ImageView中
  4. .Net 零星小知识
  5. 没找到rpm命令_Mysql的命令总结和PyMysql
  6. Linux彻底删除mysql
  7. 打乱 数字_“142857”金字塔中的神秘数字，其中隐藏什么秘密？
  8. lisp 计算三点的夹角_计算三点所形成的夹角的三种方法
  9. 使用x64编译fastdb报错
  10. JS细胞分裂递归案例
  11. python全栈工程师知识框架_全栈工程师的知识结构
  12. 常用矩阵向量求导公式
  13. NB-IoT对接电信物联网开放平台
  14. Unity3D 实现本地排行榜功能
  15. 第3章 最简单的C程序设计——顺序程序设计
  16. 单片机/树莓派扩展双串口（TTL和RS485）
  17. 人生观，世界观，价值观树立的方式
  18. 集成seata到springboot，cloud项目，找不到事务分组
  19. 利用不蒜子统计网站的访问量
  20. PHP报错：Classes\\PHPExcel\\Cell.php Line(594) Invalid cell coordinate ESIGN1

热门文章

  1. github 改善网速
  2. 【马哥教育视频】cacti入门及进阶[已更新至第四段]
  3. linux中线程的问题,linux中的线程问题
  4. ELasticSearch安装使用过程中遇到的坑的解决方案，以及使用Kibana操作ELasticSearch
  5. 单片机加减法计算器_单片机简易加法计算器程序
  6. base64解码_一份简明的 Base64 原理解析
  7. wireguard握手报文结构
  8. sudo apt-get install lsb-core
  9. 根据某一个字段查询但不是主键 sql该怎么写_为什么我使用了索引，查询还是慢？...
  10. java static int count,static int bitCount(long i)