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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
javascript工具库代码
Mar 29 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Puppet的一些技巧
2018/09/17 Javascript
vue实现放大镜效果
2020/09/17 Javascript
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Django中的Model操作表的实现
2018/07/24 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python tcp传输代码实例解析
2020/03/18 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
经济管理专业求职信
2014/06/09 职场文书
退学证明范本3篇
2014/10/29 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书