[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行。这使得富有表现力的高阶函数抽象如map和forEach成为可能。它也是js异步I/O方法的核心。与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能。
程序员面临一个选择:应该将代码表示为函数还是字符串?
毫无疑问,应该将代码表示为函数。字符串表示代码不够灵活的一个重要原因是:它们不是闭包。
闭包回顾
看下面这个图
js的函数值包含了比调用它们时执行所需要的代码还要多的信息。而且js函数值还在内部存储它们可能会引用的定义在其封闭作用域的变量。那些在其所涵盖的作用域内跟踪变量的函数被称为闭包。
详细的信息到之前《[Effective JavaScript 笔记] 第11条:熟练掌握闭包》查看
字符串封装代码
假设有一个简单的多次重复用户提供的动作的函数。
function repeat(n,action){
for(var i=0;i<n;i++){
eval(action);
}
}
该函数在全局作用域会不作得很好,因为eval函数会将出现的字符串中的所有变量引用作为全局变量来解释。例如,一个测试函数基准执行速度的脚本可能恰好使用全局的start和end变量来存储时间。
var start=[],end=[],timings=[];
repeat(1000,"start.push(Date.now());f();end.push(Date.now())");
for(var i=0,n=start.length;i<n;i++){
timings[i]=end[i]-start[i];
}
但脚本很脆弱。如果我们简单地将代码移动到一个函数中,那么start和end变量将不再是全局变量。
function benchmark(){
var start=[],end=[],timings=[];
repeat(1000,"start.push(Date.now());f();end.push(Date.now())");
for(var i=0,n=start.length;i<n;i++){
timings[i]=end[i]-start[i];
}
return timings;
}
这个时候repeat函数并不能访问benchmark函数的内部变量start,end。还是在全局空间查找start,end变量,如果没有还是较好的情况,可以根据错误提示,完成错误定位。如果这个时候全局中恰好有start,end变量,这个时候就会对全局变量进行修改,产生的行为无法进行预测。
闭包封装代码
还是使用上面的例子,但这一些我们使用闭包来对代码进行处理。
改写repeat函数,参数action是一个函数,而不是字符串
function repeat(n,action){
for(var i=0;i<n;i++){
action();
}
}
改写benchmark函数,脚本能安全地引用闭包中的局部变量start,end,该闭包以repeat函数的回调函数传递进来。
function benchmark(){
var start=[],end=[],timings=[];
repeat(1000,function(){
start.push(Date.now());
f();
end.push(Date.now());
});
for(var i=0,n=start.length;i<n;i++){
timings[i]=end[i]-start[i];
}
return timings;
}
eval函数的另一个问题是,通常一些高性能的引擎难优化字符串中的代码,因为编译器能不能尽可能早地获得源代码来及时 优化代码。函数表达式在其代码出现的同时就能被编译,这使得它更适合标准化编译。
其它eval相关内容可查看:
《[Effective JavaScript 笔记]第16条:避免使用eval创建局部变量》
《[Effective JavaScript 笔记]第17条:间接调用eval函数优于直接调用》
提示
当将字符串传递给eval函数以执行它们的API时,绝不要在字符串中包含局部变量引用
接受函数调用的API优于使用eval函数执行字符串的API
附录:代码完整版
把上面的代码整理一下,生成一个可以测试任何函数执行时间的代码
function repeat(n,action){
for(var i=0;i<n;i++){
action();
}
}
function benchmark(n,fn){
var start=[],end=[],timings=[];
repeat(n,function(){
start.push(Date.now());
fn();
end.push(Date.now());
});
for(var i=0,n=start.length;i<n;i++){
timings[i]=end[i]-start[i];
}
return timings;
}
//测试代码function concatString(a,b){
return a+b;
}
benchmark(10000,function(){concatString('1','2');});//常规调用
benchmark(10000,concatString.bind(null,'1','2'));//利于bind方法来产生新函数
[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码的更多相关文章
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记] 第11条:熟练掌握闭包
理解闭包三个基本的事实 第一个事实:js允许你引用在当前函数以外定义的变量. function makeSandwich(){ var magicIngredient=”peanut butter”; ...
- [Effective JavaScript 笔记]第35条:使用闭包存储私有数据
js的对象系统并没有特别鼓励或强制信息隐藏.所有的属性名都是一个字符串,任意一个程序都可以简单地通过访问属性名来获取相应的对象属性.例如,for...in循环.ES5的Object.keys()和Ob ...
- [Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑
构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.t ...
- [Effective JavaScript 笔记]第46条:使用数组而不要使用字典来存储有序集合
对象属性无序性 js对象是一个无序属性集合. var obj={}; obj.a=10; obj.b=30; 属性a和属性b并没有谁前谁后之说.for...in循环,先输出哪个属性都有可能.获取和设置 ...
- [Effective JavaScript 笔记]第50条:迭代方法优于循环
"懒"程序员才是好程序员.复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改.这会使人重复发明轮子,而且在别人 ...
- [Effective JavaScript 笔记]第62条:在异步序列中使用嵌套或命名的回调函数
异步程序的操作顺序 61条讲述了异步API如何执行潜在的代价高昂的I/O操作,而不阻塞应用程序继续处理其他输入.理解异步程序的操作顺序刚开始有点混乱.例如,下面的代码会在打印"finishe ...
随机推荐
- js验证身份证号
/* * 身份证检测(格式.地区.生日.年龄范围) * code:检测字符串 rangeAge:年龄范围[格式为:25-55] * 返回值 0:为空 ,不为0则验证不通过 */ : : : : : : ...
- UEditor编辑文章出现多余空行问题的解决办法
网站后台管理编辑文章以后,保存.再次打开编辑是文章前后多出多余的空行.一直以为是编辑器有问题,也没在意,但是自己编辑文章多了,感觉太麻烦了.想一定可以解决这个问题.百度一下果然找到原因.原来是加载编辑 ...
- Bootstrap系列 -- 16. 文本域textarea
文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...
- C# ArcEngine创建内存图层(转载)
C#+Arcengine---创建内存图层 分类:技术文档 2009-12-11 14:43阅读(1498)评论(0) #region 在内存中创建图层 /// <summary& ...
- [USACO2006][poj3182]The Grove(巧妙的BFS)
题目:http://poj.org/problem?id=3182 题意:一个棋盘中间有一个联通块,给你一个起点让你从起点开始绕联通块外围一圈并回到起点,求最小步数. 分析: 首先根据数据的范围比较小 ...
- Nginx下用webbench进行压力测试
在运维工作中,压力测试是一项非常重要的工作.比如在一个网站上线之前,能承受多大访问量.在大访问量情况下性能怎样,这些数据指标好坏将会直接影响用户体验. 但是,在压力测试中存在一个共性,那就是压力测试的 ...
- 团队项目作业第二项:利用NABCD模型进行竞争性需求分析
项目需求分析与建议--NABCD模型(王鲁跃负责) N (Need 需求) 对于现在的学生来说,我们认为打字是很重要的.不管在什么方面都需要进行电脑打字,例如文员.QQ.MSN.制作,论文等等,都需要 ...
- 第三次作业——将排课Excel导入系统
031302322 031302316 将教师排课表导入系统 使用powerdesigner设计数据库表格 设计概念模型 打开new -> Conceptual Data Model创建概念模型 ...
- grunt使用watch和livereload的Gruntfile.js的配置
周末在家看angularJS, 用grunt的livereload的自动刷新, 搞了大半天, 现在把配置贴出来, 免得以后忘记了, 只要按照配置一步步弄是没有问题的; 开始的准备的环境安装是: (1) ...
- TS
//html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...