[读书笔记]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 闭包(Closures)的更多相关文章
- 《Javascript高级程序设计》读书笔记之闭包
闭包 function createComparisonFunction(propertyName) { return function (object1, object2) { var value1 ...
- 读书笔记-JavaScript面向对象编程(一)
PDF下载链接: http://pan.baidu.com/s/1eSDSTVW 密码: 75jr 第1章 引言 1.1 回顾历史 1.2 变革之风 1.3 分析现状 1.4 展望未来 1.5 面向对 ...
- JavaScript语言精粹读书笔记 - JavaScript函数
JavaScript是披着C族语言外衣的LISP,除了词法上与C族语言相似以外,其他几乎没有相似之处. JavaScript 函数: 函数包含一组语句,他们是JavaScript的基础模块单元,用于代 ...
- [读书笔记]javascript语言精粹'
人比较笨,以前只做项目,案例,然而一些javascript的很多理论不知道该怎么描述,所以最近开启一波读书之旅: 标识符 1.定义 标识符以字母开头,可能后面跟上一个或多个字母.数字或者下划线. 2. ...
- 读书笔记-JavaScript面向对象编程(三)
第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM 7.3.1 window对象再探(所以JavaSc ...
- 《JavaScript权威指南》读书笔记——JavaScript核心
前言 这本由David Flanagan著作,并由淘宝前端团队译的<JavaScript权威指南>,也就是我们俗称的“犀牛书”,算是JS界公认的“圣经”了.本书较厚(有1004页),读起来 ...
- 昼猫笔记 JavaScript -- 闭包
本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...
- 读书笔记-----javascript基本数据类型
由于js基础差, 记性也不好,准备一边读书一边做记录,希望这样能加深一下记忆 /* 第一天 */ javascript 基本数据类型 js一共只有五种数据类型 Undefined, Nu ...
- 读书笔记-JavaScript中的全局对象
对于任何JavaScript程序,当程序开始运行时,JavaScript解释器都会初始化一个全局对象以供程序使用.这个JavaScript自身提供的全局对象的功能包括: 1.全局对象拥有一些常用的属性 ...
随机推荐
- Netty4详解三:Netty架构设计(转)
http://blog.csdn.net/suifeng3051/article/details/28861883?utm_source=tuicool&utm_medium=referral ...
- 转: ios学习入门进阶
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:利炳根链接:https://www.zhihu.com/question/19627420/answer/45962351来源 ...
- SpringMVC整合quartz,实现定时任务
<dependency> <groupId>org.quartz-scheduler</groupId> <artifactId& ...
- 游戏AI的综合设计
原地址:http://www.cnblogs.com/cocoaleaves/archive/2009/03/23/1419346.html 学校的MSTC要出杂志,第一期做游戏专题,我写了一下AI, ...
- 后缀数组suffix array
倍增算法,时间复杂度O(nlogn) sa从小到大保存相对大小的下标 理解LSD,x数组,sa数组 char s[maxn]; int sa[maxn],t[maxn],t2[maxn],c[maxn ...
- hibernate 继承映射关系( JOINED)
一个主表,其他的表每个都有自己的表来装填自己特有的部分,共同的部分就放在主表中. package com.bjsxt.hibernate; import javax.persistence.Ent ...
- 压测过程中,CPU和内存占用率很高,案例简单分析
Q: 最近公司测试一个接口,数据库采用Mongo 并发策略:并发400个用户,每3秒加载5个用户,持续运行30分钟 数据量:8000条左右 压测结果发现: TPS始终在5左右 ...
- 8.1.1 Service的生命周期
2010-06-21 16:57 李宁 中国水利水电出版社 字号:T | T <Android/OPhone开发完全讲义>第8章Android服务,本章主要介绍了Android系统 中的服 ...
- 微信支付和微信支付通知基于sdk的说明
前提是,有微信服务号(必须开通了支付功能,也就是说有了商户后台) (注意商户后台 安全目录 的设置,不然即使你写的没错误,也调用不成功) 公众号h5页面写法: (购物车提交--我们上一步已经生成了订 ...
- Android 使用handler实现线程间发送消息 (主线程 与 子线程之间)、(子线程 与 子线程之间)
keyword:Android 使用handler实现线程间发送消息 (主线程 与 子线程之间).(子线程 与 子线程之间) 相信大家平时都有使用到异步线程往主线程(UI线程)发送消息的情况. 本文主 ...