虽然 JavaScript 是一门完整的面向对象的编程语言，但这门语言同时也拥有许多函数式语言的特性。
函数式语言的鼻祖是 LISP，JavaScript 在设计之初参考了 LISP 两大方言之一的 Scheme，引入了 Lambda 表达式、闭包、高阶函数等特性。使用这些特性，我们经常可以用一些灵活而巧妙的方式来编写 JavaScript 代码。

闭包和高阶函数

闭包
- 变量的作用域
- 变量的生存周期
- 闭包的更多作用
- - 封装变量
- 闭包和面向对象设计
- 用闭包实现命令模式
- 闭包与内存管理
高阶函数
- 函数作为参数传递
- - 回调函数
  - Array.prototype.sort
- 函数作为返回值输出
- - 判断数据的类型
  - getSingle
- 高阶函数实现AOP
- 高阶函数的其他应用
- - currying（函数柯里化）
  - uncurrying
  - 函数节流
  - 分时函数
  - 惰性加载函数

闭包

变量的作用域

定义：变量的作用域，就是指变量的有效范围
注意：
1. 如果没有使用关键字 var 声明变量，变量就会变为全局变量
2. var 关键字在函数中声明的变量是局部变量，只能在函数内部使用，函数外面访问不到
3. 函数内部访问变量，会随着代码执行环境的作用域链从内向外寻找

变量的生存周期

全局变量：永久，除非主动销毁
函数内部 var 关键字声明的变量，函数调用结束，声明的变量不存在引用，即销毁

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; )
{(function( type ){Type[ 'is' + type ] = function( obj ){return Object.prototype.toString.call( obj ) === '[object '+ type +']';}})( type )
};
Type.isArray( [] ); // 输出:true
Type.isString( "str" ); // 输出:true

闭包的更多作用

封装变量

闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。
延续局部变量的寿命

闭包和面向对象设计

过程与数据的结合是形容面向对象中的“对象”时经常使用的表达。对象以方法的形式包含了过程，而闭包则是在过程中以环境的形式包含了数据。通常用面向对象思想能实现的功能，用闭包也能实现。反之亦然。在 JavaScript 语言的祖先 Scheme 语言中，甚至都没有提供面向对象的原生设计，但可以使用闭包来实现一个完整的面向对象系统。

闭包相关的代码:

var extent = function(){var value = 0;return {call: function(){value++;console.log( value );}}}
var extent = extent();
extent.call(); // 输出:1
extent.call(); // 输出:2
extent.call(); // 输出:3

面向对象的写法：

var extent = {value: 0,call: function(){this.value++;console.log( this.value );}};
extent.call();  // 输出:1
extent.call(); // 输出:2
extent.call(); // 输出:3

用闭包实现命令模式

在完成闭包实现的命令模式之前，我们先用面向对象的方式来编写一段命令模式的代码

<html><body><button id="execute">点击我执行命令</button><button id="undo">点击我执行命令</button><script>var Tv = {open: function(){console.log( '打开电视机' );},close: function(){console.log( '关上电视机' );}};OpenTvCommand.prototype.execute = function(){this.receiver.open(); // 执行命令，打开电视机};OpenTvCommand.prototype.undo = function(){this.receiver.close(); // 撤销命令，关闭电视机};var setCommand = function( command ){document.getElementById( 'execute' ).onclick = function(){command.execute(); // 输出:打开电视机}document.getElementById( 'undo' ).onclick = function(){command.undo(); // 输出:关闭电视机}};setCommand( new OpenTvCommand( Tv ) );</script></body>
</html>

命令模式的意图
把请求封装为对象，从而分离请求的发起者和请求的接收者(执行者)之间的耦合关系

闭包版本的命令模式中，命令接收者会被封闭在闭包形成的环境中，代码如下:

var Tv = {open: function(){console.log( '打开电视机' );},close: function(){console.log( '关上电视机' );}
};
var createCommand = function( receiver ){var execute = function(){return receiver.open();// 执行命令，打开电视机var undo = function(){return receiver.close();// 执行命令，关闭电视机}}return {execute: execute,undo: undo}
};
var setCommand = function( command ){document.getElementById( 'execute' ).onclick = function(){command.execute(); // 输出:打开电视机}document.getElementById( 'undo' ).onclick = function(){command.undo(); // 输出:关闭电视机}
};
setCommand( createCommand( Tv ) );

闭包与内存管理

闭包是一个非常强大的特性，但人们对其也有诸多误解。一种耸人听闻的说法是闭包会造成
内存泄露，所以要尽量减少闭包的使用。
局部变量本来应该在函数退出的时候被解除引用，但如果局部变量被封闭在闭包形成的环境中，那么这个局部变量就能一直生存下去。从这个意义上看，闭包的确会使一些数据无法被及时销毁。使用闭包的一部分原因是我们选择主动把一些变量封闭在闭包中，因为可能在以后还需要使用这些变量，把这些变量放在闭包中和放在全局作用域，对内存方面的影响是一致的，这里并不能说成是内存泄露。如果在将来需要回收这些变量，我们可以手动把这些变量设为 null。
跟闭包和内存泄露有关系的地方是，使用闭包的同时比较容易形成循环引用，如果闭包的作用域链中保存着一些 DOM 节点，这时候就有可能造成内存泄露。但这本身并非闭包的问题，也并非JavaScript 的问题。在 IE 浏览器中，由于 BOM 和 DOM 中的对象是使用 C++以 COM 对象的方式实现的，而 COM 对象的垃圾收集机制采用的是引用计数策略。在基于引用计数策略的垃圾回收机制中，如果两个对象之间形成了循环引用，那么这两个对象都无法被回收，但循环引用造成的内存泄露在本质上也不是闭包造成的。
同样，如果要解决循环引用带来的内存泄露问题，我们只需要把循环引用中的变量设为 null 即可。将变量设置为 null 意味着切断变量与它此前引用的值之间的连接。当垃圾收集器下次运行时，就会删除这些值并回收它们占用的内存。

高阶函数

高阶函数是指至少满足下列条件之一的函数
- 函数可以作为参数被传递
- 函数可以作为返回值输出

函数作为参数传递

把函数当作参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻辑放在函数参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要应用场景就是常见的回调函数。

回调函数

场景一：异步请求，例如：

var getUserInfo = function( userId, callback ){$.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){if ( typeof callback === 'function' ){callback( data );}});
}
getUserInfo( 13157, function( data ){ alert ( data.userName );
});

当我们想在 ajax 请求返回之后做一些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把 callback 函数当作参数传入发起 ajax 请求的方法中，待请求完成之后执行 callback 函数。

场景二：当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数，并把它作为参数传递给另外一个函数，“委托”给另外一个函数来执行。例如：

var appendDiv = function( callback ){for ( var i = 0; i < 100; i++ ){var div = document.createElement( 'div' );div.innerHTML = i; document.body.appendChild( div );if ( typeof callback === 'function' ){callback( div );}}
};
appendDiv(function( node ){node.style.display = 'none';
});

可以看到，隐藏节点的请求实际上是由客户发起的，但是客户并不知道节点什么时候会创建好，于是把隐藏节点的逻辑放在回调函数中，“委托”给 appendDiv 方法。在节点创建好的时候，appendDiv 会执行之前客户传入的回调函数。

Array.prototype.sort

Array.prototype.sort 接受一个函数当作参数，这个函数里面封装了数组元素的排序规则。从 Array.prototype.sort 的使用可以看到，我们的目的是对数组进行排序，这是不变的部分;而使用什么规则去排序，则是可变的部分。把可变的部分封装在函数参数里，动态传入 Array.prototype.sort，使 Array.prototype.sort 方法成为了一个非常灵活的方法，代码如下:

//从小到大排列
[ 1, 4, 3 ].sort( function( a, b ){return a - b;
})
// 输出: [ 1, 3, 4 ]//从大到小排列
[ 1, 4, 3 ].sort( function( a, b ){return b - a;
});
// 输出: [ 4, 3, 1 ]

函数作为返回值输出

判断数据的类型

判断一个数据是否是数组，在以往的实现中，可以基于鸭子类型的概念来判断，比如判断这个数据有没有 length 属性，有没有 sort 方法或者 slice 方法等。但更好的方式是用 Object.prototype.toString 来计算。Object.prototype.toString.call( obj )返回一个字符串，比如 Object.prototype.toString.call( [1,2,3] )总是返回"[object Array]"，而 Object.prototype.toString.call( “str”)总是返回"[object String]"。可以用循环语句，来批量注册这些 isType 函数:

var Type = {};
for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){(function( type ){Type[ 'is' + type ] = function( obj ){return Object.prototype.toString.call( obj ) === '[object '+ type +']';};})( type )
}Type.isArray( [] ); // 输出:trueType.isString( "str" ); // 输出:true

getSingle

单例模式的例子

var getSingle = function ( fn ) {var ret;return function () {return ret || ( ret = fn.apply( this, arguments ) );};
};

这个高阶函数的例子，既把函数当作参数传递，又让函数执行后返回了另外一个函数

var getScript = getSingle(function(){return document.createElement( 'script' );
});
var script1 = getScript();
var script2 = getScript();
alert ( script1 === script2 ); // 输出:true

高阶函数实现AOP

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。

好处：
- 可以保持业务逻辑模块的纯净和高内聚性
- 复用日志统计等功能模块

在 JavaScript 中实现 AOP，都是指把一个函数“动态织入”到另外一个函数之中,我们通过扩展 Function.prototype 来做到这一点。代码如下:

Function.prototype.before = function( beforefn ){var __self = this; // 保存原函数的引用return function(){ // 返回包含了原函数和新函数的"代理"函数beforefn.apply( this, arguments );return __self.apply( this, arguments );}
}
Function.prototype.after = function( afterfn ){var __self = this;return function(){var ret = __self.apply( this, arguments );afterfn.apply( this, arguments );return ret;}
};
var func = function () {console.log(2);
};
func = func.before(function () {console.log(1);
}).after(function () {console.log(3);
});
func();
// 控制台打印 1 2 3

高阶函数的其他应用

currying（函数柯里化）

首先我们讨论的是函数柯里化(function currying)。currying 的概念最早由俄国数学家 Moses Schönfinkel 发明，而后由著名的数理逻辑学家 Haskell Curry 将其丰富和发展，currying 由此得名。
currying 又称部分求值。一个 currying 的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

假设我们要编写一个计算每月开销的函数。在每天结束之前，我们都要记录今天花掉了多少钱。代码如下:

var currying = function( fn ){// 记录每天花的钱var args = [];return function(){if ( arguments.length === 0 ){return fn.apply( this, args );} else {[].push.apply( args, arguments );return arguments.callee;}}
};
var cost = (function(){var money = 0;return function(){for ( var i = 0, l = arguments.length; i < l; i++ ){money += arguments[ i ];}return money;}
})();
var cost = currying( cost ); // 转化成 currying 函数
cost( 100 ); // 未真正求值
cost( 200 ); // 未真正求值
cost( 300 ); // 未真正求值
alert ( cost() ); // 求值并输出:600

uncurrying

在 JavaScript 中，当我们调用对象的某个方法时，其实不用去关心该对象原本是否被设计为拥有这个方法，这是动态类型语言的特点，也是常说的鸭子类型思想。
uncurrying 的话题来自 JavaScript 之父 Brendan Eich 在 2011 年发表的一篇 Twitter。
uncurrying用来解决泛化 this 的过程提取出来

以下代码是 uncurrying 的实现方式:

// 方式一
Function.prototype.uncurrying = function () {var self = this;return function() {var obj = Array.prototype.shift.call( arguments );return self.apply( obj, arguments );};
};// 方式二
Function.prototype.uncurrying = function(){var self = this;return function(){return Function.prototype.call.apply( self, arguments );}
};

参考
javascript之反柯里化(uncurrying) - 杜培东

函数节流

原理
当频繁的触发一个事件，每隔一段时间，只会执行一次事件
使用场景
- window.onresize
- mousemove
代码实现

var throttle = function ( fn, interval ) {var __self = fn, // 保存需要被延迟执行的函数引用timer, // 定时器firstTime = true; // 是否是第一次调用return function () {var args = arguments,__me = this;if ( firstTime ) { // 如果是第一次调用，不需延迟执行 __self.apply(__me, args);return firstTime = false;}if ( timer ) { // 如果定时器还在，说明前一次延迟执行还没有完成return false;}timer = setTimeout(function () { // 延迟一段时间执行clearTimeout(timer);timer = null;__self.apply(__me, args);}, interval || 500 );};
};

分时函数

使用场景
用户主动触发函数，但这些函数会严重影响性能
例如：创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友，如果一个好友用一个节点来表示，当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千个节点。在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就是浏览器的卡顿甚至假死。
原理
让创建节点的工作分批进行
代码实现

var timeChunk = function( ary, fn, count ){var obj, t;var len = ary.length;var start = function(){for ( var i = 0; i < Math.min( count || 1, ary.length ); i++ ){var obj = ary.shift();fn( obj );}};
return function(){t = setInterval(function(){if ( ary.length === 0 ){ // 如果全部节点都已经被创建好return clearInterval( t );}start();}, 200 ); // 分批执行的时间间隔，也可以用参数的形式传入};
};

惰性加载函数

在 Web 开发中，因为浏览器之间的实现差异，一些嗅探工作总是不可避免。比如我们需要一个在各个浏览器中能够通用的事件绑定函数 addEvent

var addEvent = function( elem, type, handler ){if ( window.addEventListener ){addEvent = function( elem, type, handler ){elem.addEventListener( type, handler, false );}}else if ( window.attachEvent ){addEvent = function( elem, type, handler ){elem.attachEvent( 'on' + type, handler );}}addEvent( elem, type, handler );
};

addEvent 依然被声明为一个普通函数，在函数里依然有一些分支判断。但是在第一次进入条件分支之后，在函数内部会重写这个函数，重写之后的函数就是我们期望的 addEvent 函数，在下一次进入 addEvent 函数的时候，addEvent 函数里不再存在条件分支语句

【夯实基础】《JavaScript设计模式与开发实践》笔记——闭包和高阶函数相关推荐

前端设计模式学习笔记（面向对象JavaScript, this、call和apply, 闭包和高阶函数）...
JavaScript通过原型委托的方式来实现对象与对象之间的继承. 编程语言可分为两大类:一类是静态类型语言,另一类是动态类型语言 JavaScript是一门动态类型语言鸭子类型的概念(如果它走起来 ...
javascript设计模式(javascript设计模式与开发实践读书笔记)
javascript设计模式(javascript设计模式与开发实践读书笔记) 单例模式策略模式代理模式迭代器模式发布-订阅模式命令模式组合模式模板方法模式享元模式职责链模式中介者 ...
[书籍精读]《JavaScript设计模式与开发实践》精读笔记分享
写在前面书籍介绍:本书在尊重<设计模式>原意的同时,针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式,讲解了JavaScript面向对象 ...
JS代理模式《JavaScript设计模式与开发实践》阅读笔记
代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 保护代理和虚拟代理保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤. 虚拟 ...
Javascript设计模式与开发实践读书笔记（1-3章）
第一章面向对象的Javascript 1.1 多态在面向对象设计中的应用多态最根本好处在于,你不必询问对象"你是什么类型"而后根据得到的答案调用对象的某个行为--你只管调用 ...
《JavaScript设计模式与开发实践》模式篇（12）—— 装饰者模式
在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但是继承的方式并不灵活, 还会带来许多问题:一方面会导致超类和子类之间存在强耦合性,当超类改变时,子类也会随之改变;另一方面,继承这种功能复 ...
JavaScript设计模式与开发实践——JavaScript的多态
"多态"一词源于希腊文polymorphism,拆开来看是poly(复数)+ morph(形态)+ ism,从字面上我们可以理解为复数形态. 多态的实际含义是:同一操作作用于不同的 ...
JavaScript设计模式与开发实践 | 02 - this、call和apply
this JavaScript的this总是指向一个对象,至于指向哪个对象,是在运行时基于函数的执行环境的动态绑定的,而非函数被声明时的环境. this的指向 this的指向大致可以分为以下4类: 作 ...
《JavaScript设计模式与开发实践》阅读摘要
<JavaScript设计模式与开发实践>作者:曾探系统的介绍了各种模式,以及js中的实现.应用,以及超大量高质量代码,绝对值得一读面向对象的js 静态类型:编译时便已确定变量的类型 ...

【夯实基础】《JavaScript设计模式与开发实践》笔记——闭包和高阶函数