JS闭包原理及其使用场景解析


Posted in Javascript onDecember 03, 2020

闭包定义

可以通过内层函数访问外层函数的作用域的组合叫做闭包。

闭包使用场景

使用闭包来实现防抖

function debounce(callback, time) {
  var timer;
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      callback()
    }, time)
  }
}<br data-filtered="filtered"><br data-filtered="filtered">window.onresize = debounce(() => {console.log(666)},500)

使用闭包设计单例模式

class Car{
  constructor(color){
    this.color = color
  }
}
var proxy = (function createCar() {
  var instance;
  return function (color) {
    if (!instance) {
      instance = new Car(color)
    }
    return instance
  }
})()
var car = proxy('white')

使用闭包遍历取索引值(古老的问题)

for (var i = 0; i < 10; i++) {
  setTimeout(function(){console.log(i)},0) //10个10
}
for (var i = 0; i < 10; i++) {
  (function(j){
    setTimeout(function(){console.log(j)},0) // 0 - 9
  })(i)
}

闭包性能

因为闭包会使外层函数作用域中的变量被保存在内存中不被回收,所以如果滥用闭包就会导致性能问题,谨记。

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

Javascript 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
微信小程序的引导页实现代码
Jun 24 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
Javascript节流函数throttle和防抖函数debounce
Dec 03 #Javascript
如何实现vue的tree组件
Dec 03 #Vue.js
Vue实现图书管理小案例
Dec 03 #Vue.js
基于ajax实现上传图片代码示例解析
Dec 03 #Javascript
JQuery绑定事件四种实现方法解析
Dec 02 #jQuery
WebPack工具运行原理及入门教程
Dec 02 #Javascript
You might like
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
详解Python验证码识别
2016/01/25 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Linux下多个Python版本安装教程
2018/08/15 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
深入理解Python 多线程
2020/06/16 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
如何用python 操作zookeeper
2020/12/28 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
村庄环境整治方案
2014/05/15 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python数据分析入门之数据读取与存储
2021/05/13 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
浅谈MySQL中的六种日志
2022/03/23 MySQL