JavaScript设计模式之闭包-LMLPHP

 

1.变量作用域

变量的作用域,就是指变量的有效范围,通常我们指的作用域就是函数作用域(毕竟全局的作用域没有要指的意义,关键哪都能访问)

声明变量的时候推荐使用es6语法中的let 和const 可以避免var声明变量出现的一些不必要的错误而且let声明变量只作用于当前作用域 避免使用不带var 或者let直接声明变量,可能会导致命名冲突。

2.变量生存周期

除了变量作用域之外,另外一个跟闭包有关的概念就是变量生存周期。

对于全局变量来说,它的生存周期就是永久,除非我们主动销毁它,而对于函数里面声明的变量来说 它的生存周期会随着函数调用解释而被销毁。

闭包的定义: 最简单直白的说法就是 函数返回函数

闭包的应用:封装私有变量、延续局部变量的寿命

1.封装私有变量:

使用闭包可以把一些不需要暴露在全局的变量封装成“私有变量”

如有一个计算数组偶数乘积的方法:

加入缓存机制提高函数性能:

这明显能看到cache这个缓存变量只在num函数里面被使用,与其让它们一起暴露在全局不然把它封装在num函数内部,减少页面中的全局变量,以免该变量在其他地方被修改而引发错误

2.延续局部变量寿命

src属性会自动请求服务器数据如下

但是一些低版本的浏览器实现存在着bug,在这些浏览器上面使用该函数会丢失数据 因为函数调用结束后变量销毁 我们可以用闭包封闭起来就能解决低版本浏览器bug

代码如下:

接下来要来点干货了

用闭包实现命令模式:

在JavaScript中闭包的各种设计模式实现里面,闭包的运用特别广泛,在我后续的博客中将体会到这一点

简单编写一段闭包实现命令模式 如果上述的闭包使用你基本会了的话不会对我们的理解造成困难

代码如下:

这些技术如何学习,有没有免费资料?

最后,如果有想一起学习JavaScript的可以来一下我的前端群733581373,基本上头条里的好友都会在里面交流,分享一些学习的方法和需要注意的小细节,每天也会准时的讲一些JavaScript的炫酷特效,游戏,插件封装,设计模式等等!

关注我的微~信公众号:web前端技术圈,关注后回复:"2018" 就可以领取一套前端学习资料

JavaScript设计模式之闭包-LMLPHP

10-06 11:38