JavaScript闭包的案例分析

  介绍

这篇文章将为大家详细讲解有关JavaScript闭包的案例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强>变量作用域:全局变量和局部变量
1,全局变量
直接定义在全局作用域的变量

var name=& # 39; Fakin& # 39;;   函数getName () {   alert(名称)   }   getName ()//& # 39; Fakin& # 39;

而函数可以直接读取全局变量

2局部变量
直接定义在函数内部的变量(在ES6之前JS是没有块级作用域的)。

函数getName () {   var name=& # 39; Fakin& # 39;;   }   警报(名称)//未定义的

<强>闭包
搞清楚了这两个东西后咱们在来看下闭包是什么回事!

问题1:闭包是个啥玩意,上面说了一堆,我看不懂啊?
答:闭包个人理解就是能读取其他函数内部变量的函数

问题2:闭包怎么用
答:在一个函数的内部在创建一个函数,在这个函数中引用上一函数的变量,最后讲这个函数返回即可,是不是很绕,下面给例子

函数f1 () {   var n=999;   nAdd=function () {n +=1}   函数f2 () {   警报(n);   }   返回f2;   }   var=结果f1 ();   结果();//999   nAdd ();   结果();//1000

如上例子中f2就是闭包函数,在f1中返回函数f2,最后把f1赋值给结果,结果一共运行了两次,结果也得出了咱们想要的,也就证明了,在闭包中f2引用了f1的变量“n”而“n”没有因为f1执行完毕后然后在内存中销毁,大家应该知道,在JS中如果一个变量在函数执行完后没有被其他地方给引用的话,是就自动销毁的。

<强>使用闭包需要注意的地方

1:由于闭包会使得函数中的变量都被保存在内存中,内存使用很大,会造成渲染卡顿等等,浏览器运行慢,在IE浏览器中还会造成内存泄露等问题
2:由于在闭包中子函数引用父函数的变量,子函数会修改父函数变量,请不要随意修改父函数变量的值

<强>思考题

函数计算(){   var arr=[];   (var i=1;i<=3;我+ +){   加勒比海盗。推动(函数(){   返回我*;   });   }   返回arr;   }      var结果=count ();   var f1=结果[0];   var f2=结果[1];   var f3=结果[2];   f1 ();//16   f2 ();//16   f3 ();//16

为什么f1 f2 f3都返回的是同一个值,而不是我们想要的呢?那怎么能不能闭包来解决呢?
其实也很简单,咱们闭包多两行代码就行

函数计算(){   var arr=[];   (var i=1;i<=3;我+ +){   加勒比海盗。推动(函数(n) {   返回函数(){   返回n * n;   }   })(i));//在自执行函数中把我传入相当于这个自执行函数的参数绑定了我,//当每次循环的时候不管变量怎么更改,这个函数的参数不会更改,所以返回咱们想要的结果   }   返回arr;   }      var结果=count ();   var f1=结果[0];   var f2=结果[1];   var f3=结果[2];      f1 ();//1   f2 ();//4   f3 ();//9

关于JavaScript闭包的案例分析就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

JavaScript闭包的案例分析