浅谈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 将json字符串转换为json对象的方法解析
Nov 13 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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开发微信支付获取用户地址
2015/10/04 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
Javascript复制实例详解
2016/01/28 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
详解python itertools功能
2020/02/07 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
网络信息安全承诺书
2014/03/26 职场文书