浅谈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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
Underscore源码分析
2015/12/30 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
python常见数制转换实例分析
2015/05/09 Python
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
pandas数值计算与排序方法
2018/04/12 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
列车长先进事迹材料
2014/01/25 职场文书
《雷雨》教学反思
2014/02/20 职场文书
早会主持词
2014/03/17 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
校运动会广播稿300字
2014/10/07 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015年清明节活动总结
2015/02/09 职场文书
学期个人自我总结
2015/02/13 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Vue如何清空对象
2022/03/03 Vue.js
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers