当前位置： 首页 > article >正文

高阶函数全解析（定义、应用 -- 函数柯理化 反柯理化 发布订阅模式 观察者模式）

article 2024/11/14 6:03:14

什么是高阶函数？

满足下面两点中的任意一点都是高阶函数：

  1. 如果一个函数的参数是一个函数，那么当前这个函数也是一个高阶函数。
  2. 如果一个函数返回一个函数，那么当前这个函数也是一个高阶函数。

高阶函数能做什么?

  • 高阶函数 可以对原有的函数进行扩展

  • 函数的柯理化 （可以让一个函数变得更小）基于高阶函数的 （核心就是缓存变量，闭包）

  • 函数的反柯理化 Object.prototype.toString.call() toString()

  • 解决异步问题

function a(callback) {} //1

a(function () {});

function a() {   //2
  return function () {};
}

高阶函数的应用

1- 拓展业务代码：给某个方法添加一个方法在它执行之前调用。
function core(a,b,c) {
  console.log("核心逻辑",a,b,c);
}
// 给某个方法添加一个方法在它执行之前调用
Function.prototype.before = function (fn) {
  return (...args) => {
    //箭头函数没有this、没有原型、没有arguments
    // todo...
    fn(); // 做的其他的逻辑
    this(...args); // AOP, 切片增加额外的逻辑，在原有的逻辑中增添额外的逻辑
    // todo...
  };
};
//切片编程(AOP)
const newCore = core.before(() => {
  console.log("我增添的逻辑"); 
});
newCore(1,2,3);

2 - 函数的柯理化 （可以让一个函数变得更小）基于高阶函数的 （核心就是缓存变量，闭包）

通过函数柯里化，我们可以将原来接受多个参数的函数，转换为一系列只接受单一参数的函数，每个函数接收一个参数，返回一个新函数，最后一个新函数返回最终结果。

例子：

// 常用的判断类型 
// Object.prototype.toString.call()   constructor(Array,Object)
// typeof (null) 也是一个对象   instanceof
// typeof 不能判断对象类型 （typeof [] 跟 typeof {} 都是 ‘object’）
// constructor 可以找到这个变量时通过谁构造出来的
// instanceof 判断谁是谁的实例 __proto__
// Object.prototype.toString.call() 不能细分谁是谁的实例

function isType(val,typing) { // 判断某个变量是不是某个类型 // [xxx Object]
     return Object.prototype.toString.call(val).slice(8,-1) === typing
}
// 判断某个变量是不是一个字符串
console.log(isType('hello', 'String'))
console.log(isType(1, 'String'))

// 通过高阶函数可以缓存变量
function isType(typing) { // 判断某个变量是不是某个类型 // [xxx Object]
    // typing
    return (val) => { // 定义
        return Object.prototype.toString.call(val).slice(8,-1) === typing
    }
}
let isString = isType('String'); // 闭包 定义的函数的作用域和执行函数的作用域不是同一个就会产生闭包
console.log(isString(123));
console.log(isString(123));

函数柯里化本质上是一种闭包的应用，通过保留原函数的参数，生成一个新函数，在新函数中再次调用原函数并传递参数，最终得到结果。

1-如何通过一个柯里化函数实现通用的柯里化方法？
//通用的柯理化函数
function curry(func){  // 柯理化函数一定是高级函数
    const curried = (...args) => {  //用户本次执行的时候传递的参数
        if (args.length < func.length) {
            return (...others) => curried(...args, ...others);
        } else {
            return func(...args);
        }
    }

    return curried;
}



function sum(a, b, c) {
  //[1,2,3]
  return a + b + c;
}

let curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3));
console.log(curriedSum(1, 2)(3));

// sum(1, 2)(3);

function isType(typing, val) {
  // 判断某个变量是不是某个类型 // [xxx Object]
  return Object.prototype.toString.call(val).slice(8, -1) === typing;
}
let isString = curry(isType)("String"); // 闭包 定义的函数的作用域和执行函数的作用域不是同一个就会产生闭包
console.log(isString(123));
console.log(isString("abc"));
console.log(isString(123));

2- 函数的反柯理化

反柯里化的作用在与扩大函数的适用性，使本来作为特定对象所拥有的功能的函数可以被任意对象所用.
即把如下给定的函数签名，

obj.func(arg1, arg2)

转化成一个函数形式，签名如下：

func(obj, arg1, arg2)

这就是 反柯里化的形式化描述。

例如，下面的一个简单实现：

Function.prototype.uncurrying = function() {
  var that = this;
  return function() {
    return Function.prototype.call.apply(that, arguments);
  }
};

function sayHi () {
  return "Hello " + this.value +" "+[].slice.call(arguments);
}
var sayHiuncurrying=sayHi.uncurrying();
console.log(sayHiuncurrying({value:'world'},"hahaha"));

解释：

  • uncurrying是定义在Function的prototype上的方法，因此对所有的函数都可以使用此方法。调用时候：sayHiuncurrying=sayHi.uncurrying()，所以uncurrying中的 this 指向的是 sayHi 函数; （一般原型方法中的 this 不是指向原型对象prototype，而是指向调用对象，在这里调用对象是另一个函数，在javascript中函数也是对象）
  • call.apply(that, arguments) 把 that 设置为 call 方法的上下文，然后将 arguments 传给 call方法，前文的例子，that 实际指向 sayHi，所以调用 sayHiuncurrying(arg1, arg2, …) 相当于 sayHi.call（arg1, arg2, …);
  • sayHi.call（arg1, arg2, …), call 函数把 arg1 当做 sayHi的上下文，然后把 arg2,… 等剩下的参数传给sayHi，因此最后相当于 arg1.sayHi(arg2,…);
  • 因此，这相当于 sayHiuncurrying(obj,args) 等于 obj.sayHi(args)。

最后，我们反过来看，其实反柯里化相当于把原来 sayHi(args) 的形式，转换成了 sayHiuncurrying(obj,args)，使得sayHi的使用范围泛化了。 更抽象地表达， uncurryinging反柯里化，使得原来 x.y(z) 调用，可以转成 y(x’,z) 形式的调用 。 假设x’ 为x或者其他对象，这就扩大了函数的使用范围。

3-通用反柯里化函数

上面例子中把uncurrying写进了prototype，这不太好，我们其实可以把 uncurrying 单独封装成一个函数;

var uncurrying= function (fn) {
    return function () {
        var args=[].slice.call(arguments,1);
        return fn.apply(arguments[0],args);        
    }    
};

上面这个函数很清晰直接。
使用时 调用 uncurrying 并传入一个现有函数 fn， 反柯里化函数会返回一个新函数，该新函数接受的第一个实参将绑定为 fn 中 this的上下文，其他参数将传递给 fn 作为参数。

所以，对反柯里化更通俗的解释可以是 函数的借用，是函数能够接受处理其他对象，通过借用泛化、扩大了函数的使用范围。

所以 uncurrying更常见的用法是对 Javascript 内置的其他方法的 借调 而不用自己都去实现一遍。

文字描述比较绕，还是继续看代码：

var test="a,b,c";
console.log(test.split(","));

var split=uncurrying(String.prototype.split);   //[ 'a', 'b', 'c' ]
console.log(split(test,','));                   //[ 'a', 'b', 'c' ]

split=uncurrying(String.prototype.split) 给 uncurrying 传入一个具体的fn，即String.prototype.split ，split 函数就具有了 String.prototype.split 的功能，函数调用 split(test,‘,’) 时，传入的第一个参数为 split 执行的上下文，剩下的参数相当于传给原 String.prototype.split 函数。

再看一个例子:

var $ = {};
console.log($.push);                          // undefined
var pushUncurrying = uncurrying(Array.prototype.push);
$.push = function (obj) {
    pushUncurrying(this,obj);
};
$.push('first');
console.log($.length);                        // 1
console.log($[0]);                            // first
console.log($.hasOwnProperty('length'));      // true

这里模仿了一个“类似jquery库” 实现时借用 Array 的 push 方法。 我们知道对象是没有 push 方法的，所以 console.log(obj.push) 返回 undefined，可以借用Array 来处理 push，由原生的数组方法（js引擎）来维护 伪数组对象的 length 属性和数组成员。

同样的道理，我们还可以继续有：

var indexof=uncurrying(Array.prototype.indexOf);
$.indexOf = function (obj) {
    return indexof(this,obj);
};
$.push("second");
console.log($.indexOf('first'));              // 0
console.log($.indexOf('second'));             // 1
console.log($.indexOf('third'));              // -1

例如我们在实现自己的类库时，有些方法如果有些方法和原生的类似，那么可以通过 uncurrying 借用原生方法。

我们还可以把 Function.prototype.call/apply 方法 uncurring，例如：

var call= uncurrying(Function.prototype.call);
var fn= function (str) {
    console.log(this.value+str);
};
var obj={value:"Foo "};
call(fn, obj,"Bar!");                       // Foo Bar!

这样可以非常灵活地把函数也当做一个普通“数据”来使用，有函数式编程的赶脚，在一些类库中经常能看到这样的用法。

3-解决异步逻辑
1-通过回调函数解决异步逻辑

使用高阶函数加计数器同时获取多个异步请求的最终结果。

const fs = require('fs');  // file system
const path = require('path');
// 异步（我们不能立刻拿到返回值，而是我可以继续做别的事情）和同步的区别 
// 我 （非阻塞）  ->  小姑娘（你可以撤了，等我消息，决定了这个方法是异步的）
// 我 (阻塞) -> 小姑娘 （别挂电话，稍等我会告诉你，同步的）
// 同步阻塞， 异步非阻塞
// node中的api 第一个参数都是err ，意味着error-first 优先错误处理
let person = {};


function after(times, callback) {
    return function () {
        if(--times === 0) {
            callback();
        }
    }
}

let out = after(2, function(){
    console.log(person);
})

fs.readFile(path.resolve(__dirname, 'name.txt'),'utf-8', (err, data) => {
    person.name = data;
    out();
});

fs.readFile(path.resolve(__dirname, 'age.txt'),'utf-8', (err, data) => {
    person.age = data;
    out();
});

// console.log(person);
// 同步多个异步操作的返回值结果 --- 高阶函数与计数器（Promise.all）

2-使用发布订阅模式解决异步逻辑。

发布订阅模式分成两个部分：订阅和发布没有明显的关联

  • on(订阅)：就是把一些函数存到一个数组。
  • emit(发布)：就是让数组中的函数依次执行。
const fs = require("fs"); // file system
const path = require("path");
let person = {};

let event = {
  _arr: [],
  on(callback) {
    // 订阅  把函数存起来
    this._arr.push(callback);
  },

  emit(...args) {
    // 发布  将函数拿出来依次执行
    this._arr.forEach((fn) => fn(...args));
  },
};

//将回调函数作为参数存储起来

event.on((key, data) => {
  // 每次读取成功后 就打印消息
  person[key] = data;
  console.log("读取成功一次", key , ":", data);
});

event.on(() => {
  // 每次读取成功后 就打印消息
  if (Object.keys(person).length === 2) {
    console.log("当前已经读取完毕了", person);
  }
});

fs.readFile(path.resolve(__dirname, "name.txt"), "utf-8", (err, data) => {
  //   person.name = data;
  event.emit("name", data);
});

fs.readFile(path.resolve(__dirname, "age.txt"), "utf-8", (err, data) => {
  //   person.age = data;
  event.emit("age", data);
});

3-观察者模式
  1. 有观察者，肯定也有被观察者
  2. 观察者需要放到被观察者中
  3. 被观察者的状态发生变化需要通知观察者
  4. 内部也是基于发布订阅模式去收集观察者

例子： 小宝宝因为有人打他了，需要通知其爸爸妈妈 其中 小宝宝是被观察着 爸爸妈妈是观察者

// 观察者模式 是基于发布订阅的，主动的。 状态变化 主动通知
class Subject { //被观察者
    constructor(name) {
        this.name = name;
        this._arr = [];
        this.state = '开心';
    }

    attach(obs){ //订阅
        this._arr.push(obs);
    }

    setState(newState) {
        this.state = newState;
        //宝宝的状态变化了  会通知观察者更新 将自己传入过去
        this._arr.forEach(obs => obs.update(this));  //发布
    }
}


class Observer { //观察者

    constructor(name) {
        this.name = name;
    }

    update(sub){
        console.log(this.name + ":" + sub.name + sub.state);  
    }
}

let s = new Subject("小宝宝");

let o1 = new Observer("爸爸");
let o2 = new Observer("妈妈");

s.attach(o1); //订阅
s.attach(o2);

s.setState("有人打我了");

//  发布订阅 用户要手动订阅 手动发布
// 观察者模式 是基于发布订阅的，主动的。 状态变化 主动通知


http://www.kler.cn/a/392585.html

相关文章：

  • 【mysql】使用宝塔面板在云服务器上安装MySQL数据库并实现远程连接
  • Microsoft 365 Exchange如何设置可信发件IP白名单
  • 2411C++,C++26反射示例
  • java模拟键盘实现selenium上下左右键 table中的左右滚动条实现滚动
  • matlab建模入门指导
  • uniapp+vue2 设置全局变量和全局方法 （兼容h5/微信小程序）
  • 执行npm run build -- --report后，生产report.html文件是什么？
  • kafka是如何处理数据乱序问题的？
  • Java代码操作ZooKeeper（使用原生 ZooKeeper 客户端库）
  • UE5 设置Sequence播完后返回起始位置
  • hadoop报错找不到主类
  • 苹果低价版Vision Pro 推迟至2027年发布：XR领域的变局与挑战
  • TypeORM在Node.js中的应用
  • 缓存雪崩问题及解决方法
  • C# 异步Task异常处理和堆栈追踪显示
  • iOS 18.1，未公开的新功能
  • OpenStack讲解和实例
  • 2022年蓝桥杯JavaB组 省赛 题目解析（含AC_Code）
  • 【达梦数据库】MYSQL迁移到DM字符集转换问题-UTF8mb4|转UTF8（UTF8mb3）
  • Dubbo 3.x源码(25)—Dubbo服务引用源码(8)notify订阅服务通知更新
  • AI绘画经验（stable-diffusion）
  • 如何理解DDoS安全防护在企业安全防护中的作用
  • 力扣(LeetCode)611. 有效三角形的个数(Java)
  • adworld - stack2
  • 基于 Express+JWT + Vue 的前后端分离架构
  • 黄色校正电容102j100