ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

JS闭包

2021-04-23 16:56:06  阅读:147  来源: 互联网

标签:闭包 函数 作用域 JS 外部 子函数 变量


JS的闭包用法给开发带来了极大的便利,它的使用方式非常自然,以至于很多同学并不很了解闭包,却可以在实际开发中顺畅的使用了

例如下面的代码,给button添加一个点击事件,很多人经常这么写,实际上这就是一个闭包


图片


要了解闭包,需要先了解下JS变量的作用域

变量的作用域无非就是两种:全局变量和局部变量

特点是 函数内部可以访问外部变量,函数外部不能访问函数内的变量

例如


图片


这个很好理解,那么如何从外部读取局部变量?

那就是在函数的内部,再定义一个子函数,这个子函数可以访问外部的变量,然后父函数把这个子函数return,让外部可以通过子函数访问自己的局部变量

例如


图片


这个实现方式就是闭包

什么是闭包

闭包其实就是将函数内部和函数外部连接起来的一座桥梁,可以让函数外部的代码访问函数内容变量,可以把闭包简单理解成“定义在一个函数内部的函数”

闭包在子作用域中保存了一份在父级作用域取得的变量,这些变量不会随父级作用域的销毁而销毁,因为他们已经常驻内存了

闭包应用示例

(1)实现公共、私有作用域控制

既然闭包可以对外提供访问内容变量的方式,就可以用这个特点实现类似 public private 作用域的需求


图片


(2)循环添加DOM事件

先看下面的代码,目标是点击不同的输入框给出不同的提示

这是个经典案例,开发中很容易出现类似错误


图片


实际运行后,会发现,不管点击哪个输入框,都会提示年龄的信息

下面的是正确方式,可以按照需求正常显示


图片


原因

第一种方式出现错误,是因为在for循环结束后,变量item的值已经变为了最后一项,所以当点击事件执行时,读取的信息总是最后一项的信息

而第二个方式就是利用了闭包会把父级变量保存到自己作用域的特点,这样每次循环添加点击事件时,把当前循环中变量值传给了function,这样function就保存了正确的变量值


标签:闭包,函数,作用域,JS,外部,子函数,变量
来源: https://blog.51cto.com/u_15127579/2727300

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有