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设计模式与开发实践》

(0)

相关推荐

  • Javascript中的高阶函数介绍

    这是一个有趣的东西,这或许也在说明Javascript对象的强大.我们要做的就是在上一篇说到的那样,输出一个Hello,World,而输入的东西是print('Hello')('World'),而这就是所谓的高阶函数. 高阶函数 高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以上面的Hello,World作为一个简单的例子. 复制代码 代码如下: var Moqi = func

  • JavaScript高阶函数_动力节点Java学院整理

    高阶函数英文叫Higher-order function.那么什么是高阶函数? JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数. 一个最简单的高阶函数: function add(x, y, f) { return f(x) + f(y); } 当我们调用add(-5, 6, Math.abs)时,参数x,y和f分别接收-5,6和函数Math.abs,根据函数定义,我们可以推导计算过程为

  • javascript之典型高阶函数应用介绍二

    前言 在前一篇文章javascript之典型高阶函数中主要实现了几个典型的functional函数.文章最后也提出了疑问,为啥那样的实现与F#之类的函数式语言"不太一样"呢?今天来试试更"函数式"的实现. 另一种实现 同样地,尝试对之前实现的函数做一些改动,把for循环去掉.如何去掉呢?这里先要引入一个集合的归纳法定义: 一个集合要么是空集,要么是一个数与一个集合组成的数对从定义可以看到,每一个集合都可以看作为一个数和一个集合的对.例如:{1,2,4,5} 可以认为

  • Javascript 高阶函数使用介绍

    高阶函数(higher-order function)-如果一个函数接收的参数为或返回的值为函数,那么我们可以将这个函数称为高阶函数.众所周知,JavaScript是一种弱类型的语言:JavaScript的函数既不对输入的参数,也不对函数的输出值作强定义和类型检查,那么函数可以成为参数,也可以成为输出值,这就体现了JavaScript对高阶函数的原生支持. 一.参数为函数的高阶函数: function funcTest(f){ //简易判断一下实参是否为函数 if((typeof f)=="fu

  • javascript之典型高阶函数应用介绍

    缘由 虽然以前也使用过javascript语言,但终究是为了配合后端写的一些零零散散的"代码段",更不能说是javascript项目了.很荣幸的是上个月刚到公司正好碰上项目开始推倒重写,我们team从头开始做架构和实现,目的很清楚,为了改进和超越前面的版本.这是个真正意义上的javascript"项目",当然服务端不是我们team来负责啦.这也是我真正开始全职使用javascript来编程.由于之前在学校对形式化方法这门课程比较感兴趣,而javascript又是函数

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

    在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数.这两种情形在实际开发中有很多应用场景,本文是我在工作学习中遇到的几种应用场景的总结. 回调函数 代码复用是衡量一个应用程序的重要标准之一.通过将变化的业务逻辑抽离封装在回调函数中能够有效的提高代码复用率.比如ES5中为数组增加的forEach方法,遍历

  • JavaScript中常见的高阶函数总结

    目录 前言 map函数 reduce函数 filter函数 sort every方法 find方法 findIndex方法 foreach方法 总结 前言 一个函数可以接受另一个函数作为参数,就把这个函数叫做高阶函数. 一个最简单的高阶函数: function add(x, y, f) { return f(x) + f(y); } //当调用add(-5, 6, Math.abs)时,参数x,y和f分别接收-5,6和函数Math.abs,根据函数定义,可以推导计算过程为: //x = -5;

  • 从柯里化分析JavaScript重要的高阶函数实例

    目录 前情回顾 百变柯里化 缓存传参 缓存判断 缓存计算 缓存函数 防抖与节流 lodash 高阶函数 结语 前情回顾 我们在前篇 <从历史讲起,JavaScript 基因里写着函数式编程> 讲到了 JavaScript 的函数式基因最早可追溯到 1930 年的 lambda 运算,这个时间比第一台计算机诞生的时间都还要早十几年.JavaScript 闭包的概念也来源于 lambda 运算中变量的被绑定关系. 因为在 lambda 演算的设定中,参数只能是一个,所以通过柯里化的天才想法来实现接

  • 详解JavaScript 高阶函数

    高阶函数简介 高阶函数 的英文名叫 Higher-Order Function ,是 函数式编程 中的一种.他的表现形式往往是通过把函数作为参数传入另一个函数,或者将函数作为另一个函数的返回值返回.在实际开发业务中, 高阶函数往往可以抽象我们的代码 ,将我们的命令式编程转换为复用性更高级的函数式编程,从而 提升我们的代码质量 . 下面拿3个面试中常问的高阶函数举例子,希望看完以后能够提升大家对JS的理解,提高我们的代码质量. chat is cheap,show you my code~ Arr

  • JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析

    本文实例讲述了JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法.分享给大家供大家参考,具体如下: 高阶函数(higher-order functions),就是返回其它函数的函数,或者使用其它函数作为它的参数的函数. 使用函数作为参数 因为函数本身就是一个值,所以可以让函数作为参数传递给其它的函数.JavaScript 有些函数就需要用到函数类型的参数,比如 Array.map. 比如我有一组数据: con

  • 深入学习JavaScript 高阶函数

    高阶函数 高阶函数英文叫 Higher-order function,它的定义很简单,就是至少满足下列一个条件的函数: 接受一个或多个函数作为输入 输出一个函数 也就是说高阶函数是对其他函数进行操作的函数,可以将它们作为参数传递,或者是返回它们. 简单来说,高阶函数是一个接收函数作为参数传递或者将函数作为返回值输出的函数. 函数作为参数传递 JavaScript 语言中内置了一些高阶函数,比如 Array.prototype.map,Array.prototype.filter 和 Array.

随机推荐