JavaScript闭包

谁践踏了优雅 2022-06-15 12:53 176阅读 0赞

*最近更新时间：2017年6月3日21:04:04*

[《我的博客地图》][Link 1]

前端的重点是JavaScript这门语言的本身，闭包知识点难懂，因此，专门单独学习，在实际项目中应用。

闭包的出现，可以减少全局变量的使用，多使用局部变量，节省内存

1、概念

函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中成为闭包。

闭包是指有权访问另一个函数（外部函数）作用域中的变量的函数（内部函数）。

2、闭包三特性

①函数嵌套函数；function a()\{function b()\{\}\}

②内部函数可以引用外部函数的参数和变量；

function a(a)\{

var b = 5;

function b()\{

console.log(a);

console.log(b);

③参数和变量不会被垃圾回收机制回收；

3、闭包的好处

好处：①希望一个变量长期驻扎在内存中；②避免全局变量的污染；③私有成员的存在

4、没有闭包的情况，全局变量被污染

var a = 1;

function a()\{

a++;

console.log(a);

a()；//全局变量被污染

a();

5、没有闭包的情况，局部变量每次被垃圾回收机制回收（js中的垃圾回收机制的意义，节省内存）

function a()\{

var a = 1;

a++;

console.log(a);

a()；//2 局部变量被垃圾回收机制回收，函数没有达到预期的结果

a();//2全局变量被污染

6、闭包的出现，局部变量不会被垃圾回收机制回收

function a()\{

var a = 1;

return function()\{

a++;

console.log(a);

var b = a();

b()；//2 局部变量没有被垃圾回收机制回收，函数达到预期的结果

b();//3

7、闭包应用场景

闭包用法一：模块化代码

var a = (function()\{

var a = 1;//局部变量是模块化中的一个私有成员

return function()\{

a++;

console.log(a);

\})()

a();//2

a();//3

闭包用法二：保证私有成员存在

var a = (function()\{

var a = 1;//私有变量相对于私有成员b和c是全局的

function b()\{

a++;

console.log(a);

function c()\{

a++;

console.log(a);

return \{

b:b(),

c:c()

\})()

a.b();//2

a.c();//3

闭包用法三：在循环中直接找到对应元素的索引，而不需要人为加索引

var aLi = document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++)\{

aLi\[i\].onclick = function()\{console.log(i)\}//没有闭包，点击任何一个li元素都打印3

for(var i=0;i<aLi.length;i++)\{

(function(i)\{

aLi\[i\].onclick = function()\{console.log(i)\}//点击任何一个li元素打印对应的索引值

\})(i)//i当做局部变量传递给了对应的元素，每次循环时i的索引已经被绑定在对应的元素上，即i已经存储在内存中

for(var i=0;i<aLi.length;i++)\{

aLi\[i\].onclick = (function(i)\{

return function()\{console.log(i)\}

\})(i)

8、创建闭包的创建方式，在一个函数内部创建另一个函数。

9、闭包的注意事项

IE下会引发内存泄漏，当页面跳转时，变量一直存储在内存中不被释放，内存容量持续增加，影响CPU性能，只有关闭浏览器才能释放内存

window.onload = function()\{

var oDiv = document.getElementById('div1');

oDiv.onclick = function()\{

console.log(oDiv.id);//引发内存泄漏

window.onunload = function()\{

oDiv.onclick = null//释放内存，防止内存泄漏

window.onload = function()\{

var oDiv = document.getElementById('div1');

var id = oDiv.id;

oDiv.onclick = function()\{

console.log(id);

oDiv = null;//释放内存，防止内存泄漏

10、闭包常见面试题

啊

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

JavaScript闭包

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript闭包

相关 JavaScript闭包

相关 JavaScript 闭包

相关 JavaScript 闭包

相关 JavaScript闭包

相关 JavaScript 闭包

相关 JavaScript闭包

相关 JavaScript闭包

相关 JavaScript闭包

相关 javascript 闭包