闭包是JS中最根本、最重要的概念之一,闭包绝不是一个繁多的概念,它波及作用域、作用域链、执行上下文、内存治理等多重知识点。
1.作用域
首先是作用域,在ES6之前只有函数作用域和全局作用域之分,ES6中通过let和const申明变量的块级作用域,使得JS的作用域更加丰盛。上面说说变量晋升和暂时性死区。
上面看个var申明变量的例子
function f1(){ console.log(b);//undefined var b = 2}f1()
var申明的变量会提前申明,然而不赋值,所以输入undefined,而这里的var换成let、const的话,会报referenceError谬误。起因是let、const申明的变量,在未声明之前的区域会造成一个“死区”,业余名为TDZ(Temporal Dead Zone)它始于函数结尾,终于变量申明的语句,在这个“死区”中调用变量都会报错,在死区外就能够失常拜访变量。暂时性死区有种极其的状况就是,函数的参数默认值设置也会受它的影响
例子如下
function fan(a1 = a2, a2){ console.log(a1,a2);}fan(1,2)fan(null,2)fan(undefined,2)
调用了三次fan,别离输入什么呢,第一次是1,2,第一次是null,2,第三次报错了。第三次因为传的是undefined,默认没传,a1赋值为a2,但此时a2没有申明,所以报错。
2.执行上下文和调用栈
执行上下文就是以后代码的执行环境/作用域,和作用域相辅相成,但又是俩个齐全不同的概念。
2.1 代码执行的俩个阶段
JS代码执行分俩个阶段,一个是代码预编译阶段,一个是代码执行阶段
在预编译阶段,会进行变量的申明,对变量进行晋升,但值为undefined,对所有非表达式的函数申明进行晋升
在执行阶段,会执行代码逻辑,执行上下文会在这个阶段全副创立实现
上面看个例子
function fbn(){ console.log('a');}var fbn = function(){ console.log('b');}fbn()
这里会输入b,如果调换程序呢
var fbn = function(){ console.log('b');}function fbn(){ console.log('a');}fbn()
这里输入还是b
为什么呢?因为预编译阶段对fbn进行变量晋升,并未赋值,而后对函数fbn进行创立申明,接下来才轮到fbn的赋值,fbn被赋值的内容是函数体为console.log('b')的函数,所以输入b
作用域在预编译阶段确定,,但作用域链是在执行上下文的创立实现生成的,因为函数调用才会创立相应的执行上下文。执行上下文包含变量对象,作用域链及this的指向
2.2 调用栈
在a函数中调用了b函数,在b函数中调用了c函数,这样便造成了一系列的调用栈,a、b、c顺次入栈,c执行完出栈,b执行完出栈,最初a执行完出栈,造成调用栈。
失常来讲,在函数执行结束并出栈时,函数内的局部变量在下一个垃圾回收(GC)节点被回收,该函数的执行上下文会被销毁,这也是外界无法访问函数内定义的变量的起因,也就是说,只有在函数执行时,相干函数才能够拜访函数内的变量,变量会在预编译阶段被创立,在执行阶段被激活,在函数执行完结被销毁
3.闭包
讲了这么多前置概念,置信你大略了解闭包的工作原理了吧。
在前述内容中,咱们晓得失常状况下外界无法访问函数内的变量,函数执行后,其变量会被销毁。但如果在a函数内,返回一个b函数,且这个返回的b函数应用a函数内的变量,那么外界能够通过b函数拜访a函数的变量了,这就是闭包的原理。
3.1 内存治理
内存空间分为堆空间和栈空间
undefined,string,null,number,boolean等等根本数据类型寄存在栈空间,有固定的内存大小
object、array、function等等援用类型寄存在堆空间,内存大小并不固定
3.2 内存透露
内存透露是指内存空间明明曾经不再被应用,但因为某种原因没有被开释的景象。
内存透露的危害十分直观,它会导致程序运行迟缓,甚至解体
看个例子
var ele = document.querySelector('div')ele.index = '0'ele.parentNode.removeChild(ele)
这里只是把节点移除了,但变量ele仍然存在,该变量占用的内存无奈开释
所以应该增加 ele = null 更加稳当
再来一个例子
var ele = document.querySelector('div')ele.innerHTML = '<button id="btn">点击</button>'var btn = document.querySelector('#btn')btn.addEventListener('click',function(){ //...})ele.innerHTML = ''
这里button曾经在DOM中移除了,然而事件处理句柄还在,该节点变量无奈回收,所以还须要增加removeEventListener函数,避免内存透露
除了开发者被动保障回收外,大部分场景下浏览器都会依附标记革除和援用计数俩种算法回收
一个闭包的例子
function fcn(){ let value = 1 function fdn(){ console.log(value); } return fdn}var fdn = fcn()fdn()
在谷歌浏览器的V8引擎中执行,在fdn函数中设置断点,会发现存在闭包变量value
最初,来个例题实战
var fn = nullconst fun = () =>{ var a = 1 function ffn(){ console.log(a); console.log(b); } fn = ffn}let bar = () =>{ var b = 2 fn()}fun()bar()
运行后果是什么呢,运行后果是 1和ReferenceError:b is not defined,fn被赋值为ffn,变量b并不在它的作用域链上,如果在fun里或全局申明b=2,那便会输入2