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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 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 in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python抽象类的新写法
2015/06/18 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
办公室主任先进事迹
2014/01/18 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
给校长的建议书500字
2014/05/15 职场文书
优秀家长自荐材料
2014/08/26 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
初婚初育证明范本
2015/06/18 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
SQL之各种join小结详细讲解
2021/08/04 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js