浅谈js闭包理解


Posted in Javascript onMarch 28, 2019

闭包是js中的一大特色,也是一大难点。简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量。

闭包的三大特点为:

1、函数嵌套函数

2、内部函数可以访问外部函数的变量

3、参数和变量不会被回收。

举例来说:

function test(){
  var a=1;
  return function(){
  alert(a);
  }
 }
 var try=test();
 try();//弹出a的值

这个例子中,变量a在test方法外部是无法访问的,但test方法里面,嵌套了一个匿名函数,通过return返回,test作用域中的变量a,可以在匿名函数中访问。并且当test方法执行后,变量a所占内存并不会释放,以达到嵌套的函数还可以访问的目的。

闭包的作用在于,可以通过闭包,设计私有变量及方法。

举例来说:在java中创建perosn类,含有私有变量name。

public class Person{
 private String name='wy';
 public Person(val){
  name=val;
 }
 public void setName(val){
  name=val;
 }
 public String getName(){
  return name;
 }
}

在js中实现类似java创建类的功能:

(function(){
   var name="wangyu";
   Person=function (val) {
    name=val;
   }
   Person.prototype.setName=function(val){
    name=val;
   }
   Person.prototype.getName=function () {
    return name;
   }
  })();
  var person1=new Person("sj");
  alert(this.name)//undefined 因为在function作用域外不能访问
  alert(person1.getName());//sj

在function里面的name,由于是在function作用域中,所以外部无法访问,但是可以通过创建person对象,调用person的方法,来达到修改和访问name值的目的,类似于java类中的私有变量,外部无法访问,只能通过类方法访问。

再看一个私有变量的例子:

var aaa = (function(){
  var a = 1;
  function bbb(){
    a++;
    alert(a);
  }
  function ccc(){
    a++;
    alert(a);
  }
  return {
    b:bbb,    //json结构
    c:ccc
  }
 })();
 alert(aaa.a)//undefined 
 aaa.b();  //2
 aaa.c()  //3

总结:

1、闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

2、不必纠结到底怎样才算闭包,其实你写的每一个函数都算作闭包,即使是全局函数,你访问函数外部的全局变量时,就是闭包的体现。

以上所述是小编给大家介绍的对js闭包理解和动画详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
基于jquery的表格排序
Sep 11 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
vue调用语音播放的方法
Sep 27 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
Openlayers+EasyUI Tree动态实现图层控制
Sep 28 Javascript
微信小程序中转义字符的处理方法
Mar 28 #Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 #Javascript
详解Js里的for…in和for…of的用法
Mar 28 #Javascript
ES7之Async/await的使用详解
Mar 28 #Javascript
详解vue-cli3多环境打包配置
Mar 28 #Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 #Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
You might like
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
python统计cpu利用率的方法
2015/06/02 Python
import的本质解析
2017/10/30 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
在python里面运用多继承方法详解
2019/07/01 Python
对Django外键关系的描述
2019/07/26 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
为什么要做架构设计
2015/07/08 面试题
环境科学专业研究生求职信
2013/10/02 职场文书
银行简历自我评价
2014/02/11 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
年度评优评先方案
2014/06/03 职场文书
民族精神月活动总结
2014/08/28 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
员工辞职信怎么写
2015/02/27 职场文书
Django与数据库交互的实现
2021/06/03 Python
2022年显卡天梯图(6月更新)
2022/06/17 数码科技
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python