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 相关文章推荐
收集的10个免费的jQuery相册
Feb 26 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js图片预加载示例
Apr 30 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
学习vue.js计算属性
Dec 03 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
ES6学习教程之Promise用法详解
Nov 22 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
PHP闭包函数详解
2016/02/13 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php中的登陆login实例代码
2016/06/20 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
社区志愿者心得体会
2014/01/03 职场文书
党校培训思想汇报
2014/01/03 职场文书
出国导师推荐信
2014/01/16 职场文书
七一党建活动方案
2014/01/28 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
行政介绍信范文
2015/05/04 职场文书
百年校庆感言
2015/08/01 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python