6_闭包.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <ul>
  10. <li>1</li>
  11. <li>2</li>
  12. <li>3</li>
  13. <li>4</li>
  14. <li>5</li>
  15. </ul>
  16. <script>
  17. var aLi = document.getElementsByTagName("li");
  18. for(var i=0;i<aLi.length;i++){
  19. // 函数的参数也属于局部变量
  20. (function(i){
  21. aLi[i].onclick = function(){
  22. console.log(i)
  23. }
  24. })(i);
  25. }
  26. // for(var i=0;i<aLi.length;i++){
  27. // (function(){
  28. // var val = i;
  29. // aLi[i].onclick = function(){
  30. // console.log(val)
  31. // }
  32. // })();
  33. // }
  34. // for(var i=0;i<aLi.length;i++){
  35. // function fn(){
  36. // var val = i;
  37. // aLi[i].onclick = function(){
  38. // console.log(val)
  39. // }
  40. // }
  41. // fn();
  42. // }
  43. // 闭包
  44. // 函数嵌套函数 内部函数可以使用外部函数的变量 且外部的局部变量不会释放
  45. // function fn(){
  46. // // 局部变量 仅在函数内生效 外部不能访问
  47. // // 在函数内定义的变量为局部变量
  48. // var a = 10;
  49. // }
  50. // fn();
  51. // console.log(a);
  52. // function fn(){
  53. // var a = 1;
  54. // ++a;
  55. // console.log(a);
  56. // }
  57. // fn();
  58. // fn();
  59. // function fn(){
  60. // var a = 1;
  61. // function fn2(){
  62. // a++;
  63. // console.log(a);
  64. // }
  65. // fn2();
  66. // fn2();
  67. // }
  68. // fn();
  69. // js 有一种垃圾回收机制
  70. // 当一个函数执行完毕后 函数内的变量会被销毁
  71. // 但是如果函数内嵌套了函数 那么外部函数的变量不会被销毁
  72. // 这就是闭包
  73. // 定义私有变量 不被别人使用 可以使用闭包
  74. // function fn(){
  75. // var a = 10;
  76. // function fn2(v){
  77. // a = a+v;
  78. // console.log(a);
  79. // }
  80. // return fn2;
  81. // }
  82. // var f = fn();
  83. // // console.log(f);
  84. // f(1);
  85. // f(2);
  86. // f(10);
  87. // console.log(a)
  88. </script>
  89. </body>
  90. </html>