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 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
用PHP实现Ftp用户的在线管理的代码
2007/03/06 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
Ionic快速安装教程
2016/06/03 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python简单文本处理的方法
2015/07/10 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python 性能优化方法小结
2017/03/31 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python去掉空白行的多种实现代码
2018/03/19 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
土木工程师岗位职责
2013/11/24 职场文书
物业管理计划书
2014/01/10 职场文书
办公室员工岗位工作职责
2014/03/10 职场文书
保护动物倡议书
2014/04/15 职场文书
药品业务员岗位职责
2014/04/17 职场文书
食品安全汇报材料
2014/08/18 职场文书
2015年女职工工作总结
2015/05/15 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
python随机打印成绩排名表
2021/06/23 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS