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计算页面刷新的次数
Jul 20 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
JavaScript canvas实现流星特效
May 20 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 无限级分类 获取顶级分类ID
2016/03/13 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python3爬楼梯算法示例
2019/03/04 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
个性大学生自我评价
2013/12/04 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
收入证明申请书
2015/06/12 职场文书
三下乡活动心得体会
2016/01/23 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Golang流模式之grpc的四种数据流
2022/04/13 Golang