资讯专栏INFORMATION COLUMN

javaScript中的函数应用

wenhai.he / 553人阅读

摘要:概要当中的函数站在不同的角度有不同的分类和应用本文站在高阶函数的角度来讨论当中函数的应用场景。解决老版本浏览器函数兼容性问题判断数据类型高阶函数实现也就是面向切面编程在中这个概念基础且重要。

概要

js当中的函数站在不同的角度有不同的分类和应用,本文站在高阶函数的角度来讨论js当中函数的应用场景。

首先明确高阶函数定义:

函数可以作为参数被传递

函数可以作为返回值输出

应用场景 函数作为参数被传递

这种情况其实是比较常见的,日常用的挺多的,例如ajax请求成功之后的callback函数、各种插件,框架当中的钩子函数等等。下面举个我们常用的例子:

var tmpAry=[2,1,3];

tmpAry.sort(function(a,b){
    return a-b;
});
console.log(tmpAry);   //[1,2,3]

目的:把函数中易变或公用逻辑抽离,封装成函数参数,隔离变与不变部分,达到更好的封装和复用。

函数作为返回值输出

这个其实我在日常写代码中用的比较少,但并不能说明这个不常见,所以下面我会多举几个例子。

解决老版本浏览器bind函数兼容性问题

Function.prototype.bind=function(context){
    var self=this;
    return function(){
        return self.apply(context,args);
    }
}
判断数据类型
var isType=function(type){
    return function(obj){
        return Object.prototype.toString.call(obj)==="[object "+ type + "]";
    }
}
var isString=isType("String");
console.log(isString("gcy"));  //true
高阶函数实现aop

AOP也就是面向切面编程,在java中这个概念基础且重要。具体就是通过reflect或动态代理(jdk动态代理和cglib动态代理)动态的在业务函数之前或之后添加一些
可复用的代码逻辑,例如典型的日志统计、权限控制等等。用aop的目的就是希望业务逻辑模块高内聚,同时达到非业务公共模块可复用,易维护。

Function.prototype.before=function (beforefn) {
    var _self=this;//保存原函数的引用
    return function () {  //代理函数
        beforefn.apply(this,arguments);
        _self.apply(this,arguments);
    }
};

Function.prototype.after=function (afterfn) {
    var _self=this;
    return function () {
        var ret=_self.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;  //执行原函数,并返回原函数的执行结果
    }
}
var  func=function () {
    console.log("ing");
}
func=func.before(function () {
    console.log("before")
}).after(function () {
    console.log("after");
})
func(); //before  ing  after

这个其实有很多应用场景,比如统计函数执行时间,动态改变函数参数等等。

function currying

首先currying的概念是部分求值,具体含义就是指动态的接受一些参数,不立即求值,在需要计算求值时访问之前闭包中保存的参数,一次性进行求值。
下面是一个部分求值通用的currying函数。

var currying=function (fn) {
    var args=[];
    return function () {
        if(arguments.length===0){
            return fn.apply(this,args);
        }else{
            [].push.apply(args,arguments);
            return arguments.callee;  //指向当前匿名函数,以便于参数连续暂存
        }
    }
}
var cost=(function () {
    var money=0;
    return function () {
        for(var i=0,len=arguments.length;i
总结

其实高阶函数应用场景很多,我只是总结列举了一些自己学习中碰到的典型例子,以后遇到一些适当的,会继续完善。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/69885.html

相关文章

  • 前端每周清单半年盘点之 JavaScript

    摘要:前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍,阐述了从提出到角力到流产的前世今生。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

    Vixb 评论0 收藏0
  • 【译】每个JavaScript 开发者应该了解的10个面试题

    摘要:避免脆弱的基类问题。红牌警告没有提到上述任何问题。单向数据流意味着模型是单一的事实来源。单向数据流是确定性的,而双向绑定可能导致更难以遵循和理解的副作用。原文地址 1. 你能说出两种对 JavaScript 应用开发者而言的编程范式吗? 希望听到: 2. 什么是函数编程? 希望听到: 3. 类继承和原型继承的不同? 希望听到 4. 函数式编程和面向对象编程的优缺点? ...

    mykurisu 评论0 收藏0
  • 学习React之前你需要知道的的JavaScript基础知识

    摘要:和类在开始时遇到类组件,只是需要有关类的基础。毕竟,中的条件呈现仅再次显示大多数是而不是特定的任何内容。 在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用...

    tylin 评论0 收藏0
  • 学习React之前你需要知道的的JavaScript基础知识

    摘要:和类在开始时遇到类组件,只是需要有关类的基础。毕竟,中的条件呈现仅再次显示大多数是而不是特定的任何内容。 在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用...

    bitkylin 评论0 收藏0
  • Express 实战(一):概览

    摘要:一个标准性的事件就是年的横空出世。引擎快速处理能力和异步编程风格,让开发者从多线程中解脱了出来。其次,通过异步编程范式将其高并发的能力发挥的淋漓尽致。它也仅仅是一个处理请求并作出响应的函数,并无任何特殊之处。 showImg(https://segmentfault.com/img/remote/1460000010819116); 在正式学习 Express 内容之前,我们有必要从大...

    zhaochunqi 评论0 收藏0
  • JavaScript 编程精解 中文第三版 十二、项目:编程语言

    摘要:来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版确定编程语言中的表达式含义的求值器只是另一个程序。若文本不是一个合法程序,解析器应该指出错误。 来源:ApacheCN『JavaScript 编程精解 中文第三版』翻译项目原文:Project: A Programming Language 译者:飞龙 协议:CC BY-NC-SA 4.0 自豪地采用...

    Near_Li 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<