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 getElementsByClassName函数
Apr 01 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
js常见遍历操作小结
Jun 06 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
浅谈克隆 JavaScript
Nov 02 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
深入探讨javascript函数式编程
2015/10/11 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
BootStrap便签页的简单应用
2017/01/06 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python如何爬取个性签名
2018/06/19 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
提高python代码运行效率的一些建议
2020/09/29 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
关于box-sizing的全面理解
2016/07/28 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
儿童生日会策划方案
2014/05/15 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
史上最牛的辞职信
2015/02/28 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技