Javascript中的高阶函数介绍


Posted in Javascript onMarch 15, 2015

这是一个有趣的东西,这或许也在说明Javascript对象的强大。我们要做的就是在上一篇说到的那样,输出一个Hello,World,而输入的东西是print('Hello')('World'),而这就是所谓的高阶函数。

高阶函数

高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的。

Javascript的高阶函数

然而,高阶函数只是将函数作为参数或返回值的函数。以上面的Hello,World作为一个简单的例子。

var Moqi = function(p1){

    this.add = function (p2){

        return p1 + ' ' + p2;

    };

    return add;

};

我们便可以这样使用这个函数

console.log(Moqi('Hello')('World'));

或许这个过程有点混乱,看看详细一点的。
> typeof Moqi('Hello')

<- "function"

> Moqi('Hello')

<- function (p2){

        return p1 + ' ' + p2;

    }

也就是说实际上Moqi('Hello')是一个函数,Moqi('Hello')
> var m = Moqi('Hello')        

 > m('World')

 > "Hello,World"

 

从上面的情况来看,高阶函数可以使代码更简洁、高效。自然而然地我们也可以创建一个函数,以便于:
 > Moqi('Hello')('World')('Phodal')

 > "Hello,World Phodal"

于是就有了这样一个函数
var Moqi = function(p1){

    return  function (p2){

        return function(p3){

            return p1 + ',' + p2 + ' ' +p3;

        }

    };

};

还原高阶函数

越来越复杂,需要引入高阶函数抽象的信号是出现重复或者相似的代码。然后,我们先一步步还原到之前的函数:

var Moqi = function(p1){

     this.add =  function (p2){

        return function(p3){

            return p1 + ',' + p2 + ' ' +p3;

        }

    };

    return this.add;

};

接着再创建一个新的函数
var Moqi = function(p1){

     this.add =  function (p2){

        this.add1 = function(p3){

            return p1 + ',' + p2 + ' ' +p3;

        };

        return this.add1;

    };

    return this.add;

};

使用javascript中的call方法,就会有:
var Moqi = function(p1){

    var self = this;
    function fd(p2) {

        this.add1 = function (p3) {

            return p1 + ',' + p2 + ' ' + p3;

        };

    }
    self.add =  function (p2){

        fd.call(this, p2);

        return this.add1;

    };

    return self.add;

};

高阶函数实例

上面的例子只是为了好玩,下面的例子是真正的运用。

add = function(a,b){

    return a + b;

};
function math(func,array){

    return func(array[0],array[1]);

}
console.log(math(add,[1,2]));
> math(add,[1,2])

< 3

在上面的例子中传进去的add是一个参数,而在return的时候刚是一个函数。如在jQuery中有一个函数用于
// Convert dashed to camelCase; used by the css and data modules

// Microsoft forgot to hump their vendor prefix (#9572)

camelCase: function( string ) {

    return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );

},

也是这样的运用,可见高阶函数对于掌握好JS的重要。。
Javascript 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
Javascript中this关键字的一些小知识
Mar 15 #Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 #Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 #Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
You might like
php学习之 认清变量的作用范围
2010/01/26 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
php网站地图生成类示例
2014/01/13 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
总结对比php中的多种序列化
2016/08/28 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
宣传活动总结范文
2014/07/01 职场文书
财务整改报告范文
2014/11/05 职场文书
节约用电通知
2015/04/25 职场文书
PHP新手指南
2021/04/01 PHP
Python WSGI 规范简介
2021/04/11 Python