js高阶函数的应用

js高阶函数的应用

徐徐
前端
发布于2023-09-24 20:48:28
🌺前言
简单介绍js高阶函数的几种应用

高阶函数为必须满足以下条件之一的函数 • 函数可以作为参数传递 • 函数可以作为返回值输出 高阶函数的应用 #1.在javascript中实现AOP

javascript
Function.prototype.before = function(beforeFn){
    var that = this
    return function(){
        beforeFn.apply(this,arguments)//针对当前的执行参数和函数做一些处理
        return  that.apply(this,arguments)//执行核心业务
    }
}
Function.prototype.after = function(afterFn){
    var that = this
    return function(){
        var ret = that.apply(this,arguments)//核心业务
        afterFn.apply(this,arguments)//针对当前的执行参数和函数做一些处理
        return ret
    }
}
var func  = function(){
 console.log(2)
}
func = func.before(function(){
    console.log(1)
}).after(function(){
    console.log(3)
})
func()

2.实现函数柯里化(function currying)

意思是一个函数接受一些参数,不会立马求值,而是继续返回一个函数,刚才的参数形成的闭包保存起来, 等到真正需要求值的时候,传入的参数会一次性用于求值.

javascript
function _add(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        }
    }
}
 
_add(1)(2)(3);//6

3.反柯里化(uncurrying)

反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用

javascript
Function.prototype.uncurrying = function(){
    var self = this
    return function(){
        var obj = Array.prototype.shift.call(arguments)
        return self.apply(obj,arguments)
    }
}
var push = Array.prototype.push.uncurrying()
var obj = {
    length:1,
    0:1
}
push(obj,2)
console.log(obj)
/**
 * 注意: push执行的过程相当于向索引+1的键增加一个值,并修正length,作为返回值
 */
// 针对上面的方法还可以如下实现
/* Function.prototype.uncurrying = function(){
    var self = this
    return function(){
        return  Function.prototype.call.apply(self,arguments)
    }
} */

4.函数节流

5.分时函数

##6.惰性加载函数 实现一个兼容处理绑定事件的方法,只在初识化执行一次,最优方案,比在addEvent内部每次判断性能要好

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var addEvent = function(elem,type,handler){
            if(window.addEventListener){
                addEvent = function(elem,type,handler){
                 elem.addEventListener(type,handler,false)
                }
            }else if(window.attachEvent){
              addEvent = function(elem,type,handler){
                elem.attachEvent('on'+ type,handler)
              }
            }
        }
    </script>
</body>
</html>

目录

文章最后更新于 2024-08-06 20:57:13
留言
暂无数据

~~空空如也