JavaScript | 闭包

Posted 2020-09-29 Hugh

(๑•̀ㅂ•́)و✧

————————————————————————————————————————————

javascript闭包

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

作用域链：只有内层函数可以调用外层变量，形成一条单向的作用域链

词法作用域：不同的函数之间不共享词法作用域,可以通过闭包来实现共享

作用域链与词法作用域样例

 1 // 作用域链
 2 var a = 1;
 3 
 4 function test() {
 5     var b = 2;
 6 
 7     function test1() {
 8         // 在test1()中可以调用外层的变量a和b
 9         // 但是在外层无法调用内层的变量,形成了一条作用域链
10         var c = 3;
11         console.log(a);
12         console.log(b);
13         return b;
14     }
15     test1();
16 }
17 test();
18 
19 // 词法作用域
20 // 不同的函数之间不共享词法作用域,可以通过闭包来实现共享
21 // 在这种写法中,错误信息提示d未定义
22 // function f1() {
23 //     var d = 333;
24 //     return f2();
25 // }
26 
27 // function f2() {
28 //     return d;
29 // }
30 // console.log(f1());

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

闭包：

• 在正常情况下，只有function2可以访问function1中的变量var a 和var b
• 如果想要在全局作用域中访问内层变量，就需要用到"闭包"
• 即借function2来调用function1中的变量

优点：

• 可以突破全局作用域链，调用函数内部变量
• 退出后函数不会被销毁，而是保留在内存中
• 作为迭代器来使用

缺点：

• 闭包会使函数中的变量都保存在内存中，内存消耗很大，不能滥用闭包。在IE中可能导致内存泄漏。在退出函数之前，尽量将不使用的局部变量全部删除
• 闭包会在父函数外部，改变父函数内部变量的值。所以如果把父函数作为对象Object使用，把闭包当作公用方法Public Method，把内部变量作为它的私有属性Private Value，此时注意不要随便改变父函数内部变量的值

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

实现形式：

• Demo1：通过返回函数的函数形式来返回f1中的变量

• Demo2：利用全局变量进入到函数内部来调用

闭包的基础形式

 1 // 通过闭包突破全局作用域链
 2 
 3 // Demo1:使用返回函数的函数来实现闭包
 4 function f1() {
 5     var a = \'aaa\';
 6     return function() {
 7         return a;
 8     }
 9 }
10 var a1 = f1();
11 // f1()返回的是function(){return a;}
12 console.log(typeof a1);
13 // 要打印a的值则要用a1()
14 console.log(a1());
15 // 或使用二次调用
16 var a2 = f1()();
17 console.log(a2);
18 
19 // Demo2:利用全局变量进入到函数内部来调用
20 var temp;
21 function f3(){
22     var b = \'bbb\';
23     temp = function(){
24         return b;
25     }
26 }
27 // 先调用f3(),将function()赋给全局变量temp
28 f3();
29 // 执行temp()得到变量b的内容
30 console.log(temp());

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

闭包的应用：基本形式/迭代器

  1 // 闭包的应用
  2 // Demo1:基本应用
  3 function f1() {
  4     var n = 1;
  5     // test是全局变量
  6     test = function() {
  7         n++;
  8     }
  9 
 10     function f2() {
 11         console.log(n);
 12         return \'f2 return\';
 13     }
 14     // 调用f1时返回f2()的指针
 15     return f2;
 16 }
 17 // res调用f1()时,返回f2给res
 18 var res = f1();
 19 // 打印res可以看到f2()的内容
 20 console.log(res);
 21 // 执行f2的内容可以得到n与f2()的返回值
 22 console.log(res());
 23 // 执行test()函数后n++
 24 test();
 25 // 此时调用n的值即为2
 26 console.log(res());
 27 // 说明变量n始终保存在内存中,并不会因为f1()执行结束而销毁
 28 // f1是f2()的复函数,f2又被赋予给全局变量res,f2又依赖f1,所以f1未被销毁
 29 
 30 // *******************************************************************
 31 // Demo2:设置变量访问控制,在外部不会被访问到
 32 // 全局作用域中变量getValue和setValue用于调用
 33 var setValue, getValue;
 34 // 设置自调用函数,建立初始值
 35 (function() {
 36     var num = 0;
 37     getValue = function() {
 38         return num;
 39     };
 40     setValue = function(x) {
 41         num = x;
 42     };
 43 })();
 44 // 默认得到初始值0
 45 var getNum = getValue();
 46 console.log(getNum);
 47 // 给num赋值
 48 setValue(10);
 49 // 获取获取到的值
 50 var getNum = getValue();
 51 console.log(getNum);
 52 
 53 // *******************************************************************
 54 // Demo3:迭代器效果
 55 // 对数组操作,每次调用则返回下一个元素
 56 var arr1 = [\'a\', \'b\', \'c\', \'d\', \'e\'];
 57 
 58 function iterator(arr) {
 59     var i = 0;
 60     return function() {
 61         return arr[i++];
 62     };
 63 }
 64 var next = iterator(arr1);
 65 console.log(next());
 66 console.log(next());
 67 console.log(next());
 68 console.log(next());
 69 console.log(next());
 70 
 71 // *******************************************************************
 72 // 迭代器的第二种形式
 73 function iterator2() {
 74     var arr2 = [];
 75     var i;
 76     // 每次循环时自调用function(x),返回function(){return x};
 77     for (i = 0; i < 3; i++) {
 78         arr2[i] = (function(x) {
 79             return function() {
 80                 return x;
 81             };
 82         })(i);
 83     }
 84     return arr2;
 85 }
 86 // 在这里next2是一个数组,数组的内容是function(){return x;};
 87 var next2 = iterator2();
 88 console.log(next2);
 89 // next2[0]执行return x;
 90 console.log(next2[0]());
 91 console.log(next2[1]());
 92 console.log(next2[2]());
 93 
 94 // *******************************************************************
 95 // 迭代器的第三种形式
 96 function iterator3() {
 97     // 闭包函数
 98     function test3(x) {
 99         return function() {
100             return x * 10;
101         }
102     }
103     var arr3 = [];
104     var i;
105     for (i = 0; i < 3; i++) {
106         // 每次循环时调用闭包函数赋给a[i];
107         arr3[i] = test3(i);
108     }
109     return arr3;
110 }
111 var next3 = iterator3();
112 console.log(next3);
113 console.log(next3[0]());
114 console.log(next3[1]());
115 console.log(next3[2]());