从一脸懵逼到掌握闭包 🍉

从一脸懵逼到掌握闭包 🍉

关于闭包必问的两个问题:

  1. 神魔是闭包
  2. 闭包的作用是神魔?

神魔是闭包?

var local = '变量'
function foo(){
 console.log(local)
}

假设上面三行代码在一个立即执行函数中。 三行代码中,有一个局部变量local,有一个函数foofoo里面可以访问到local变量。那么这就是一个闭包。 函数 和 函数内部能访问到的变量 (也叫环境) 的总和,就是一个闭包

大部分的闭包都是以函数套函数的形式来进行展示的。

比如这个样子:

function foo(){
  var local = 1
  function bar(){
    local ++
    return local
  }
  return bar
}
var func = foo()
func()

local变量和bar函数就组成了一个闭包。

函数套函数的作用是啥呢?

函数套函数就是为了故意制造出一个局部的变量local,如果不把 local放在一个函数里面,local就成了一个全局的变量,就没有办法做到 闭包的作用(隐藏一个变量)

return bar的作用是啥?

return bar就是为了让你能够使用这个闭包。为了让外面能够访问到这个bar函数而已。

闭包的作用是神魔?

其实从上面的例子我们已经能够看出来,闭包就是制造一个局部变量,只给外部提供一个可以操作这个变量的方法

比如我们需要发优惠券给用户,我们发的优惠券都是xx-10这种类型的,有人如果不小心改错了数据,将这个xx改成了负数,用户总不能用了优惠券越用越亏吧。 所以我们不允许别人操作这个数据,只提供给他一个方法。

!function(){
  var xx =20
  window.加1块钱 = function(){
   xx += 1
  }
  window.减1块钱 = function(){
  xx -= 1
  }
}

那么我们的这个方法就可以调用 window.加1块钱或者减1块钱微调优惠券的优惠力度,而不至于直接改数据。

这下又形成了两个闭包:

  1. xx 和 加1块钱的函数
  2. xx和减一块钱的函数

闭包和作用域

var local = '变量'
function foo(){
 console.log(local)
} //在一个立即执行函数中

foo的函数内部可以使用foo函数外部的变量,就符合了闭包的定义。

闭包是 JavaScript一个非常重要的特性,这意味着当前作用域总是能够访问外部作用域中的变量。因为 函数 是 JavaScript中唯一拥有自身作用域的结构,因此闭包的创建依赖于函数。

闭包会造成内存泄漏吗?

内存泄露是指你用不到(访问不到)的变量,依然占据着内存空间,不能被再次利用起来。 但是闭包里面的变量是我们需要使用的变量,就不能说是内存泄漏

IE浏览器在我们使用完闭包之后,依然回收不了闭包里面引用的变量。所以会导致这个bug。

所以这其实是IE的问题。

文章参考 :

[1] 方应杭 js中的闭包是什么?

[2] JavaScript秘密花园

如果对你有帮助的话,请点个👍吧!我们继续分享更多文章的~

本文使用 mdnice排版

原文链接:juejin.im

上一篇:H5生成海报之html2canvas插件及网络资源图片转base64
下一篇:安卓 | IOS 键盘事件兼容

相关推荐

  • (……)和JavaScript闭包中的(…)

    Camilo Martin(https://stackoverflow.com/users/124119/camilomartin)提出了一个问题:(…()) vs. (…)() in javascr...

    2 年前
  • 面试官:说说作用域和闭包吧

    几乎所有语言的最基础模型之一就是在变量中存储值,并且在稍后取出或修改这些值。在变量中存储值和取出值的能力,给程序赋予了状态。这就引伸出两个问题:这些变量被存储在哪里?程序如何在需要的时候找到它们?回...

    2 个月前
  • 面试BAT,你凭什么说你掌握了CSS

    介绍 项目已经开源:https://github.com/nanhupatar...(https://github.com/nanhupatar/FEGuide/blob/master/CSS%E...

    2 年前
  • 闭包,this,作用域链,原型链

    参考书:《JavaScript高级程序设计 第3版》 参考博客:www.jianshu.com/p/f8c7c5502… 执行环境 执行环境是Javascript中最为重要的一个概念。

    8 天前
  • 闭包面试题原题

    图片描述(https://img.javascriptcn.com/bd656820b8670fd11ee8ab27bd199559 "图片描述") 闭包面试题原题 一、关于这个函数的执行...

    2 年前
  • 闭包的简单理解

    主要分三部分说: 一、什么是闭包?二、闭包有什么好处?应用在哪里? 1、什么是闭包 第一个特点:可以是函数嵌套函数 第二个特点:内部函数可以引用外部函数的参数和变量 b变量都要被内部...

    2 年前
  • 闭包是...

    首先引用 MDN(https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Closures) 文档的一句话作为开头 闭包是函数和声明该函数的词...

    2 年前
  • 闭包及跨域相关几道题

    马蹄丙(https://img.javascriptcn.com/2d8335ec66d784958ebb0105cb17fa46.png) (/u/matibing) ...

    2 年前
  • 闭包到底是什么?

    前言 闭包闭包,闭包是JavaScript最强大的特性,没有之一,很多强大JavaScript库比如jQuery、Vue.js都使用了闭包的特性来实现的。闭包几乎是一线互联网企业面试必问的题 如何理解...

    19 天前
  • 闭包函数语法

    闭包函数语法...

    2 年前

官方社区

扫码加入 JavaScript 社区