Javascript 是你的高阶函数(高级应用)


Posted in Javascript onJune 15, 2015

在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用。但在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设计模式与开发实践》

Javascript 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
Javascript 高阶函数使用介绍
Jun 15 #Javascript
jQuery预加载图片常用方法
Jun 15 #Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 #Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 #Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 #Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 #Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 #Javascript
You might like
Ajax PHP简单入门教程代码
2008/04/25 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS中offset和匀速动画详解
2018/02/06 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
Python学习小技巧总结
2018/06/10 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python爬取音频下载的示例代码
2020/10/19 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
文明城市创建标语
2014/06/16 职场文书
节约用水的口号
2014/06/20 职场文书
2015年班干部工作总结
2015/04/29 职场文书