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代码
Aug 13 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
Node.js插件安装图文教程
May 06 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
解决layer图标icon不加载的问题
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
摘自百度的图片轮换效果代码
2007/11/19 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
python解析文件示例
2014/01/23 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
5款非常棒的Python工具
2018/01/05 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
详解python的四种内置数据结构
2019/03/19 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python如何实现线程间通信
2020/07/30 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
餐厅经理岗位职责范本
2014/02/17 职场文书
转变工作作风心得体会
2016/01/23 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
python中24小时制转换为12小时制的方法
2021/06/18 Python