JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染


Posted in Javascript onNovember 16, 2010

如代码块

if (true) { 
int i = 100; 
} 
print(i); //错误,变量i没有声明

如上面例子所示,代码块外的函数是无法访问i变量的。
但在javaScript里,情况则完全不同。
if (true) { 
var i = 100; 
} 
alert(i); //弹出框并显示100

很多现代语言都推荐尽可能迟地声明变量,但在Javascript里这是一个最糟糕的建议。由于缺少块级作用域,最好在函数体的顶部声明函数中可能用到的所有变量。

闭包特性:
虽然缺少块级作用域,但是函数的作用域还是存在的。
这种作用域有一个好处,就是内部函数可以访问定义它们的外部函数的参数和变量(除了this和argument)。
利用这种特性,则可以这样来设计代码。

var bankAccount = function () { 
var value = 0; 
return { 
deposit: function (inc) { 
value += inc; 
}, 
getValue: function (){ 
return value; 
} 
} 
} 

var myAccount = bankAccount(); //新开一个银行账户 
myAccount.deposit(1000); //存1000块进去 
alert(myAccount.getValue()); //should alert(1000);

value由于在bankAccount这个function里,外部无法对它进行直接操作,必须通过bankAccount function给他返回的对象来进行操作,通过这样来实现C#和java里的private的字段。

减缓全局变量污染全局空间:利用函数的作用域,我们在写js库的时候可以减少跟其他库冲突。

(function () { 
var hello = 'Hello World.'; 
})(); 
alert(hello); //error: hello no exist.

这里的语法很有点诡异,主要思想是定义一个匿名方法,并且马上执行。由于function开头这个litertal会被解释作为函数定义,这里加上了一对括号包住它,然后再用一对括号表示调用此函数。外部的alert访问不到在函数内部定义的hello。

陷阱一:var的陷阱

“减缓全局变量污染全局空间”的例子改成

(function () { 
hello = 'Hello World.'; //remove var 
})(); 
alert(hello); //alert ('Hello World.');

当变量hello没有用var显式声明时,hello成为了一个全局变量!!

虽然利用这个特性,咱们可以提供一个对外接口,但不建议这样做。

(function () { 
var hello = 'Hello World.'; 
sayHello = function () { //不建议采用这种方式来提供接口,看起来很不明显。 
alert(hello); 
} 
})(); 
sayHello();

可以改进为
(function (window) { 
var hello = 'Hello World.'; 
window.$ = { 
sayHello: function () { 
alert(hello); 
} 
}; 
})(window); 
$.sayHello(); //看起来像jQuery那么酷

var obj = (function () { 
var hello = 'Hello World.'; 
return { 
sayHello: function () { 
alert(hello); 
} 
}; 
})(); 
obj.sayHello();

陷阱二: 闭包的陷阱

(function () { //函数a 
var arr = []; 
  var i = 0; 
var j; 
for ( ; i < 3; i++) { 
arr.push(function () { //函数b 
alert(i * 10); 
}); 
} 
for (j in arr) { 
arr[j](); 
} 
})();

原以为函数数组arr里各个函数执行后,会弹出0,10,20,但是结果不是如此。结果是弹出30,30,30。
函数b访问的不是当时的 i的值, 而是直接访问变量i(用于都是取i最新的值)。
原因是函数b是函数a的内部函数,变量i对函数b是可见的,函数b每次都从i处获取最新的值。

这次改成:

(function () { //函数a 
var arr = []; 
var i = 0; 
  var j; 
for ( ; i < 3; i++) { 
arr.push((function (anotherI) { //函数m 
return function () { //函数b 
alert(anotherI * 10); 
} 
})(i)); // 此处为(function b(anotherI) {})(i) 
} 
for (j in arr) { 
arr[j](); 
} 
})();

这次执行后,终于弹出0,10,20。这是为什么呢。

函数b访问的是anotherI(当时的i的值),而不是直接访问变量i。
每次在arr.push前,都会定义一个新匿名的函数m。本例中定义了3个匿名函数m0,m1,m2,每当被调用后,他们的anotherI都得到当前i的值。每个m函数执行后都返回一个b函数。b0在m0里,b1在m1里,b2在m2里。b0只能访问m0的anotherI(为0),而b0访问不了m1的anotherI,因为m0和m1为不同的函数。

Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
Java中Timer的用法详解
Oct 21 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 #Javascript
javascript Array对象基础知识小结
Nov 16 #Javascript
纯js实现背景图片切换效果代码
Nov 14 #Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 #Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 #Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 #Javascript
javascript 学习笔记(onchange等)
Nov 14 #Javascript
You might like
PHP 采集心得技巧
2009/05/15 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
python字符类型的一些方法小结
2016/05/16 Python
spyder常用快捷键(分享)
2017/07/19 Python
python自动裁剪图像代码分享
2017/11/25 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
Python中字符串与编码示例代码
2019/05/20 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
python向图片里添加文字
2019/11/26 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python2及Python3如何实现兼容切换
2020/09/01 Python
Django多个app urls配置代码实例
2020/11/26 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
自荐书模板
2013/12/15 职场文书
项目管理计划书
2014/01/09 职场文书
考试作弊检讨书
2015/01/27 职场文书
研究生个人学年总结
2015/02/14 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP