博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用闭包跨域开发
阅读量:5104 次
发布时间:2019-06-13

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

这段在看一本书,《编写高质量的代码》之改善JavaScript的188个建议,感觉还不错,

写点儿笔记吧。

今天再来说说,使用闭包的问题。

闭包函数能够使用函数外定义的变量。其中它有两个特性,一个是封闭性,另一个则是持久性。封闭性体现在

外界无法访问闭包内部ude数据,如果在闭包内声明变量,外界是无法访问的,除非闭包主动给外界提供接口;

而持久性,则体现在外部函数被调用后,闭包结构依然被保存在系统中,闭包中的数据也依然存在,从而可以

实现持久使用。

从这两张图可以看的出,如果返回b,则结果为1;若要返回a,则结果变错误。为什么会这样呢?

首先,在函数test结构体内定义了两个变量,分别存储参数和闭包的结构,而闭包结构中存着参数值。当调用函数

test之后,函数结构被注销,它的局部变量也随之被注销,因此变量a中存储的参数也随之丢失,但由于变量b存储

着闭包结构,因此闭包结构内部的参数并没有被释放,在调用函数之后,依然能从闭包结构中读取到参数值。

 

看一经典的闭包

1,      function test(x){                    //外部函数

2,          var a=x;                            //外部函数的局部变量,并把参数值传递给它

3,          var b=function(){              //内部函数

4,            return a;                          //访问外部函数中的局部变量

5,          };                                      

6,         a++;                                  //访问后,动态更新外部函数的变量

7,        return b;                             //内部函数

8,     }

9,     var c=test(5);                      //调用外部函数

10,   console.log(c());                 //调用外部函数,返回外部函数更新后的值为6

 

详细的解释一下:

第一步,程序在预编译之后,从第九行开始解析执行,创建上下文环境,创建调用对象,把参数,局部变量,

内部函数转换为对象属性;

第二步,执行函数体内代码。在第六行执行局部变量a的递加运算,并把这个值传递给对象属性a,内部函数动

态保持与局部变量a的联系,同时更新自己内部调用变量的值;

第三步,外部函数把内部的函数返回给全局变量c,实现内部函数的定义,此时c完全继承内部函数的所有结构

和数据;

第四步,外部函数返回后会自动销毁,内部结构,标识符,数据随之丢失;

第五步,执行第十行代码,调用内部函数,此时返回的是外部函数返回时(销毁前)保留的变量a所存储的最

新值6.

1 function test(x){2     var a=x;3     var b=a;     //直接把局部变量的值传递给变量b4     a++;5 return b;        //局部变量6 }7 var c=test(5);8 console.log(c);   //值为5

 

通过上面的示例可以直观的看到,在没有闭包的函数的辅助下,第8行代码执行后返回值并没有与外部函数的局部变量

a最后的更新保持一致。

使用闭包结构能够跟踪动态环境中数据的实时变化,并及时存储值。

1 function test(){ 2     var a=1; 3     var b=function(){ 4             return a; 5             } 6         a++; 7     return b; 8 } 9 var c=test();10 console.log(c); //输出的是2,而不是1

其中,闭包中的变量a存储的值并不是对上面行变量a的值进行简单的复制,而是继续引用外部函数定义的局部变量a中的值,

直到外部函数test调用返回。闭包是不会因为外部的环境注销而消失的。

1  2 
3
4
5
6 20

可以看一下这个。

转载于:https://www.cnblogs.com/fnncat/p/4857680.html

你可能感兴趣的文章
慵懒中长大的人,只会挨生活留下的耳光
查看>>
"远程桌面连接--“发生身份验证错误。要求的函数不受支持
查看>>
【BZOJ1565】 植物大战僵尸
查看>>
视频:"我是设计师"高清完整版Plus拍摄花絮
查看>>
VALSE2019总结(4)-主题报告
查看>>
浅谈 unix, linux, ios, android 区别和联系
查看>>
51nod 1428 活动安排问题 (贪心+优先队列)
查看>>
中国烧鹅系列:利用烧鹅自动执行SD卡上的自定义程序(含视频)
查看>>
Solaris11修改主机名
查看>>
latex for wordpress(一)
查看>>
如何在maven工程中加载oracle驱动
查看>>
Flask 系列之 SQLAlchemy
查看>>
iframe跨域与session失效问题
查看>>
aboutMe
查看>>
【Debug】IAR在线调试时报错,Warning: Stack pointer is setup to incorrect alignmentStack,芯片使用STM32F103ZET6...
查看>>
一句话说清分布式锁,进程锁,线程锁
查看>>
Hash和Bloom Filter
查看>>
SQL Server获取月度列表
查看>>
python常用函数
查看>>
python 描点画圆
查看>>