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批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
vue编写简单的购物车功能
Jan 08 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
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP多例模式介绍
2013/06/24 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python采用raw_input读取输入值的方法
2014/08/18 Python
python读取word文档的方法
2015/05/09 Python
python3+PyQt5使用数据库表视图
2018/04/24 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
工商管理专业实习生自我鉴定
2013/09/29 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
小学教师国培感言
2014/02/08 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
基层党组织整改方案
2014/10/25 职场文书
婚宴来宾致辞
2015/07/28 职场文书
Python实现简单的猜单词
2021/06/15 Python