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 相关文章推荐
文本加密解密
Jun 23 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
原生js实现3D轮播图
Mar 21 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
《javascript设计模式》学习笔记一: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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
file_get_contents(&quot;php://input&quot;, &quot;r&quot;)实例介绍
2013/07/01 PHP
php中file_exists函数使用详解
2015/05/08 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
jQuery使用手册之一
2007/03/24 Javascript
取键盘键位ASCII码的网页
2007/07/30 Javascript
Javascript 错误处理的几种方法
2009/06/13 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python中的装饰器详解
2015/04/13 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python能否java成为主流语言吗
2020/06/22 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
个人工作主要事迹
2014/05/08 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书