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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
babel基本使用详解
Feb 17 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
在vue中使用Base64转码的案例
Aug 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
理解Javascript闭包
2013/11/01 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
使用python实现rsa算法代码
2016/02/17 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python调用百度API实现人脸识别
2020/11/17 Python
Django中template for如何使用方法
2021/01/31 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
巴基斯坦购物网站:Goto
2019/03/11 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
自我评价200字分享
2013/12/17 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
项目合作意向书范本
2014/04/01 职场文书
公司承诺书格式
2014/05/21 职场文书
药剂专业自荐书
2014/06/20 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书