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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 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
如何开发一个虚拟域名系统
2006/10/09 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
小程序使用分包的示例代码
2020/03/23 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python主线程捕获子线程的方法
2018/06/17 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python检测服务器端口代码实例
2019/08/31 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
运动员口号
2014/06/09 职场文书
上海世博会口号
2014/06/19 职场文书
教学质量月活动总结
2015/05/11 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python