JavaScript高阶函数

本文探讨了JavaScript中函数的多种使用方式,包括作为参数传递、作为返回值输出、回调函数在ajax异步请求的应用、Array.prototype.sort的排序原理、单例模式实现以及AOP(面向切面编程)的概念和实现。同时介绍了柯里化(currying)的概念及其实现,展示了如何通过函数改造创建柯里化函数。
摘要由CSDN通过智能技术生成

至少满足下列条件之一的函数

  • 可以作为参数被传递
  • 可以作为返回值输出

# 应用场景

# 作为参数传递

# 回调函数

ajax 异步请求完成之后执行

var getUserInfo = function( userId, callback ){
   $.ajax( 'http://xxx.com/getUserInfo?' + userId, function( data ){
       if ( typeof callback === 'function' ){
           callback(data);
       }
   });
}
getUserInfo( 13157, function( data ){
   console.log(data.userName);
});
# Array.prototype.sort
//从小到大排列
[ 1, 4, 3 ].sort( function( a, b ){
   return a - b;
});
// 输出: [ 1, 3, 4 ]

//从大到小排列
[ 1, 4, 3 ].sort( function( a, b ){
   return b - a;
});
// 输出: [ 4, 3, 1 ]

# 作为返回值输出

# 判断数据的类型
var Type = {};
for (var i = 0, type; type = ['String', 'Number', 'Boolean', 'Object'][i++];) {
   (function(type) {
       Type["is" + type] = function(o) {
           return Object.prototype.toString.call(o) === '[object ' + type + ']';
       }
   })(type);
}

console.log(Type.isString("hh"));
# getSingle

单例模式的例子

var getSingle = function ( fn ) {
   var ret;
   return function () {
       return ret || ( ret = fn.apply( this, arguments ) );
   };
};
//效果
var getScript = getSingle(function(){
`return document.createElement( 'script' );
});
var script1 = getScript();
var script2 = getScript();
alert ( script1 === script2 ); // 输出: true
# 实现AOP

把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等
可以保持业务逻辑模块的纯净和高内聚性

在 JavaScript中实现 AOP,都是指把一个函数“动态植入”到另外一个函数之中,例如扩展 Function.prototype

Function.prototype.before = function(beforeFn) {
    var self = this;
    return function() {
        beforeFn.apply(this, Array.prototype.slice.call(arguments));
        return self.apply(this, Array.prototype.slice.call(arguments));
    }
};

Function.prototype.after = function(afterFn) {
    var self = this;
    return function() {
        var ret;
        ret = self.apply(this, Array.prototype.slice.call(arguments));
        afterFn.apply(this, Array.prototype.slice.call(arguments));
        return ret;
    }
}

var func = function() {
    console.log(2);
}
func = func.before(function() {
    console.log(1);
}).after(function() {
    console.log(3);
})
func();//1 2 3
# 柯里化

currying又称部分求值。一个currying的函数首先会接受一些参数,接受了这些参数之后,该函数并不会立即求值,而是继续返回另外一个函数,刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候,之前传入的所有参数都会被一次性用于求值。

var curry = (function() {
    var data = [1];
    var func = function(n) {
        data.push(n);
        return func;
    }
    func.valueOf = function() {
        var ret = data.reduce(function(a, b) {
            return a * b;
        })
        data = [1];
        return ret;
    }
    return func;
})();

console.log(curry(1));
console.log(curry(1)(2));
console.log(curry(1)(2)(3));

专门定义一个函数,对上面解法的参数进行柯里化⬇️

var curry = function(fn) {
    var args = [];
    var ret = function(n) {
        args.push(n);
        return ret;
    }

    ret.valueOf = function() {
        var ret = args.reduce(fn);
        args = [];
        return ret;
    }
    return ret;
}

var func = curry(function(a, b) {
    return a * b;
})

console.log(func(1));
console.log(func(1)(2));
console.log(func(1)(2)(3));
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

薛定喵君

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值