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 相关文章推荐
js中eval详解
Mar 30 Javascript
实现局部遮罩与关闭原理及代码
Feb 04 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
对Session和Cookie的区分与解释
2007/03/16 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
Javascript - HTML的request类
2007/01/09 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
python Tornado框架的使用示例
2020/10/19 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
2015年六一儿童节演讲稿
2015/03/19 职场文书
大学感恩节活动总结
2015/05/05 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript