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 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
vue插件实现v-model功能
Sep 10 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
基于JavaScript实现省市联动效果
Jun 22 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
使用Python绘制图表大全总结
2017/02/11 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
使用pandas读取文件的实现
2019/07/31 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
保护动物的标语
2014/06/11 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
周末问候语大全
2015/11/10 职场文书
MySQL 数据 data 基本操作
2022/05/04 MySQL