• 使用闭包跨域开发


    这段在看一本书,《编写高质量的代码》之改善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;     //直接把局部变量的值传递给变量b
    4     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 <body>
     2 <button onclick="f()">按钮1:(f())()</button></br>
     3 <button onclick="b()">按钮2:(b())()</button></br>
     4 <button onclick="c()">按钮3:(c())()</button></br>
     5 <button onclick="d(100)">按钮4:(d())()</button></br>
     6 <script>
     7     function f(){
     8     var a=1;
     9     b=function(){
    10         alert(a);
    11     }
    12     c=function(){
    13         a++;
    14     }
    15     d=function(x){
    16         a=x;
    17     }
    18     }
    19 </script>
    20 </body>

    可以看一下这个。

  • 相关阅读:
    关于 php json float 出现很多位的问题
    做 Excel 的 XML schema.xsd
    笔记:Python 默认参数必须指向不变对象
    Bartender 使用 Excel xlsx 数据库时出现 0x800A0E7A
    Javascript 中 的 for ... in 和 for ... of 差别
    关于跨域资料收集 (2019-01-11)
    ThinkPHP3 和 ThinkPHP5 不是一个团队做的
    记录一下:给电推剪改锂电池
    为你的Web程序加个启动画面
    前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
  • 原文地址:https://www.cnblogs.com/fnncat/p/4857680.html
Copyright © 2020-2023  润新知