网络书屋(Web Reading Room)

A blogging framework for hackers.

Javascript闭包训练

javascript 闭包训练

闭包其实就是保存着内部定义函数的一张表,该表保存着函数头、函数变量(变量当前状态的值)、函数实现。

利用 一个outFun 和一个innerFun进行实验《Learning jQuery 4th edition》

case 1: 闭包传递,内部函数可以被传递到外头

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  $(function(){
    //函数被封在一个闭包中 可以像数据一样传来传去
    var globalInner;
    function outFun()
    {

      console.log('Inside the outFun');
      function innerFun()
      {
        console.log('inside the innerFun of the OutFun');
      }
      globalInner=innerFun;
      console.log('innerFun():');
      innerFun();
      console.log('return Begin')
      return innerFun;
    }

    console.log('outFun:')
    outFun();
    console.log('globalInner:');
    globalInner();
    console.log('Test outFun return');
    outFun()();

  }) ;

复制代码 测试结果:

outFun: TestCloser.html:12 Inside the outFun TestCloser.html:18 innerFun(): TestCloser.html:15 inside the innerFun of the OutFun TestCloser.html:20 return Begin TestCloser.html:26 globalInner: TestCloser.html:15 inside the innerFun of the OutFun TestCloser.html:28 Test outFun return TestCloser.html:12 Inside the outFun TestCloser.html:18 innerFun(): TestCloser.html:15 inside the innerFun of the OutFun TestCloser.html:20 return Begin TestCloser.html:15 inside the innerFun of the OutFun 复制代码

case 2: 内部变量 和外部变量的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  $(function(){
    console.log('测试InnerFunPig的局部变量');
    //局部变量是存在的
    //alert('hhell');
    function outFunPig()
    {

      function innerFunPig()
      {
        //局部变量 重新赋值
        var innerVar=1;
        console.log('innerVar:'+innerVar);
        innerVar++;

      }
      return innerFunPig;
    }

    var out1= outFunPig();
    out1();
    out1();
    var out2= outFunPig();
    out2();
    out2();

    console.log('测试outFunCat的全局变量');
    //测试全局变量
    var globalVar=1;
    function outFunCat()
    {

      function innerFunCat()
      {
        //局部变量 重新赋值
        console.log('innerVar:'+ globalVar);
        globalVar++;

      }
      return innerFunCat;
    }

    var out3= outFunCat();
    out3();
    out3();
    var out4= outFunCat();
    out4();
    out4();

    console.log('测试outFunDog的内部变量');
    //测试半全局变量
    function outFunDog()
    {

      //半全局变量
      var semiGlobalVar=1;
      function innerFunDog()
      {
        //局部变量 重新赋值
        console.log('innerVar:'+ semiGlobalVar );
         semiGlobalVar++;

      }
      return innerFunDog;
    }

    var out5= outFunDog();
    out5();
    out5();
    var out6= outFunDog();
    out6();
    out6();



  });

测试结果2: 测试InnerFunPig的局部变量 4TestCloser.html:44 innerVar:1 TestCloser.html:58 测试outFunCat的全局变量 TestCloser.html:67 innerVar:1 TestCloser.html:67 innerVar:2 TestCloser.html:67 innerVar:3 TestCloser.html:67 innerVar:4 TestCloser.html:81 测试outFunDog的内部变量 TestCloser.html:91 innerVar:1 TestCloser.html:91 innerVar:2 TestCloser.html:91 innerVar:1 TestCloser.html:91 innerVar:2 复制代码