博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[读书笔记]JavaScript 闭包(Closures)
阅读量:6442 次
发布时间:2019-06-23

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

1. 什么是闭包?

参考。

2. 闭包的使用示例

2.1 示例1

1     
1
2
2
3
3
4

2.2 延伸

1 var Type = {};2 for (var i = 0, type; type = ['Number', 'String', 'Boolean', 'Array', 'Function',3     'RegExp', 'Date', 'Undefined', 'Null','Error'][i++];) {4     (function (type) {5         Type['is' + type] = function (obj) {6             return Object.prototype.toString.call(obj) === '[object ' + type + ']';7         }8     })(type);9 };

说明:对于本例来说仅能判断类型,并不能保证类型的合法性,如判断Date如下所示:

1 function isValidDate(d) {2     if (Object.prototype.toString.call(d) !== "[object Date]") {3         return false;4     }5     return !isNaN(d.getTime());6 }

3. 闭包的更多作用及示例

3.1 封装变量

在闭包块中实现“私有变量”

1 var mult = (function () { 2     var cache = {}, // “制表法”缓存结果集,避免重复的运算 3         // 封闭calculate 函数 4         calculate = function () {  5         var a = 1; 6         for (var i = 0, l = arguments.length; i < l; i++) { 7             a = a * arguments[i]; 8         } 9 10         return a;11     };12 13     return function () {14         var args = Array.prototype.join.call(arguments, ',');15         if (args in cache) {16             return cache[args];17         }18 19         return cache[args] = calculate.apply(null, arguments);20     };21 })();

 MDN的例子,也是模块模式的基础。

3.2 延续局部变量的寿命

1 var report = function( src ){2 var img = new Image();3 img.src = src;4 };5 report( 'www.xxx.com/stat' );
有问题的代码

为了解决函数局部变量在函数执行后立即被销毁的问题,可以用闭包来保存对局部变量的引用以达到延续局部变量生命周期。

1 var report = (function () { 2     var imgs = []; 3  4     return function (src) { 5         var img = new Image(); 6         imgs.push(img); 7         img.src = src; 8     } 9 })();10 11 report('www.xxx.com/stat');

3.3 闭包和面向对象设计

1  // 闭包写法 2  var extent = function () { 3      var value = 0; 4      return { 5          call: function () { 6              value++; 7              console.log(value); 8          } 9      };10  };11  var extent1 = extent(),12      extent2 = extent();13  extent1.call(); // 输出:114  extent1.call(); // 输出:215  extent1.call(); // 输出:316 17  extent2.call(); // 输出:118 19  var Extent = function () {20      this.value = 0;21  };22 23  // 面向对象的写法 24  Extent.prototype.call = function () {25      this.value++;26      console.info(this.value);27  };28  var myExtent1 = new Extent();29  myExtent1.call();30  myExtent1.call();31  myExtent1.call();32 33  var myExtent2 = new Extent();34  myExtent2.call();

说明:本文代码来自《JavaScript设计模式与开发实践》和网络。

转载于:https://www.cnblogs.com/January/p/5427385.html

你可能感兴趣的文章
POJ-2456 Aggressive cows---最大化最小值(也就是求最大值)
查看>>
解决WinSock中发送、接收多包问题
查看>>
CMDB资产管理系统开发:需求分析
查看>>
WebKit源代码里的RefPtr智能指针
查看>>
前端异常采集
查看>>
hadoop day 5
查看>>
mount什么意思
查看>>
c++-链表的回文结构
查看>>
XML模块
查看>>
编写自动化测试用例的原则
查看>>
poj2955(区间dp)
查看>>
突然多了个机会…纠结了一个星期。
查看>>
SAP QUERY
查看>>
MIGO收货 BAPI :BAPI_GOODSMVT_CREATE BADI增强
查看>>
【windows中常用的服务概览和总结】
查看>>
3.插入排序--直接插入排序
查看>>
UVA1584 UVALive3225 Circular Sequence
查看>>
StringBuffer
查看>>
Per-Pixel Lighting
查看>>
外部中断
查看>>