sunnyxujian's blog sunnyxujian's blog
首页
  • JavaScript
  • CSS
  • HTML和浏览器
  • Vue
  • Vue3
  • React
  • 基础知识
  • webpack
  • rollup
  • vite
  • 其他
  • Nodejs
  • 网络
  • TypeScript
  • 架构设计
  • 性能优化
  • 数据结构和算法
  • JavaScript教程 笔记
  • ES6 教程 笔记
  • TypeScript 从零实现 axios
  • Git学习 笔记
  • 渲染器原理
  • TypeScript 笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网站
  • 资源
  • Vue资源
  • 友情链接
  • 分类
  • 标签
  • 归档
  • 友链
  • 关于
GitHub (opens new window)

xujian

劝君惜取少年时。
首页
  • JavaScript
  • CSS
  • HTML和浏览器
  • Vue
  • Vue3
  • React
  • 基础知识
  • webpack
  • rollup
  • vite
  • 其他
  • Nodejs
  • 网络
  • TypeScript
  • 架构设计
  • 性能优化
  • 数据结构和算法
  • JavaScript教程 笔记
  • ES6 教程 笔记
  • TypeScript 从零实现 axios
  • Git学习 笔记
  • 渲染器原理
  • TypeScript 笔记
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 网站
  • 资源
  • Vue资源
  • 友情链接
  • 分类
  • 标签
  • 归档
  • 友链
  • 关于
GitHub (opens new window)
  • JavaScript

    • JavaScript深入之从原型到原型链
    • 继承的多种方式和优缺点
    • 作用域链及闭包
    • JavaScript深入之闭包
    • 变量提升
    • this指向
    • instanceof 和 typeof 的实现原理
    • 深入bind的模拟实现
    • apply 和 call
    • 😍Vue3和React都在用的函数式编程,学起来~
    • 手写Promise内部原理
    • 高阶函数魅力
      • 1. 什么是高阶函数?
      • 2. 那么高阶函数有哪些应用场景呢?
        • 2.1 AOP(面向切面编程)
        • 2.1.1 before函数
        • 2.1.2 after函数
        • 3. 柯理化函数
        • 3.1 判断数据类型
        • 3.2 通用柯理化函数
        • 3.3 用柯理化写一个js判断类型的工具函数
    • 那些神仙API之数组reduce方法
    • 防抖与节流函数
    • JS获取和修改url参数
    • 比typeof运算符更准确的类型判断
    • new命令原理
  • CSS

  • HTML和浏览器

  • 前端基础
  • JavaScript
xujian
2020-09-14

高阶函数魅力

# 1. 什么是高阶函数?

高阶函数的概念很简单,满足下列任何一个条件即可:

1.函数参数是一个函数

2. 如果一个函数返回一个函数

# 2. 那么高阶函数有哪些应用场景呢?

# 2.1 AOP(面向切面编程)

主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,其实就是给原函数增加一层,不用管原函数内部实现

# 2.1.1 before函数

在Function的原型链上扩展一个before方法,函数执行时,before里面的逻辑也会执行。所以before的参数是一个函数,返回值也是一个函数。

Function.prototype.before = function (fn){
  return (...args)=>{
    fn()
    this(...args)
  }
}

function method(){
  console.log('我是小明')
}

// case
const fn =method.before(function(){
  console.log('hello!')
})

fn()
// hello
// 我是小明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

before函数在任何函数调用的时候都会先执行,无需关心函数的具体实现,就给所有的函数加了一层逻辑,在全局处理某些逻辑的时候非常有用。

# 2.1.2 after函数

例如当一个函数执行了一定次数后,不允许再执行了

const after = (times, callback) => () => {
  if (--times === 0) {
    callback();
  }
};
const newFn = after(3, () => {
  console.log("ok");
});
1
2
3
4
5
6
7
8

# 3. 柯理化函数

柯理化函数参数是函数,返回值也是函数,他的作用是将函数处理的更具体一些,并且保留参数。柯理应用非常广泛,例如在Vue2就用到了柯理化做逻辑判断函数。

# 3.1 判断数据类型

 function isType(typing){ // 高阶函数可以用于保存参数
   return function (val) {
     return Object.prototype.toString.call(val) == `[object ${typing}]`
   }
}
isType('Array')([]) // true
isType('Array')({}) // false
1
2
3
4
5
6
7

# 3.2 通用柯理化函数

const currying = (fn,args = []) => {
  // 获取fn参数的个数
  let len = fn.length;
  return (..._)=>{
    // 收集参数
    let arg = args.concat(_);
    // 如果收集的参数少于fn传入参数的个数,继续递归收集参数
    if(arg.length < len){
      return currying(fn,arg);
    }
    // 否则执行fn,把收集好的参数集合当入参传入
    return fn(...arg);
  }
};
const add = (a, b, c, d, e) => {
  return a + b + c + d + e;
};
let r = currying(add)(1)(2,3)(4,5);
console.log(r); // 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.3 用柯理化写一个js判断类型的工具函数

const types = ['String','Number','Boolean','Array','Object','Symbol'];
let utils = {}
types.forEach(type=>{
    utils[`is${type}`] = currying(isType)(type);
})
1
2
3
4
5
编辑 (opens new window)
上次更新: 2022/05/22, 18:34:11
手写Promise内部原理
那些神仙API之数组reduce方法

← 手写Promise内部原理 那些神仙API之数组reduce方法→

最近更新
01
😍Vue3和React都在用的函数式编程,学起来~
02-03
02
链表
11-24
03
基础类型
11-18
更多文章>
Theme by Vdoing | Copyright © 2020-2023 xujian | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式