新手入门js闭包学习过程解析


Posted in Javascript onOctober 08, 2019

闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量能在函数中保存到函数的实例对象销毁为止,其它代码块能通过某种方式获取这些实例(局部)变量的值并进行应用扩展。

我们的理解:

其实闭包就是一个函数,一个外部函数通过调用函数并return返回出内部函数,这里的内部函数就是一个闭包;此时在内部函数中是可以访问到外部函数的变量的;

要想理解闭包,首先我们要了解栈堆内存和作用域链;首先我们来讲解栈堆内存:

首先我们来看个demo:

var a=1;
var obj={"name":"咸鱼"}

上面简单的两句代码,其实就是在内存中做了两件事,效果图如下:

新手入门js闭包学习过程解析

在js简单实现深浅拷贝(https://3water.com/article/171389.htm)一文中我们知道基本数据类型是存储在栈内存中的,引用数据类型是存储在堆内存中的,其实上面的两句代码在内存中就是做了两件事:1.首先在栈内存中开辟了一块空间用来存放a的变量和值;2.在堆内存中开辟了一块空间用来存储obj的值,同时在将地址指向栈内存中的变量名obj

如果我们在代码下面再加上一句obj={"name":'张三"},这个时候我们之前存储name为咸鱼的值也就是obj原来的值会被js中的垃圾回收机制回收掉,然后obj的值重新的指向{name:"张三"}这个值;

作用域链

再来看一下这个例子:

var a = 1;
function fn(){
  var b = 2;
  function fn1(){
    console.log(b);//2
    console.log(a);//1
  }
  fn1();
}
fn();

效果图如下:

新手入门js闭包学习过程解析

1.var a=1;这个时候我们是在全局执行环境的,浏览器的全局环境就是window作用域,我们的window作用域中有a和fn;

2.当我们往下走到fn的时候,栈内存会开辟一块新的执行环境,此时fn的执行环境中我们有b和fn1;

3.当我们接着往下走到fn1的时候,这时栈内存同样会开辟一块新的执行环境,此时fn1的执行环境中是没有任何变量数据的,但是我们在fn1中输出a、b,我们都是可以读取到的;这是因为程序在读取变量的时候是从内到外的开始读的,是随着fn1开始往上一层一层的查找,是这样的执行顺序(fn1 = > fn = > window),如果找到window中还没有读取到变量,这时程序才会报错;

当然在执行的过程中,垃圾回收机制如果检测到程序执行完了是会进行垃圾回收的,避免造成内存泄露等问题;就是说我们的fn1里面执行完之后fn1的作用域就会被销毁,接着程序执行fn,fn执行完之后fn就会被销毁;往上执行到全局的时候,整个程序就没有了fn的作用域和fn1的作用域,只剩下浏览器的全局作用域window,这个时候window里只剩a和fn;

了解了上面的作用域链和栈内存和堆内存的知识之后,我们来开始讲解js闭包:

function outer() {
   var a = '123'
  
  return function add(){

//在这里因为作用域的关系,add是能访问到outer的所有变量的,但是outer是访问不到add的变量;


//所以思路一转,把add的值作为结果return出来变通实现outer外部函数访问到了内部函数变量

  // add就是一个闭包函数,因为他能够访问到outer函数的作用域,add中没有找到变量a,则会继续往上层作用域找
    console.log(a);
  }
}
var inner = outer()  // 获得add闭包函数
inner()  //"123"

首先我们可以看到,在全局作用域下我们是有一个outer函数的,outer作用域里面有a和add,add作用域里面执行控制台输出a的变量,此时这里的add函数就形成了一个闭包,因为add函数里面需要访问到outer作用域下的a变量,而他们不处在同一个作用域中,所以两者相互牵引,需要输出a,上面outer中的变量a就必须得在,作用域链查找到outer的时候找到a了,输出a的时候,垃圾回收机制会认为add还没有执行完成,因为此时的作用域链查找已经到了outer作用域下,所以不会清理a的内存空间;所以这就会带来一个问题:如果我们多次的使用闭包,则会给我们的程序带来内存占用过多,导致性能问题;

函数内部能访问全局变量是javascript语言的特殊之处,但是如果我们想达到函数外部能访问内部变量的时候,我们就可以使用闭包,这就是闭包给我们带来的便利;

闭包的优缺点:

优点:

1.可以读取函数内部的变量

2.可以避免全局污染

缺点:

1.闭包会导致变量不会被垃圾回收机制所清除,会大量消耗内存;

2.不恰当的使用闭包可能会造成内存泄漏的问题;

总结:

1.作用域链查找变量的方式是一层一层的往上查找,直到找到为止,如果找到window全局作用域还未找到,就报undefined;

2.嵌套函数中,因为不在同一作用域,正常情况下内外部函数是访问不到内部函数的,但是通过闭包可以实现;

3.尽可能少的使用闭包,因为会造成内存消耗大以及有可能造成内存泄露(如果不需要的时候,不要随便使用);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
关于JSON解析的实现过程解析
Oct 08 #Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 #Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 #Javascript
webpack HappyPack实战详解
Oct 08 #Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 #Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 #Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 #Javascript
You might like
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
php intval的测试代码发现问题
2008/07/27 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
Python深入学习之装饰器
2014/08/31 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
毕业生自荐书模版
2014/01/04 职场文书
心得体会范文
2014/01/04 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2015年护士节活动总结
2015/02/10 职场文书
民主生活会意见
2015/06/05 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫