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插件jbox使用iframe关闭问题
Feb 09 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
实用的 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php事务处理实例详解
2014/07/11 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python实现机器人行走效果
2018/01/29 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
幼儿园教师个人反思
2014/01/30 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
超市商业计划书
2014/05/04 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android