博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我眼中的闭包
阅读量:5036 次
发布时间:2019-06-12

本文共 1493 字,大约阅读时间需要 4 分钟。

闭包几乎是通往高级前端工程师所必须经过的一个门槛。在这方面看过很多资料,感觉许多文章都只是提到了闭包的实现,而没有涉及闭包的原理。

在谈闭包之前需要先了解几个相关的概念:

1、变量作用域:全局变量拥有全局作用域,在js代码的任何地方都可见。在函数内部声明的变量只在该函数体内可见,被称为局部变量。

2、函数作用域:在函数内声明的所有变量在该函数体内始终是可见的。

3、作用域链:作用域链是一个对象。作用域链中定义了该作用域内的变量,它保证了该作用域中变量、函数的有序访问。

4、作用域链的创建:定义一个函数时,会保存一个作用域链。调用一个函数时,会创建一个新的对象来存储其局部变量,并将该对象添加至保存的作用域链上,同时创建一个新的更长的表示函数调用作用域的链。对于嵌套函数来说,每调用一次外部函数,都会创建一个新的作用域链,所以每次调用外部函数,虽然其内部代码相同,但是调用的作用域链是不同的。

5、垃圾回收机制:js具有自动垃圾回收机制,会定期把不再使用的变量销毁,释放其占用的内存。(只会销毁局部变量,全局变量的生命周期只有在页面或浏览器关闭时才会结束)

闭包的原理:函数的执行依赖于函数定义时的作用域链,即js函数执行时用的作用域链是该函数定义时创建的作用域链。大多数时候定义函数时的作用域链在函数执行时仍然有效。但是如果定义函数时的作用域链和执行函数时的作用域链不同时,就会出现问题。即当一个函数中嵌套了另一个函数,并把嵌套的函数对象作为返回值返回时,就会产生这种情况。

定义函数的作用域链和执行时相同
外部函数把嵌套函数作为返回值返回时

第一个例子很容易理解。但是第二个,可以看到当外部函数把嵌套函数作为返回值返回时,其执行结果仍然是局部变量的值,而不是全局变量的值。这就是因为函数执行时用到的作用域链,其实是函数定义时创建的。不管该函数在何时何地执行,它通过作用域链最先找到的变量就是相同外部函数中定义的变量。而闭包正是利用这种特性实现的:闭包可以捕捉到局部变量或参数,并一直保存下来,使其不会被当成垃圾回收。

闭包和垃圾回收的关系:调用函数时,会创建一个对象来保存其局部变量,并且把这个对象添加到作用域链上。当函数返回时(即执行完成了),就会从作用域链中把绑定局部变量的对象删除,这个对象就会被当作垃圾回收。但是如果定义了嵌套函数,那么嵌套函数也会有自己相应的作用域链,它与外部函数一样,把其局部变量保存到一个对象上,如果嵌套函数是作为返回值返回的或者存储在某处的属性里,那么就会有一个外部引用指向这个嵌套函数,那么外部函数就不会被当作垃圾回收,它在作用域链中绑定局部变量的对象也不会被回收。

闭包的应用场景:实现私有成员;保护命名空间;避免污染全局变量;可以使变量长期驻留在内存中。这是在网上找的,不是特别好理解。其实可以参考jQuery的源码,它就是将所有的代码封装到了一个闭包里边的。下边是我之前写的一段代码,再根据闭包进行的改写:

改写之前的代码
根据闭包原理改写后的代码

在改写后的代码中,定义了2个闭包,这2个闭包共享同一个变量defaultSize。可以看出使用闭包对代码的封装,避免全局变量的污染有很大的作用。

使用闭包的注意事项:当然闭包也不是十全十美,它可以把局部变量长期保存到内存中,不被当作垃圾回收,这种特性如果使用不当,很容易会造成内存泄漏。建议还是多看看其它比较成熟的框架是怎么使用闭包的,会对提高个人代码的质量有很大的帮助。

 

转载于:https://www.cnblogs.com/443855539-wind/p/6445954.html

你可能感兴趣的文章
redis的string类型操作命令
查看>>
一步一步学Linq to sql(一):预备知识
查看>>
全排列(传统&&黑科技)
查看>>
plist文件
查看>>
SSM Maven MallDemo项目为例
查看>>
NopCommerce 1.9 2.0 2.1 设置连接字符串
查看>>
当form表单中只有一个input时按回车键将会自动将表单提交
查看>>
题目:返回一个整数数组中最大子数组的和。
查看>>
写出float x 与“零值”比较的if语句——一道面试题分析
查看>>
任务06——封装与单元测试
查看>>
VSTO学习笔记(十四)Excel数据透视表与PowerPivot
查看>>
Xamarin.Android 的 Google 登入
查看>>
HashMap与HashTable的区别
查看>>
从jvm的角度来看java的多线程
查看>>
微服务实战(四):微服务化之无状态化与容器化
查看>>
iphone--FMDatabase 使用
查看>>
【递归打卡1】在两个长度相等的排序数组中找到上中位数
查看>>
DSO 代码框架
查看>>
图的遍历之深度优先搜索(DFS)
查看>>
使用Shader制作loading旋转动画
查看>>