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模拟模态对话框展现URL内容
May 27 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
微信小程序实现多选功能
Nov 04 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
用JS实现飞机大战小游戏
Jun 09 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
利用JavaScript写一个简单计算器
Nov 27 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
如何选购合适的收音机
2021/03/01 无线电
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
php常用数组函数实例小结
2016/12/29 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python全局变量用法实例分析
2016/07/19 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python实现壁纸下载与轮换
2020/10/19 Python
python unichr函数知识点总结
2020/12/16 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
结构工程研究生求职信
2013/10/13 职场文书
出纳岗位职责
2013/11/09 职场文书
联谊活动策划书
2014/01/26 职场文书
家长对小学生的评语
2014/01/28 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
详细聊聊vue中组件的props属性
2021/11/02 Vue.js