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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
js截取字符串功能的实现方法
Sep 27 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP session会话的安全性分析
2011/09/08 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
javascript中对对层的控制
2006/12/29 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python中关于使用模块的基础知识
2015/05/24 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
企业门卫岗位职责
2013/12/12 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
年终工作总结范文
2019/06/20 职场文书