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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
input按钮的事件处理大全
Dec 10 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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数据流应用的简单例子
2012/06/01 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php判断文件夹是否存在不存在则创建
2015/04/09 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
js计数器代码
2006/11/04 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
JS实现无限轮播无倒退效果
2020/09/21 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
python相似模块用例
2016/03/04 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
行政文员岗位职责
2013/11/08 职场文书
教师师德承诺书
2014/03/26 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
新闻通讯稿模板
2015/07/22 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL