html5菜鸟教程函数闭包,通过示例彻底搞懂js闭包

例1

sayHello("Bob") // 输出"Hello Bob"

在sayHello()函数中定义并调用了sayAlert()函数；sayAlert()作为内层函数，可以访问外层函数sayHello()中的text变量。

例2

var say2 = sayHello2("Jane");

say2(); // 输出"Hello Jane"

例3

var fnlist = buildList([1,2,3]);

for (var j = 0; j < fnlist.length; j++) {

fnlist[j]();

}

得到的结果：连续输出3个"item3 undefined"

解析：通过执行buildList函数，返回了一个result，那么这个result存放的是3个匿名函数。然而这三个匿名函数其实就是三个闭包，因为它可以访问到父函数的局部变量。所以闭包内的保留的i是最终的值为3.所以list[3]肯定是undefined. item变量值为item3.

改成如下代码：

var fnlist = buildList([1,3]);

得到的结果：

解释：这儿虽然传递了一个数组进去，但是返回的是三个自执行的函数。

例4

每次调用newClosure()都会创建独立的闭包，它们的局部变量num与ref的值并不相同。

例5

var sayAlice2 = sayAlice();

sayAlice2(); // 输出"Hello Alice"

alice变量在sayAlert函数之后定义，这并未影响代码执行。因为返回函数sayAlice2所指向的闭包会包含sayAlice()函数中的所有局部变量，这自然包括了alice变量，因此可以正常打印”Hello Alice”。

例6

输出666

gIncreaseNumber();

gAlertNumber(); // 输出667

gSetNumber(5);

gAlertNumber(); // 输出5

解释：首先gAlertNumber，gIncreaseNumber，gSetNumber是三个全局变量，并且其三个值都是匿名函数，然而这三个匿名函数本身都是闭包。他们操作的num都是保存在内存中的同一个num，所有会得出上面的结果。

以上这篇通过示例彻底搞懂js闭包就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的通过示例彻底搞懂js闭包全部内容，希望文章能够帮你解决通过示例彻底搞懂js闭包所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！