[读书笔记]JavaScript 闭包(Closures)

1. 什么是闭包?

参考MDN

2. 闭包的使用示例

2.1 示例1

     <div>1</div>
<div>2</div>
<div>3</div>
<script>
var nodes = document.getElementsByTagName('div');
for (var i = 0, len = nodes.length; i < len; i++) {
/* 注意这里 */
(function (i) { nodes[i].onclick = function () {
console.log(i + 1);
}; })(i); };
</script>

2.2 延伸

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

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

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

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

3.1 封装变量

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

 var mult = (function () {
var cache = {}, // “制表法”缓存结果集,避免重复的运算
// 封闭calculate 函数
calculate = function () {
var a = 1;
for (var i = 0, l = arguments.length; i < l; i++) {
a = a * arguments[i];
} return a;
}; return function () {
var args = Array.prototype.join.call(arguments, ',');
if (args in cache) {
return cache[args];
} return cache[args] = calculate.apply(null, arguments);
};
})();

MDN的例子用闭包模拟私有方法,也是模块模式的基础。

3.2 延续局部变量的寿命

 var report = function( src ){
var img = new Image();
img.src = src;
};
report( 'www.xxx.com/stat' );

有问题的代码

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

 var report = (function () {
var imgs = []; return function (src) {
var img = new Image();
imgs.push(img);
img.src = src;
}
})(); report('www.xxx.com/stat');

3.3 闭包和面向对象设计

  // 闭包写法
var extent = function () {
var value = 0;
return {
call: function () {
value++;
console.log(value);
}
};
};
var extent1 = extent(),
extent2 = extent();
extent1.call(); // 输出:1
extent1.call(); // 输出:2
extent1.call(); // 输出:3 extent2.call(); // 输出:1 var Extent = function () {
this.value = 0;
}; // 面向对象的写法
Extent.prototype.call = function () {
this.value++;
console.info(this.value);
};
var myExtent1 = new Extent();
myExtent1.call();
myExtent1.call();
myExtent1.call(); var myExtent2 = new Extent();
myExtent2.call();

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

上一篇:《JavaScript权威指南》读书笔记——JavaScript核心


下一篇:“理了么”软件特点NABCD个人分析