浅谈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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
node.js中watch机制详解
Nov 17 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
谈谈node.js中的模块系统
Sep 01 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共享内存段示例分享
2014/01/20 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
Python实现统计代码行的方法分析
2017/07/12 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
django model通过字典更新数据实例
2020/04/01 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
校园之星获奖感言
2014/01/29 职场文书
学生请假条
2014/04/11 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
宣传工作经验材料
2014/06/02 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
端午节活动总结报告
2015/02/11 职场文书
大学生十八大感想
2015/08/11 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js