JS闭包原理及其使用场景解析

 更新时间:2020年12月03日 09:31:07   作者:爱折腾的王先生  
这篇文章主要介绍了JS闭包原理及其使用场景解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

闭包定义

可以通过内层函数访问外层函数的作用域的组合叫做闭包。

闭包使用场景

使用闭包来实现防抖

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)
}

闭包性能

因为闭包会使外层函数作用域中的变量被保存在内存中不被回收,所以如果滥用闭包就会导致性能问题,谨记。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js输出数据精确到小数点后n位代码

    js输出数据精确到小数点后n位代码

    要保留小数点后N位的问题,经过一番思索,终于解决了,这篇文章主要介绍了js输出数据精确到小数点后n位代码,感兴趣的朋友可以参考一下
    2016-07-07
  • JS尾递归的实现方法及代码优化技巧

    JS尾递归的实现方法及代码优化技巧

    这篇文章主要介绍了JS尾递归的实现方法及代码优化技巧,结合实例形式分析了尾递归的原理、JS实现方法及优化技巧,需要的朋友可以参考下
    2019-01-01
  • 腾讯的ip接口 方便获取当前用户的ip地理位置

    腾讯的ip接口 方便获取当前用户的ip地理位置

    在论坛中闲逛,无意中发现腾讯的ip接口。还是挺有意思的。大家可以利用下,这个IP接口所查询到的还是比较准确,我发给几个朋友测试了一下都是正确的,毕竟是腾讯的东西。
    2010-11-11
  • Flutter实现仿微信底部菜单栏功能

    Flutter实现仿微信底部菜单栏功能

    这篇文章主要介绍了Flutter实现仿微信底部菜单栏,需要的朋友可以参考下
    2019-09-09
  • JavaScript使用indexOf()实现数组去重的方法分析

    JavaScript使用indexOf()实现数组去重的方法分析

    这篇文章主要介绍了JavaScript使用indexOf()实现数组去重的方法,结合实例形式分析了使用indexOf()方法进行数组的判断与去重相关原理与具体操作技巧,需要的朋友可以参考下
    2018-09-09
  • js的alert弹出框出现乱码解决方案

    js的alert弹出框出现乱码解决方案

    alert弹出框出现乱码的情况,想必大家都有遇到过吧,其实解决方法很简单设置charset=utf-8在试试,看看是不是好了
    2013-09-09
  • JavaScript-定时器0~9抽奖系统详解(代码)

    JavaScript-定时器0~9抽奖系统详解(代码)

    这篇文章主要介绍了 JavaScript-定时器0~9抽奖系统,通过代码实例说明函数调用的整体操作,具体步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08
  • JavaScript设计模式之工厂模式和构造器模式

    JavaScript设计模式之工厂模式和构造器模式

    这篇文章主要介绍了JavaScript设计模式之工厂模式和构造器模式,本文同时讲解了设计模式的类别如创建型设计模式、结构型设计模式、行为设计模式等内容,需要的朋友可以参考下
    2015-02-02
  • JavaScript this关键字指向常用情况解析

    JavaScript this关键字指向常用情况解析

    这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 完美解决IE9浏览器出现的对象未定义问题

    完美解决IE9浏览器出现的对象未定义问题

    下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-09-09

最新评论