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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
jQuery选择器全集详解
Nov 24 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Canvas实现微信红包照片效果
Aug 21 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
js禁止页面刷新与后退的方法
2015/06/08 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python方向键控制上下左右代码
2018/01/20 Python
python实现拼接图片
2020/03/23 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python 下载文件的几种方法汇总
2021/01/06 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
建筑系毕业生自我鉴定
2014/01/24 职场文书
社团文化节策划书
2014/02/01 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android