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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
Vue使用NProgress进度条的方法
Sep 21 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 实例化类的一点摘记
2008/03/23 PHP
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
实例详解Python模块decimal
2019/06/26 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
致1500米运动员广播稿
2014/02/07 职场文书
高中军训感言600字
2014/03/11 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL