Javascript:是你的高阶函数
在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用。但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回。所谓高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数。这两种情形在实际开发中有很多应用场景,本文是我在工作学习中遇到的几种应用场景的总结。
回调函数
代码复用是衡量一个应用程序的重要标准之一。通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率。比如ES5中为数组增加的forEach方法,遍历数组,对每个元素调用同一个函数。
array = {};
array.forEach = function(arr, fn){
for (var i = 0, len = arr.length; i < len; i++) {
fn(arr[i], i, arr);
}
}
通过回调函数将业务的重点聚焦在回调函数中,而不必每次都要重复编写遍历代码。
偏函数
作为将函数当做返回值输出的典型应用就是偏函数。所谓偏函数是指创建一个调用另外一个部分——参数或变量已经预置的函数——的函数的用法。反正看着定义我是没理解这东东干嘛的。咱们还是先看例子吧,偏函数最典型的例子就是类型判断。
Javascript对象都拥有三个属性:原型属性、类属性、可扩展性。(不知道的同学要回去翻犀牛书哦,page:138)类属性是一个字符串,Javascript中并未直接提供,但我们可以利用Object.prototype.toString来间接得到。该函数总是返回如下形式:
[object Class]
因此我们可以编写一系列isType函数。代码如下:
isString = function(obj){
return Object.prototype.toString.call(obj) === "[object String]";
}
isNumber = function(obj){
return Object.prototype.toString.call(obj) === "[object Number]";
}
isArray = function(obj){
return Object.prototype.toString.call(obj) === "[object Array]";
}
这几个函数中大部分代码是重复的,这时高阶函数便华丽丽的登场了:
isType = function(type) {
return function(obj) {
return Object.prototype.toString.call(obj) === "[object " + type + "]";
}
} isString = isType('String');
isNumber = isType('Number');
isArray = isType('Array');
所以通过指定部分参数来返回一个新的定制函数的形式就是偏函数。
currying(柯里化)
currying又称部分求值。一个currying的函数首先会接受一些参数,接受这些参数之后,函数并不会立即求值,而是继续返回另一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。
var currying = function(fn) {
var args = []; return function() {
if (arguments.length === 0) {
return fn.applay(this, args);
} else {
args = args.concat(arguments);
return arguments.callee;
}
}
}
假设我们以计算一个月每天花销为例:
var currying = function(fn) {
debugger;
var args = []; return function() {
if (arguments.length === 0) {
return fn.apply(this, args);
} else {
Array.prototype.push.apply(args, arguments);
return arguments.callee;
}
}
} cost = function(){
var sum = 0;
for (var i = 0, len = arguments.length; i < len; i++) {
sum += arguments[i];
} return sum;
}
var cost = currying(cost); cost(100);
cost(200);
alert(cost())
事件节流
在某些场景下,某些事件可能会被重复的触发,但事件处理函数并不需要每次都执行。比如在window.resize事件中进行复杂的逻辑计算,如果用户频繁的改变浏览器大小,复杂计算会对性能造成严重影响;有时这些逻辑计算并不需要每次rezise时都触发,只需要计算有限的几次便可以。这时我们需要根据时间段来忽略一些事件请求。请看以下节流函数:
function throttle(fn, interval) {
var doing = false; return function() {
if (doing) {
return;
}
doing = true;
fn.apply(this, arguments);
setTimeout(function() {
doing = false;
}, interval);
}
} window.onresize = throttle(function(){
console.log('execute');
}, 500);
通过控制函数执行时间,可以在函数执行次数与功能需求之间达到完美平衡。另一个事件是mousemove。如果我们给一个dom元素绑定该事件,鼠标在改元素上移动时,该事件便会重复触发。
事件结束
对于某些可以频繁触发的事件,有时候我们希望在事件结束后进行一系列操作。这时我们可以利用高阶函数做如下处理:
function debounce(fn, interval) {
var timer = null; function delay() {
var target = this;
var args = arguments;
return setTimeout(function(){
fn.apply(target, args);
}, interval);
} return function() {
if (timer) {
clearTimeout(timer);
} timer = delay.apply(this, arguments);
}
};
window.onresize = throttle(function(){
console.log('resize end');
}, 500);
如果在这一过程中事件被触发则清除上一次事件句柄,重新绑定执行时间。
参考资料:
《深入浅出node》
《Javascript设计模式与开发实践》
最新文章
- Css 备忘知识点
- 关于for循环删除数组内容出现的问题
- 简进祥-SVN版本控制方案:多分支并行开发,多环境自动部署
- 【Leetcode】【Medium】Group Anagrams
- 基于tiny4412的Linux内核移植 -- 设备树的展开
- Python基础:模块
- 如何获取xcassets中LaunchImage图片
- 正版Win7永不崩溃的秘密 解密系统备份!
- perl 执行mysql select 返回多条记录
- C++基础学习笔记----第七课(面向对象的基本概念)
- VirtualBox更改虚拟机磁盘VDI的大小
- Xamarin开发IOS系列教程一:安装黑苹果
- 在线音乐播放器-----酷狗音乐api接口抓取
- github上传文件
- Nmap绕过防火墙&;脚本的使用
- sql 存储过程学习
- Python实现聚类算法AP
- GitHub-分支管理02-BUG与Feature分支
- vue实例属性之el,template,render
- 微信服务号 redirect_uri域名与后台配置不一致,错误代码10003