Js闭包的原理(图解)

JavaScript021

Js闭包的原理(图解),第1张

什么是闭包(Closure)?

网上流传各种说法,在Javascript语言中,我的理解是: 保存着其他函数内部变量的函数,就是闭包。

挺绕的,但不虚,让我们一步步揭开它的神秘面纱!

要理解闭包,我们得先搞清楚以下几个概念:

JS的作用域分两种:全局作用域、局部作用域(也可称为函数作用域)

总的来说,Js作用域的一般机制就是:内部可访问外部的变量,外部无法访问内部的变量。

那么这套作用域机制是如何实现的呢?答案是:通过作用域链

在Js中,每当一个函数被执行,都会产生三个对象:

我们通过实例配图讲解,例如有如下 js 文件:

当浏览器运行解析 example.js 后,首先创建了全局执行环境 (Window 对象)、Window 作用域链和 Global 全局活动对象,如图:

搞明白了作用域链,离弄清楚什么是闭包就仅一步之遥了! 我们来看看下面这个实例:

当执行 var func = outer() 时,情况如图:

接下来,当执行 console.log(func()) 时, 情况如图:

闭包的概念

    所谓的闭包就是利用作用域的嵌套,将原本的局部变量进化成私有变量,同时在作用域的外部能够拿到该变量的环境,就叫做闭包!

闭包的特点

    1.比较消耗性能

    2.避免了全局变量的污染

    3.可以在外部操作内部的变量,方便 但是不安全

    4.低版本浏览器会造成内存的泄露

    5.将原本要删除的变量保存起来,方便下一次使用

闭包的原理

    表现 :作用域的嵌套

    本质 :函数的定义区域: 函数的定义作用域

               函数的执行区域: 函数的执行作用域

    关系 :执行时,可以拿到定义作用域的所有变量

    像这种利用作用域嵌套,拿到内部变量的 环境,都可以看做成闭包。(利用作用域的嵌套,触发了计算机的垃圾回收机制,将原本要删除的变量临时保存到新的作用域中)

  应用场景: 1.循环内绑定的事件  2. 事件处理函数  3.计时器