diff --git a/README.markdown b/README.markdown index 1bdab2b..f91e753 100644 --- a/README.markdown +++ b/README.markdown @@ -5,111 +5,111 @@ **“JavaScript patterns”中译本** - 《JavaScript 模式》 - 作者：[Stoyan Stefanov](http://www.phpied.com/) -- 翻译：[拔赤](http://jayli.github.com/) +- 翻译：[拔赤](http://jayli.github.com/)、[goddyzhao](http://goddyzhao.me)、[TooBug](http://www.toobug.net) 偷懒是程序员的优良品质，模式则是先人们总结的偷懒招式。Stoyan Stefanov 的这本书，从 JavaScript 的实际使用场景出发，提炼了不少可以让前端们偷懒的实用招式。模式的探索、创新，将永远是程序员自我提升的一条修炼之道。值得一读。 # 目录 -## [第一章 概述](chapter1.markdown) - -- [模式](chapter1.markdown) -- [JavaScript：概念](chapter1.markdown#a2) - - [面向对象](chapter1.markdown#a3) - - [无类](chapter1.markdown#a4) - - [原型](chapter1.markdown#a5) - - [运行环境](chapter1.markdown#a6) -- [ECMAScript 5](chapter1.markdown#a7) -- [JSLint](chapter1.markdown#a8) -- [控制台工具](chapter1.markdown#a9) - -## [第二章 高质量JavaScript基本要点](chapter2.markdown) - -- [编写可维护的代码](chapter2.markdown#a2) -- [减少全局对象](chapter2.markdown#a3) - - [全局对象带来的困扰](chapter2.markdown#a4) - - [忘记var时的副作用](chapter2.markdown#a5) - - [访问全局对象](chapter2.markdown#a6) - - [单 var 模式](chapter2.markdown#a7) - - [声明提前：分散的 var 带来的问题](chapter2.markdown#a8) -- [for 循环](chapter2.markdown#a9) -- [for-in 循环](chapter2.markdown#a10) -- [（不）扩充内置原型](chapter2.markdown#a11) -- [switch 模式](chapter2.markdown#a12) -- [避免隐式类型转换](chapter2.markdown#a13) - - [避免使用 eval()](chapter2.markdown#a14) -- [使用parseInt()进行数字转换](chapter2.markdown#a15) -- [编码风格](chapter2.markdown#a16) - - [缩进](chapter2.markdown#a17) - - [花括号](chapter2.markdown#a18) - - [左花括号的放置](chapter2.markdown#a19) - - [空格](chapter2.markdown#a20) -- [命名规范](chapter2.markdown#a21) - - [构造器命名中的大小写](chapter2.markdown#a22) - - [单词分隔](chapter2.markdown#a23) - - [其他命名风格](chapter2.markdown#a24) -- [书写注释](chapter2.markdown#a25) -- [书写API文档](chapter2.markdown#a26) - - [一个例子：YUIDoc](chapter2.markdown#a27) -- [编写易读的代码](chapter2.markdown#a28) -- [相互评审](chapter2.markdown#a29) -- [生产环境中的代码压缩（Minify）](chapter2.markdown#a30) -- [运行JSLint](chapter2.markdown#a31) -- [小结](chapter2.markdown#a32) - -## [第三章 直接量和构造函数](chapter3.markdown) - -- [对象直接量](chapter3.markdown#a2) - - [对象直接量语法](chapter3.markdown#a3) - - [通过构造函数创建对象](chapter3.markdown#a4) - - [获得对象的构造器](chapter3.markdown#a5) -- [自定义构造函数](chapter3.markdown#a6) - - [构造函数的返回值](chapter3.markdown#a7) -- [强制使用new的模式](chapter3.markdown#a8) - - [命名约定](chapter3.markdown#a9) - - [使用that](chapter3.markdown#a10) - - [调用自身的构造函数](chapter3.markdown#a11) -- [数组直接量](chapter3.markdown#a12) - - [数组直接量语法](chapter3.markdown#a13) - - [有意思的数组构造器](chapter3.markdown#a14) - - [检查是不是数组](chapter3.markdown#a15) -- [JSON](chapter3.markdown#a16) - - [使用JSON](chapter3.markdown#a17) -- [正则表达式直接量](chapter3.markdown#a18) - - [正则表达式直接量语法](chapter3.markdown#a19) -- [原始值的包装对象](chapter3.markdown#a20) -- [Error对象](chapter3.markdown#a21) -- [小结](chapter3.markdown#a22) - -## [第四章 函数](chapter4.markdown#a) - -- [背景知识](chapter4.markdown#a) - - [术语释义](chapter4.markdown#a) - - [声明 vs 表达式：命名与提前](chapter4.markdown#a) - - [函数的name属性](chapter4.markdown#a) - - [函数提前](chapter4.markdown#a) -- [回调模式](chapter4.markdown#a) - - [一个回调的例子](chapter4.markdown#a) - - [回调和作用域](chapter4.markdown#a) - - [异步事件监听](chapter4.markdown#a) - - [超时](chapter4.markdown#a) - - [库中的回调](chapter4.markdown#a) -- [返回函数](chapter4.markdown#a) -- [自定义函数](chapter4.markdown#a) -- 立即执行的函数 - - 立即执行的函数的参数 - - 立即执行的函数的返回值 - - 好处和用法 -- 立即初始化的对象 -- 启动时间程序 -- 函数属性——一种备忘录模式 -- 对象的配置 -- 柯里化 （Curry） - - 函数应用 - - 部分应用 - - 柯里化 - - 什么时候使用柯里化 -- 小节 +## [第一章 概述](javascript.patterns/blob/master/chapter1.markdown) + +- [模式](javascript.patterns/blob/master/chapter1.markdown) +- [JavaScript：概念](javascript.patterns/blob/master/chapter1.markdown#a2) + - [面向对象](javascript.patterns/blob/master/chapter1.markdown#a3) + - [无类](javascript.patterns/blob/master/chapter1.markdown#a4) + - [原型](javascript.patterns/blob/master/chapter1.markdown#a5) + - [运行环境](javascript.patterns/blob/master/chapter1.markdown#a6) +- [ECMAScript 5](javascript.patterns/blob/master/chapter1.markdown#a7) +- [JSLint](javascript.patterns/blob/master/chapter1.markdown#a8) +- [控制台工具](javascript.patterns/blob/master/chapter1.markdown#a9) + +## [第二章 高质量JavaScript基本要点](javascript.patterns/blob/master/chapter2.markdown) + +- [编写可维护的代码](javascript.patterns/blob/master/chapter2.markdown#a2) +- [减少全局对象](javascript.patterns/blob/master/chapter2.markdown#a3) + - [全局对象带来的困扰](javascript.patterns/blob/master/chapter2.markdown#a4) + - [忘记var时的副作用](javascript.patterns/blob/master/chapter2.markdown#a5) + - [访问全局对象](javascript.patterns/blob/master/chapter2.markdown#a6) + - [单 var 模式](javascript.patterns/blob/master/chapter2.markdown#a7) + - [声明提前：分散的 var 带来的问题](javascript.patterns/blob/master/chapter2.markdown#a8) +- [for 循环](javascript.patterns/blob/master/chapter2.markdown#a9) +- [for-in 循环](javascript.patterns/blob/master/chapter2.markdown#a10) +- [（不）扩充内置原型](javascript.patterns/blob/master/chapter2.markdown#a11) +- [switch 模式](javascript.patterns/blob/master/chapter2.markdown#a12) +- [避免隐式类型转换](javascript.patterns/blob/master/chapter2.markdown#a13) + - [避免使用 eval()](javascript.patterns/blob/master/chapter2.markdown#a14) +- [使用parseInt()进行数字转换](javascript.patterns/blob/master/chapter2.markdown#a15) +- [编码风格](javascript.patterns/blob/master/chapter2.markdown#a16) + - [缩进](javascript.patterns/blob/master/chapter2.markdown#a17) + - [花括号](javascript.patterns/blob/master/chapter2.markdown#a18) + - [左花括号的放置](javascript.patterns/blob/master/chapter2.markdown#a19) + - [空格](javascript.patterns/blob/master/chapter2.markdown#a20) +- [命名规范](javascript.patterns/blob/master/chapter2.markdown#a21) + - [构造器命名中的大小写](javascript.patterns/blob/master/chapter2.markdown#a22) + - [单词分隔](javascript.patterns/blob/master/chapter2.markdown#a23) + - [其他命名风格](javascript.patterns/blob/master/chapter2.markdown#a24) +- [书写注释](javascript.patterns/blob/master/chapter2.markdown#a25) +- [书写API文档](javascript.patterns/blob/master/chapter2.markdown#a26) + - [一个例子：YUIDoc](javascript.patterns/blob/master/chapter2.markdown#a27) +- [编写易读的代码](javascript.patterns/blob/master/chapter2.markdown#a28) +- [相互评审](javascript.patterns/blob/master/chapter2.markdown#a29) +- [生产环境中的代码压缩（Minify）](javascript.patterns/blob/master/chapter2.markdown#a30) +- [运行JSLint](javascript.patterns/blob/master/chapter2.markdown#a31) +- [小结](javascript.patterns/blob/master/chapter2.markdown#a32) + +## [第三章 直接量和构造函数](javascript.patterns/blob/master/chapter3.markdown) + +- [对象直接量](javascript.patterns/blob/master/chapter3.markdown#a2) + - [对象直接量语法](javascript.patterns/blob/master/chapter3.markdown#a3) + - [通过构造函数创建对象](javascript.patterns/blob/master/chapter3.markdown#a4) + - [获得对象的构造器](javascript.patterns/blob/master/chapter3.markdown#a5) +- [自定义构造函数](javascript.patterns/blob/master/chapter3.markdown#a6) + - [构造函数的返回值](javascript.patterns/blob/master/chapter3.markdown#a7) +- [强制使用new的模式](javascript.patterns/blob/master/chapter3.markdown#a8) + - [命名约定](javascript.patterns/blob/master/chapter3.markdown#a9) + - [使用that](javascript.patterns/blob/master/chapter3.markdown#a10) + - [调用自身的构造函数](javascript.patterns/blob/master/chapter3.markdown#a11) +- [数组直接量](javascript.patterns/blob/master/chapter3.markdown#a12) + - [数组直接量语法](javascript.patterns/blob/master/chapter3.markdown#a13) + - [有意思的数组构造器](javascript.patterns/blob/master/chapter3.markdown#a14) + - [检查是不是数组](javascript.patterns/blob/master/chapter3.markdown#a15) +- [JSON](javascript.patterns/blob/master/chapter3.markdown#a16) + - [使用JSON](javascript.patterns/blob/master/chapter3.markdown#a17) +- [正则表达式直接量](javascript.patterns/blob/master/chapter3.markdown#a18) + - [正则表达式直接量语法](javascript.patterns/blob/master/chapter3.markdown#a19) +- [原始值的包装对象](javascript.patterns/blob/master/chapter3.markdown#a20) +- [Error对象](javascript.patterns/blob/master/chapter3.markdown#a21) +- [小结](javascript.patterns/blob/master/chapter3.markdown#a22) + +## [第四章 函数](javascript.patterns/blob/master/chapter4.markdown) + +- [背景知识](javascript.patterns/blob/master/chapter4.markdown#a2) + - [术语释义](javascript.patterns/blob/master/chapter4.markdown#a3) + - [声明 vs 表达式：命名与提前](javascript.patterns/blob/master/chapter4.markdown#a4) + - [函数的name属性](javascript.patterns/blob/master/chapter4.markdown#a5) + - [函数提前](javascript.patterns/blob/master/chapter4.markdown#a6) +- [回调模式](javascript.patterns/blob/master/chapter4.markdown#a7) + - [一个回调的例子](javascript.patterns/blob/master/chapter4.markdown#a8) + - [回调和作用域](javascript.patterns/blob/master/chapter4.markdown#a9) + - [异步事件监听](javascript.patterns/blob/master/chapter4.markdown#a10) + - [超时](javascript.patterns/blob/master/chapter4.markdown#a11) + - [库中的回调](javascript.patterns/blob/master/chapter4.markdown#a12) +- [返回函数](javascript.patterns/blob/master/chapter4.markdown#a12) +- [自定义函数](javascript.patterns/blob/master/chapter4.markdown#a14) +- [立即执行的函数](javascript.patterns/blob/master/chapter4.markdown#a15) + - [立即执行的函数的参数](javascript.patterns/blob/master/chapter4.markdown#a16) + - [立即执行的函数的返回值](javascript.patterns/blob/master/chapter4.markdown#a17) + - [好处和用法](javascript.patterns/blob/master/chapter4.markdown#a18) +- [立即初始化的对象](javascript.patterns/blob/master/chapter4.markdown#a19) +- [条件初始化](javascript.patterns/blob/master/chapter4.markdown#a20) +- [函数属性——Memoization模式](javascript.patterns/blob/master/chapter4.markdown#a21) +- [配置对象](javascript.patterns/blob/master/chapter4.markdown#a22) +- [柯里化 （Curry）](javascript.patterns/blob/master/chapter4.markdown#a23) + - [函数应用](javascript.patterns/blob/master/chapter4.markdown#a24) + - [部分应用](javascript.patterns/blob/master/chapter4.markdown#a25) + - [柯里化](javascript.patterns/blob/master/chapter4.markdown#a26) + - [什么时候使用柯里化](javascript.patterns/blob/master/chapter4.markdown#a27) +- [小结](javascript.patterns/blob/master/chapter4.markdown#a28) ## 第五章 对象创建模式 diff --git a/chapter4.markdown b/chapter4.markdown index 50c2a81..92c18dd 100644 --- a/chapter4.markdown +++ b/chapter4.markdown @@ -1,3 +1,4 @@ + # 函数 熟练运用函数是JavaScript程序员的必备技能，因为在JavaScript中函数实在是太常用了。它能够完成的任务种类非常之多，而在其他语言中则需要很多特殊的语法支持才能达到这种能力。 @@ -6,6 +7,8 @@ 现在让我们来一起揭秘JavaScript函数，我们首先从一些背景知识开始说起。 + + ## 背景知识 JavaScript的函数具有两个主要特性，正是这两个特性让它们与众不同。第一个特性是，函数是一等对象（first-class object），第二个是函数提供作用域支持。 @@ -30,6 +33,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 函数的第二个重要特性是它能提供作用域支持。在JavaScript中没有块级作用域（译注：在JavaScript1.7中提供了块级作用域部分特性的支持，可以通过let来声明块级作用域内的“局部变量”），也就是说不能通过花括号来创建作用域，JavaScript中只有函数作用域（译注：这里作者的表述只针对函数而言，此外JavaScript还有全局作用域）。在函数内所有通过var声明的变量都是局部变量，在函数外部是不可见的。刚才所指花括号无法提供作用域支持的意思是说，如果在if条件句内、或在for或while循环体内用var定义了变量，这个变量并不是属于if语句或for（while）循环的局部变量，而是属于它所在的函数。如果不在任何函数内部，它会成为全局变量。在第二章里提到我们要减少对全局命名空间的污染，那么使用函数则是控制变量的作用域的不二之选。 + ### 术语释义 首先我们先简单讨论下创建函数相关的术语，因为精确无歧义的术语约定和我们所讨论的各种模式一样重要。 @@ -66,7 +70,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 >另外我们经常看到“函数直接量”。它用来表示函数表达式或带命名的函数表达式。由于这个术语是有歧义的，所以最好不要用它。 - + ### 声明 vs 表达式：命名与提前 那么，到底应该用哪个呢？函数声明还是函数表达式？在不能使用函数声明语法的场景下，只能使用函数表达式了。下面这个例子中，我们给函数传入了另一个函数对象作为参数，以及给对象定义方法: @@ -102,6 +106,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 return bar; } + ### 函数的name属性 选择函数定义模式的另一个考虑是只读属性name的可用性。尽管标准规范中并未规定，但很多运行环境都实现了name属性，在函数声明和带有名字的函数表达式中是有name的属性定义的。在匿名函数表达式中，则不一定有定义，这个是和实现相关的，在IE中是无定义的，在Firefox和Safari中是有定义的，但是值为空字符串。 @@ -120,6 +125,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 >我们可以将一个带名字的函数表达式赋值给变量，变量名和函数名不同，这在技术上是可行的。比如：`var foo = function bar(){};`。然而，这种用法的行为在浏览器中的兼容性不佳（特别是IE中），因此并不推荐大家使用这种模式。 + ### 函数提前 通过前面的讲解，你可能以为函数声明和带名字的函数表达式是完全等价的。事实上不是这样，主要区别在于“声明提前”的行为。 @@ -170,6 +176,8 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 - 函数是对象 - 函数提供局部变量作用域 + + ## 回调模式 函数是对象，也就意味着函数可以当作参数传入另外一个函数中。当你给函数writeCode()传入一个函数参数introduceBugs()，在某个时刻writeCode()执行了（或调用了）introduceBugs()。在这种情况下，我们说introduceBugs()是一个“回调函数”，简称“回调”： @@ -188,6 +196,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 注意introduceBugs()是如何作为参数传入writeCode()的，当作参数的函数不带括号。括号的意思是执行函数，而这里我们希望传入一个引用，让writeCode()在合适的时机执行它（调用它）。 + ### 一个回调的例子 我们从一个例子开始，首先介绍无回调的情况，然后在作修改。假设你有一个通用的函数，用来完成某种复杂的逻辑并返回一大段数据。假设我们用findNodes()来命名这个通用函数，这个函数用来对DOM树进行遍历，并返回我所感兴趣的页面节点： @@ -262,6 +271,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 node.style.display = "block"; }); + ### 回调和作用域 在上一个例子中，执行回调函数的写法是： @@ -329,6 +339,7 @@ JavaScript的函数具有两个主要特性，正是这两个特性让它们与 // ... }; + ### 异步事件监听 JavaScript中的回调模式已经是我们的家常便饭了，比如，如果你给网页中的元素绑定事件，则需要提供回调函数的引用，以便事件发生时能调用到它。这里有一个简单的例子，我们将console.log()作为回调函数绑定了document的点击事件： @@ -339,6 +350,7 @@ JavaScript中的回调模式已经是我们的家常便饭了，比如，如果 “不要打电话给我，我会打给你”，这是好莱坞很有名的一句话，很多电影都有这句台词。电影中的主角不可能同时应答很多个电话呼叫。在JavaScript的异步事件模型中也是同样的道理。电影中是留下电话号码，JavaScript中是提供一个回调函数，当时机成熟时就触发回调。有时甚至提供了很多回调，有些回调压根是没用的，但由于这个事件可能永远不会发生，因此这些回调的逻辑也不会执行。比如，假设你从此不再用“鼠标点击”，那么你之前绑定的鼠标点击的回调函数则永远也不会执行。 + ### 超时 另外一个最常用的回调模式是在调用超时函数时，超时函数是浏览器window对象的方法，共有两个：setTimeout()和setInterval()。这两个方法的参数都是回调函数。 @@ -350,10 +362,13 @@ JavaScript中的回调模式已经是我们的家常便饭了，比如，如果 再次需要注意，函数thePlotThickens是作为变量传入setTimeout的，它不带括号，如果带括号的话则立即执行了，这里只是用到这个函数的引用，以便在setTimeout的逻辑中调用到它。也可以传入字符串“thePlotThickens()”，但这是一种反模式，和eval()一样不推荐使用。 + ### 库中的回调 回调模式非常简单，但又很强大。可以随手拈来灵活运用，因此这种模式在库的设计中也非常得宠。库的代码要尽可能的保持通用和重用，而回调模式则可帮助库的作者完成这个目标。你不必预料和实现你所想到的所有情形，因为这会让库变的膨胀而臃肿，而且大多数用户并不需要这些多余的特性支持。相反，你将精力放在核心功能的实现上，提供回调的入口作为“钩子”，可以让库的方法变得可扩展、可定制。 + + ## 返回函数 函数是对象，因此当然可以作为返回值。也就是说，函数不一定非要返回一坨数据，函数可以返回另外一个定制好的函数，或者可以根据输入的不同按需创造另外一个函数。 @@ -386,6 +401,8 @@ JavaScript中的回调模式已经是我们的家常便饭了，比如，如果 next(); // 2 next(); // 3 + + ## 自定义函数 我们动态定义函数，并将函数赋值给变量。如果将你定义的函数赋值给已经存在的函数变量的话，则新函数会覆盖旧函数。这样做的结果是，旧函数的引用就丢弃掉了，变量中所存储的引用值替换成了新的。这样看起来这个变量指代的函数逻辑就发生了变化，或者说函数进行了“重新定义”或“重写”。说起来有些拗口，实际上并不复杂，来看一个例子： @@ -402,7 +419,7 @@ JavaScript中的回调模式已经是我们的家常便饭了，比如，如果 当函数中包含一些初始化操作，并希望这些初始化只执行一次，那么这种模式是非常适合这个场景的。因为能避免的重复执行则尽量避免，函数的一部分可能再也不会执行到。在这个场景中，函数执行一次后就被重写为另外一个函数了。 -使用这种模式可以帮助提高应用的执行效率，因为重新定义的函数执行的更少。 +使用这种模式可以帮助提高应用的执行效率，因为重新定义的函数执行更少的代码。 >这种模式的另外一个名字是“函数的懒惰定义”，因为直到函数执行一次后才重新定义，可以说它是“某个时间点之后才存在”，简称“懒惰定义”。 @@ -435,13 +452,602 @@ JavaScript中的回调模式已经是我们的家常便饭了，比如，如果 // calling as a method spooky.boo(); // "Boo!" spooky.boo(); // "Boo!" - console.log(spooky.boo.property); + console.log(spooky.boo.property); // "properly" - // "properly" // using the self-defined function scareMe(); // Double boo! scareMe(); // Double boo! console.log(scareMe.property); // undefined +从结果来看，当自定义函数被赋值给一个新的变量的时候，这段使用自定义函数的代码的执行结果与我们期望的结果可能并不一样。每当prank()运行的时候，它都弹出“Boo!”。同时它也重写了scareMe()函数，但是prank()自己仍然能够使用之前的定义，包括属性property。在这个函数被作为spooky对象的boo()方法调用的时候，结果也一样。所有的这些调用，在第一次的时候就已经修改了全局的scareMe()的指向，所以当它最终被调用的时候，它的函数体已经被修改为弹出“Double boo”。它也就不能获取到新添加的属性“property”。 + + + +## 立即执行的函数 + +立即执行的函数是一种语法模式，它会使函数在定义后立即执行。看这个例子： + + (function () { + alert('watch out!'); + }()); + +这种模式本质上只是一个在创建后就被执行的函数表达式（具名或者匿名）。“立即执行的函数”这种说法并没有在ECMAScript标准中被定义，但它作为一个名词，有助于我们的描述和讨论。 + +这种模式由以下几个部分组成： + +- 使用函数表达式定义一个函数。（不能使用函数声明。） +- 在最后加入一对括号，这会使函数立即被执行。 +- 把整个函数包裹到一对括号中（只在没有将函数赋值给变量时需要）。 + +下面这种语法也很常见（注意右括号的位置），但是JSLint倾向于第一种： + + (function () { + alert('watch out!'); + })(); + +这种模式很有用，它为我们提供一个作用域的沙箱，可以在执行一些初始化代码的时候使用。设想这样的场景：当页面加载的时候，你需要运行一些代码，比如绑定事件、创建对象等等。所有的这些代码都只需要运行一次，所以没有必要创建一个带有名字的函数。但是这些代码需要一些临时变量，而这些变量在初始化完之后又不会再次用到。显然，把这些变量作为全局变量声明是不合适的。正因为如此，我们才需要立即执行的函数。它可以把你所有的代码包裹到一个作用域里面，而不会暴露任何变量到全局作用域中： + + (function () { + + var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], + today = new Date(), + msg = 'Today is ' + days[today.getDay()] + ', ' + today.getDate(); + + alert(msg); + + }()); // "Today is Fri, 13" + +如果这段代码没有被包裹到立即执行函数中，那么变量days、today、msg都会是全局变量，而这些变量仅仅是由因为初始化而遗留下来的垃圾，没有任何用处。 + + + +### 立即执行的函数的参数 + +立即执行的函数也可以接受参数，看这个例子： + + // prints: + // I met Joe Black on Fri Aug 13 2010 23:26:59 GMT-0800 (PST) + + (function (who, when) { + + console.log("I met " + who + " on " + when); + + }("Joe Black", new Date())); + +通常的做法，会把全局对象当作一个参数传给立即执行的函数，以保证在函数内部也可以访问到全局对象，而不是使用window对象，这样可以使得代码在非浏览器环境中使用时更具可移植性。 + +值得注意的是，一般情况下尽量不要给立即执行的函数传入太多的参数，否则会有一件麻烦的事情，就是你在阅读代码的时候需要频繁地上下滚动代码。 + + +### 立即执行的函数的返回值 + +和其它的函数一样，立即执行的函数也可以返回值，并且这些返回值也可以被赋值给变量： + + var result = (function () { + return 2 + 2; + }()); + +如果省略括号的话也可以达到同样的目的，因为如果需要将返回值赋给变量，那么第一对括号就不是必需的。省略括号的代码是这样子： + + var result = function () { + return 2 + 2; + }(); + +这种写法更简洁，但是同时也容易造成误解。如果有人在阅读代码的时候忽略了最后的一对括号，那么他会以为result指向了一个函数。而事实上result是指向这个函数运行后的返回值，在这个例子中是4。 + +还有一种写法也可以得到同样的结果： + + var result = (function () { + return 2 + 2; + })(); + +前面的例子中，立即执行的函数返回的是一个基本类型的数值。但事实上，除了基本类型以外，一个立即执行的函数可以返回任意类型的值，甚至返回一个函数都可以。你可以利用立即执行的函数的作用域来存储一些私有的数据，这些数据只能在返回的内层函数中被访问。 + +在下面的例子中，立即执行的函数的返回值是一个函数，这个函数会简单地返回res的值，并且它被赋给了变量getResult。而res是一个预先计算好的变量，它被存储在立即执行函数的闭包中： + + var getResult = (function () { + var res = 2 + 2; + return function () { + return res; + }; + }()); + +在定义一个对象的属性的时候也可以使用立即执行的函数。设想一下这样的场景：你需要定义一个对象的属性，这个属性在对象的生命周期中都不会改变，但是在定义之前，你需要做一点额外的工作来得到正确的值。这种情况下你就可以使用立即执行的函数来包裹那些额外的工作，然后将它的返回值作为对象属性的值。下面是一个例子： + + var o = { + message: (function () { + var who = "me", + what = "call"; + return what + " " + who; + }()), + getMsg: function () { + return this.message; + } + }; + + // usage + o.getMsg(); // "call me" + o.message; // "call me" + + +在这个例子中，o.message是一个字符串，而不是一个函数，但是它需要一个函数在脚本载入后来得到这个属性值。 + + +### 好处和用法 + +立即执行的函数应用很广泛。它可以帮助我们做一些不想留下全局变量的工作。所有定义的变量都只是立即执行的函数的本地变量，你完全不用担心临时变量会污染全局对象。 + +> 立即执行的函数还有一些名字，比如“自调用函数”或者“自执行函数”，因为这些函数会在被定义后立即执行自己。 + +这种模式也经常被用到书签代码中，因为书签代码会在任何一个页面运行，所以需要非常苛刻地保持全局命名空间干净。 + +这种模式也可以让你包裹一些独立的特性到一个封闭的模块中。设想你的页面是静态的，在没有JavaScript的时候工作正常，然后，本着渐进增强的精神，你给页面加入了一点增加代码。这时候，你就可以把你的代码（也可以叫“模块”或者“特性”）放到一个立即执行的函数中并且保证页面在有没有它的时候都可以正常工作。然后你就可以加入更多的增强特性，或者对它们进行移除、进行独立测试或者允许用户禁用等等。 + +你可以使用下面的模板定义一段函数代码，我们叫它module1： + + // module1 defined in module1.js + (function () { + + // all the module 1 code ... + + }()); + +套用这个模板，你就可以编写其它的模块。然后在发布到线上的时候，你就可以决定在这个时间节点上哪些特性是可以使用的，然后使用发布脚本将它们打包上线。 + + + +## 立即初始化的对象 + +还有另外一种可以避免污染全局作用域的方法，和前面描述的立即执行的函数相似，叫做“立即初始化的对象”模式。这种模式使用一个带有init()方法的对象来实现，这个方法在对象被创建后立即执行。初始化的工作由init()函数来完成。 + +下面是一个立即初始化的对象模式的例子： + + ({ + // here you can define setting values + // a.k.a. configuration constants + maxwidth: 600, + maxheight: 400, + + // you can also define utility methods + gimmeMax: function () { + return this.maxwidth + "x" + this.maxheight; + }, + + // initialize + init: function () { + console.log(this.gimmeMax()); + // more init tasks... + } + }).init(); + +在语法上，当你使用这种模式的时候就像在使用对象字面量创建一个普通对象一样。除此之外，还需要将对象字面量用括号括起来，这样能让JavaScript引擎知道这是一个对象字面量，而不是一个代码块（if或者for循环之类）。在括号后面，紧接着就执行了init()方法。 + +你也可以将对象字面量和init()调用一起写到括号里面。简单地说，下面两种语法都是有效的： + + ({...}).init(); + ({...}.init()); + +这种模式的好处和自动执行的函数模式是一样的：在做一些一次性的初始化工作的时候保护全局作用域不被污染。从语法上看，这种模式似乎比只包含一段代码在一个匿名函数中要复杂一些，但是如果你的初始化工作比较复杂（这种情况很常见），它会给整个初始化工作一个比较清晰的结构。比如，一些私有的辅助性函数可以被很轻易地看出来，因为它们是这个临时对象的属性，但是如果是在立即执行的函数模式中，它们很可能只是一些散落的函数。 + +这种模式的一个弊端是，JavaScript压缩工具可能不能像压缩一段包裹在函数中的代码一样有效地压缩这种模式的代码。这些私有的属性和方法不被会重命名为一些更短的名字，因为从压缩工具的角度来看，保证压缩的可靠性更重要。在写作本书的时候，Google出品的Closure Compiler的“advanced”模式是唯一会重命名立即初始化的对象的属性的压缩工具。一个压缩后的样例是这样： + + ({d:600,c:400,a:function(){return this.d+"x"+this.c},b:function(){console.log(this.a())}}).b(); + +> 这种模式主要用于一些一次性的工作，并且在init()方法执行完后就无法再次访问到这个对象。如果希望在这些工作完成后保持对对象的引用，只需要简单地在init()的末尾加上return this;即可。 + + + +## 条件初始化 + +条件初始化（也叫条件加载）是一种优化模式。当你知道某种条件在整个程序生命周期中都不会变化的时候，那么对这个条件的探测只做一次就很有意义。浏览器探测（或者特征检测）是一个典型的例子。 + +举例说明，当你探测到XMLHttpRequest被作为一个本地对象支持时，就知道浏览器不会在程序执行过程中改变这一情况，也不会出现突然需要去处理ActiveX对象的情况。当环境不发生变化的时候，你的代码就没有必要在需要在每次XHR对象时探测一遍（并且得到同样的结果）。 + +另外一些可以从条件初始化中获益的场景是获得一个DOM元素的computed styles或者是绑定事件处理函数。大部分程序员在他们的客户端编程生涯中都编写过事件绑定和取消绑定相关的组件，像下面的例子： + + // BEFORE + var utils = { + addListener: function (el, type, fn) { + if (typeof window.addEventListener === 'function') { + el.addEventListener(type, fn, false); + } else if (typeof document.attachEvent === 'function') { // IE + el.attachEvent('on' + type, fn); + } else { // older browsers + el['on' + type] = fn; + } + }, + removeListener: function (el, type, fn) { + // pretty much the same... + } + }; + +这段代码的问题就是效率不高。每当你执行utils.addListener()或者utils.removeListener()时，同样的检查都会被重复执行。 + +如果使用条件初始化，那么浏览器探测的工作只需要在初始化代码的时候执行一次。在初始化的时候，代码探测一次环境，然后重新定义这个函数在剩下来的程序生命周期中应该怎样工作。下面是一个例子，看看如何达到这个目的： + + // AFTER + + // the interface + var utils = { + addListener: null, + removeListener: null + }; + + // the implementation + if (typeof window.addEventListener === 'function') { + utils.addListener = function (el, type, fn) { + el.addEventListener(type, fn, false); + }; + utils.removeListener = function (el, type, fn) { + el.removeEventListener(type, fn, false); + }; + } else if (typeof document.attachEvent === 'function') { // IE + utils.addListener = function (el, type, fn) { + el.attachEvent('on' + type, fn); + }; + utils.removeListener = function (el, type, fn) { + el.detachEvent('on' + type, fn); + }; + } else { // older browsers + utils.addListener = function (el, type, fn) { + el['on' + type] = fn; + }; + utils.removeListener = function (el, type, fn) { + el['on' + type] = null; + }; + } + +说到这里，要特别提醒一下关于浏览器探测的事情。当你使用这个模式的时候，不要对浏览器特性过度假设。举个例子，如果你探测到浏览器不支持window.addEventListener，不要假设这个浏览器是IE，也不要认为它不支持原生的XMLHttpRequest，虽然这个结论在整个浏览器历史上的某个点是正确的。当然，也有一些情况是可以放心地做一些特性假设的，比如.addEventListener和.removeEventListerner，但是通常来讲，浏览器的特性在发生变化时都是独立的。最好的策略就是分别探测每个特性，然后使用条件初始化，使这种探测只做一次。 + + + +## 函数属性——Memoization模式 + +函数也是对象，所以它们可以有属性。事实上，函数也确实本来就有一些属性。比如，对一个函数来说，不管是用什么语法创建的，它会自动拥有一个length属性来标识这个函数期待接受的参数个数： + + function func(a, b, c) {} + console.log(func.length); // 3 + +任何时候都可以给函数添加自定义属性。添加自定义属性的一个有用场景是缓存函数的执行结果（返回值），这样下次同样的函数被调用的时候就不需要再做一次那些可能很复杂的计算。缓存一个函数的运行结果也就是为大家所熟知的Memoization。 + +在下面的例子中，myFunc函数创建了一个cache属性，可以通过myFunc.cache访问到。这个cache属性是一个对象（hash表），传给函数的参数会作为对象的key，函数执行结果会作为对象的值。函数的执行结果可以是任何的复杂数据结构： + + var myFunc = function (param) { + if (!myFunc.cache[param]) { + var result = {}; + // ... expensive operation ... + myFunc.cache[param] = result; + } + return myFunc.cache[param]; + }; + + // cache storage + myFunc.cache = {}; + +上面的代码假设函数只接受一个参数param，并且这个参数是基本类型（比如字符串）。如果你有更多更复杂的参数，则通常需要对它们进行序列化。比如，你需要将arguments对象序列化为JSON字符串，然后使用JSON字符串作为cache对象的key： + + var myFunc = function () { + + var cachekey = JSON.stringify(Array.prototype.slice.call(arguments)), + result; + + if (!myFunc.cache[cachekey]) { + result = {}; + // ... expensive operation ... + myFunc.cache[cachekey] = result; + } + return myFunc.cache[cachekey]; + }; + + // cache storage + myFunc.cache = {}; + +需要注意的是，在序列化的过程中，对象的“标识”将会丢失。如果你有两个不同的对象，却碰巧有相同的属性，那么他们会共享同样的缓存内容。 + +前面代码中的函数名还可以使用arguments.callee来替代，这样就不用将函数名硬编码。不过尽管现阶段这个办法可行，但是仍然需要注意，arguments.callee在ECMAScript 5的严格模式中是不被允许的： + + var myFunc = function (param) { + + var f = arguments.callee, + result; + + if (!f.cache[param]) { + result = {}; + // ... expensive operation ... + f.cache[param] = result; + } + return f.cache[param]; + }; + + // cache storage + myFunc.cache = {}; + + + +## 配置对象 + +配置对象模式是一种提供更简洁的API的方法，尤其是当你正在写一个即将被其它程序调用的类库之类的代码的时候。 + +软件在开发和维护过程中需要不断改变是一个不争的事实。这样的事情总是以一些有限的需求开始，但是随着开发的进行，越来越多的功能会不断被加进来。 + +设想一下你正在写一个名为addPerson()的函数，它接受一个姓和一个名，然后在列表中加入一个人： + + function addPerson(first, last) {...} + +然后你意识到，生日也必须要存储，此外，性别和地址也作为可选项存储。所以你修改了函数，添加了一些新的参数（还得非常小心地将可选参数放到最后）： + + function addPerson(first, last, dob, gender, address) {...} + +这个时候，函数已经显得有点长了。然后，你又被告知需要添加一个用户名，并且不是可选的。现在这个函数的调用者需要将所有的可选参数传进来，并且得非常小心地保证不弄混参数的顺序： + + addPerson("Bruce", "Wayne", new Date(), null, null, "batman"); + +传一大串的参数真的很不方便。一个更好的办法就是将它们替换成一个参数，并且把这个参数弄成对象；我们叫它conf，是“configuration”（配置）的缩写： + + addPerson(conf); + +然后这个函数的使用者就可以这样： + + var conf = { + username: "batman", + first: "Bruce", + last: "Wayne" + }; + addPerson(conf); + +配置对象模式的好处是： + +- 不需要记住参数的顺序 +- 可以很安全地跳过可选参数 +- 拥有更好的可读性和可维护性 +- 更容易添加和移除参数 + +配置对象模式的坏处是： + +- 需要记住参数的名字 +- 参数名字不能被压缩 + +举些实例，这个模式对创建DOM元素的函数或者是给元素设定CSS样式的函数会非常实用，因为元素和CSS样式可能会有很多但是大部分可选的属性。 + + + +## 柯里化 （Curry） + +在本章剩下的部分，我们将讨论一下关于柯里化和部分应用的话题。但是在我们开始这个话题之前，先看一下到底什么是函数应用。 + + +### 函数应用 + +在一些纯粹的函数式编程语言中，对函数的描述不是被调用（called或者invoked），而是被应用（applied）。在JavaScript中也有同样的东西——我们可以使用Function.prototype.apply()来应用一个函数，因为在JavaScript中，函数实际上是对象，并且他们拥有方法。 + +下面是一个函数应用的例子： + + // define a function + var sayHi = function (who) { + return "Hello" + (who ? ", " + who : "") + "!"; + }; + + // invoke a function + sayHi(); // "Hello" + sayHi('world'); // "Hello, world!" + + // apply a function + sayHi.apply(null, ["hello"]); // "Hello, hello!" + +从上面的例子中可以看出来，调用一个函数和应用一个函数有相同的结果。apply()接受两个参数：第一个是在函数内部绑定到this上的对象，第二个是一个参数数组，参数数组会在函数内部变成一个类似数组的arguments对象。如果第一个参数为null，那么this将指向全局对象，这正是当你调用一个函数（且这个函数不是某个对象的方法）时发生的事情。 + +当一个函数是一个对象的方法时，我们不再像前面的例子一样传入null。（译注：主要是为了保证方法中的this绑定到一个有效的对象而不是全局对象。）在下面的例子中，对象被作为第一个参数传给apply()： + + var alien = { + sayHi: function (who) { + return "Hello" + (who ? ", " + who : "") + "!"; + } + }; + + alien.sayHi('world'); // "Hello, world!" + sayHi.apply(alien, ["humans"]); // "Hello, humans!" + +在这个例子中，sayHi()中的this指向alien。而在上一个例子中，this是指向的全局对象。（译注：这个例子的代码有误，最后一行的sayHi并不能访问到alien的sayHi方法，需要使用alien.sayHi.apply(alien, ["humans"])才可正确运行。另外，在sayHi中也没有出现this。） + +正如上面两个例子所展现出来的一样，我们将所谓的函数调用当作函数应用的一种语法糖并没有什么太大的问题。 + +需要注意的是，除了apply()之外，Function.prototype对象还有一个call()方法，但是它仍然只是apply()的一种语法糖。（译注：这两个方法的区别在于，apply()只接受两个参数，第二个参数为需要传给函数的参数数组，而call()则接受任意多个参数，从第二个开始将参数依次传给函数。）不过有种情况下使用这个语法糖会更好：当你的函数只接受一个参数的时候，你可以省去为唯一的一个元素创建数组的工作： + + // the second is more efficient, saves an array + sayHi.apply(alien, ["humans"]); // "Hello, humans!" + sayHi.call(alien, "humans"); // "Hello, humans!" + + +### 部分应用 + +现在我们知道了，调用一个函数实际上就是给它应用一堆参数，那是否能够只传一部分参数而不传全部呢？这实际上跟我们手工处理数学函数非常类似。 + +假设已经有了一个add()函数，它的工作是把x和y两个数加到一起。下面的代码片段展示了当x为5、y为4时的计算步骤： + + // for illustration purposes + // not valid JavaScript + + // we have this function + function add(x, y) { + return x + y; + } + + // and we know the arguments + add(5, 4); + + // step 1 -- substitute one argument + function add(5, y) { + return 5 + y; + } + + // step 2 -- substitute the other argument + function add(5, 4) { + return 5 + 4; + } + +在这个代码片段中，step 1和step 2并不是有效的JavaScript代码，但是它展示了我们手工计算的过程。首先获得第一个参数的值，然后将未知的x和已知的值5替换到函数中。然后重复这个过程，直到替换掉所有的参数。 + +step 1是一个所谓的部分应用的例子：我们只应用了第一个参数。当你执行一个部分应用的时候并不能获得结果（或者是解决方案），取而代之的是另一个函数。 + +下面的代码片段展示了一个虚拟的partialApply()方法的用法： + + var add = function (x, y) { + return x + y; + }; + + // full application + add.apply(null, [5, 4]); // 9 + + // partial application + var newadd = add.partialApply(null, [5]); + // applying an argument to the new function + newadd.apply(null, [4]); // 9 + +正如你所看到的一样，部分应用给了我们另一个函数，这个函数可以在稍后调用的时候接受其它的参数。这实际上跟add(5)(4)是等价的，因为add(5)返回了一个函数，这个函数可以使用(4)来调用。我们又一次看到，熟悉的add(5, 4)也差不多是add(5)(4)的一种语法糖。 + +现在，让我们回到地球：并不存在这样的一个partialApply()函数，并且函数的默认表现也不会像上面的例子中那样。但是你完全可以自己去写，因为JavaScript的动态特性完全可以做到这样。 + +让函数理解并且处理部分应用的过程，叫柯里化（Currying）。 + + +### 柯里化（Currying） + +柯里化和辛辣的印度菜可没什么关系；它来自数学家Haskell Curry。（Haskell编程语言也是因他而得名。）柯里化是一个变换函数的过程。柯里化的另外一个名字也叫schönfinkelisation，来自另一位数学家——Moses Schönfinkelisation——这种变换的最初发明者。 + +所以我们怎样对一个函数进行柯里化呢？其它的函数式编程语言也许已经原生提供了支持并且所有的函数已经默认柯里化了。在JavaScript中我们可以修改一下add()函数使它柯里化，然后支持部分应用。 + +来看一个例子： + + // a curried add() + // accepts partial list of arguments + function add(x, y) { + var oldx = x, oldy = y; + if (typeof oldy === "undefined") { // partial + return function (newy) { + return oldx + newy; + }; + } + // full application + return x + y; + } + + // test + typeof add(5); // "function" + add(3)(4); // 7 + + // create and store a new function + var add2000 = add(2000); + add2000(10); // 2010 + +在这段代码中，第一次调用add()时，在返回的内层函数那里创建了一个闭包。这个闭包将原来的x和y的值存储到了oldx和oldy中。当内层函数执行的时候，oldx会被使用。如果没有部分应用，即x和y都传了值，那么这个函数会简单地将他们相加。这个add()函数的实现跟实际情况比起来有些冗余，仅仅是为了更好地说明问题。下面的代码片段中展示了一个更简洁的版本，没有oldx和oldy，因为原始的x已经被存储到了闭包中，此外我们复用了y作为本地变量，而不用像之前那样新定义一个变量newy： + + // a curried add + // accepts partial list of arguments + function add(x, y) { + if (typeof y === "undefined") { // partial + return function (y) { + return x + y; + }; + } + // full application + return x + y; + } + +在这些例子中，add()函数自己处理了部分应用。有没有可能用一种更为通用的方式来做同样的事情呢？换句话说，我们能不能对任意一个函数进行处理，得到一个新函数，使它可以处理部分参数？下面的代码片段展示了一个通用函数的例子，我们叫它schonfinkelize()，正是用来做这个的。我们使用schonfinkelize()这个名字，一部分原因是它比较难发音，另一部分原因是它听起来比较像动词（使用“curry”则不是那么明确），而我们刚好需要一个动词来表明这是一个函数转换的过程。 + +这是一个通用的柯里化函数： + + function schonfinkelize(fn) { + var slice = Array.prototype.slice, + stored_args = slice.call(arguments, 1); + return function () { + var new_args = slice.call(arguments), + args = stored_args.concat(new_args); + return fn.apply(null, args); + }; + } + +这个schonfinkelize可能显得比较复杂了，只是因为在JavaScript中arguments不是一个真的数组。从Array.prototype中借用slice()方法帮助我们将arguments转换成数组，以便能更好地对它进行操作。当schonfinkelize()第一次被调用的时候，它使用slice变量存储了对slice()方法的引用，同时也存储了调用时的除去第一个之外的参数（stored\_args），因为第一个参数是要被柯里化的函数。schonfinkelize()返回了一个函数。当这个返回的函数被调用的时候，它可以（通过闭包）访问到已经存储的参数stored\_args和slice。新的函数只需要合并老的部分应用的参数（stored\_args）和新的参数（new\_args），然后将它们应用到原来的函数fn（也可以在闭包中访问到）即可。 + +现在有了通用的柯里化函数，就可以做一些测试了： + + // a normal function + function add(x, y) { + return x + y; + } + + // curry a function to get a new function + var newadd = schonfinkelize(add, 5); + newadd(4); // 9 + + // another option -- call the new function directly + schonfinkelize(add, 6)(7); // 13 + +用来做函数转换的schonfinkelize()并不局限于单个参数或者单步的柯里化。这里有些更多用法的例子： + + // a normal function + function add(a, b, c, d, e) { + return a + b + c + d + e; + } + + // works with any number of arguments + schonfinkelize(add, 1, 2, 3)(5, 5); // 16 + + // two-step currying + var addOne = schonfinkelize(add, 1); + addOne(10, 10, 10, 10); // 41 + var addSix = schonfinkelize(addOne, 2, 3); + addSix(5, 5); // 16 + + +### 什么时候使用柯里化 + +当你发现自己在调用同样的函数并且传入的参数大部分都相同的时候，就是考虑柯里化的理想场景了。你可以通过传入一部分的参数动态地创建一个新的函数。这个新函数会存储那些重复的参数（所以你不需要再每次都传入），然后再在调用原始函数的时候将整个参数列表补全，正如原始函数期待的那样。 + + + +##小结 + +在JavaScript中，开发者对函数的理解和运用的要求是比较苛刻的。在本章中，主要讨论了有关函数的一些背景知识和术语。介绍了JavaScript函数中两个重要的特性，也就是： + +1. 函数是一等对象，他们可以被作为值传递，也可以拥有属性和方法。 +2. 函数拥有本地作用域，而大括号不产生块级作用域。另外需要注意的是，变量的声明会被提前到本地作用域顶部。 + +创建一个函数的语法有： + +1. 带有名字的函数表达式 +2. 函数表达式（和上一种一样，但是没有名字），也就是为大家熟知的“匿名函数” +3. 函数声明，与其它语言的函数语法相似 + +在介绍完背景和函数的语法后，介绍了一些有用的模式，按分类列出： + +1. API模式，它们帮助我们为函数给出更干净的接口，包括： + - 回调模式 + + 传入一个函数作为参数 + - 配置对象 + + 帮助保持函数的参数数量可控 + - 返回函数 + + 函数的返回值是另一个函数 + - 柯里化 + + 新函数在已有函数的基础上再加上一部分参数构成 +2. 初始化模式，这些模式帮助我们用一种干净的、结构化的方法来做一些初始化工作（在web页面和应用中非常常见），通过一些临时变量来保证不污染全局命名空间。这些模式包括： + - 立即执行的函数 + + 当它们被定义后立即执行 + - 立即初始化的对象 + + 初始化工作被放入一个匿名对象，这个对象提供一个可以立即被执行的方法 + - 条件初始化 + + 使分支代码只在初始化的时候执行一次，而不是在整个程序生命周期中反复执行 +3. 性能模式，这些模式帮助提高代码的执行速度，包括： + - Memoization + 利用函数的属性，使已经计算过的值不用再次计算 + - 自定义函数 + 重写自身的函数体，使第二次及后续的调用做更少的工作 \ No newline at end of file