高阶函数

满足以下条件任意一种都可视为高阶函数：

  1. 若函数的参数是一个函数；
  2. 若函数返回了一个函数（返回的函数就是高阶函数）。

常见高阶函数的应用
有一个核心功能
AOP 面向切片编程

什么是闭包（作用域产生：根据函数定义的位置来产生作用域。函数执行时，产生的是执行上下文。）
有一个函数，可以不在当前作用域下执行，在函数外执行时，可拿到作用域内的变量。

  1. // AOP 面向切片编程，应用场景：重新原生方法
  2. function say(who) {
  3.     // 在说话之前需做。。。。
  4.     console.log(who + '说话')
  5. }
  7. // 让每个方法都有 before 方法，则在 Function.prototype 上添加 before 方法
  8. Function.prototype.before = function(beforeFunc) {
  9.     return (...args) => { // newFn 箭头函数无 prototype / 无 arguments / 无 this
  10.         beforeFunc()
  11.         this(...args)
  12.     }
  13. }
  15. let newFn = say.before(function() {
  16.     console.log('说话前')
  17. })
  18. newFn('chen') // 看调用函数之前的上下文
  1. // Vue2.x 中也会利用  函数劫持 ，也是运用了 AOP 思想
  2. const cachePush = Array.prototype.push
  3. function newPush(...args) {
  4.     // 此时 newPush 函数中 this 指向为：[1, 2, 3]
  5.     cachePush.call(this, ...args)
  6. }
  7. const arr = [1, 2, 3]
  8. newPush.call(arr, 4, 5, 6) // 改变 newPush 函数中的 this 指向为：arr
  9. console.log(arr) // [ 1, 2, 3, 4, 5, 6 ]
  1. /* 
  2.     react setState 事务，此事务非数据库中的事务
  3. */
  4. function perform(anyMethod, wrappers) {
  5.     return function() {
  6.         wrappers.forEach(wrapper => wrapper.initialize())
  7.         anyMethod()
  8.         wrappers.forEach(wrapper => wrapper.close())
  9.     }
  10. }
  12. const newFn = perform(function() {
  13.     console.log('say.....')
  14. }, [
  15.     {
  16.         initialize() {console.log('wrapper1 beforeSay')},
  17.         close() {console.log('wrapper1 close')},
  18.     },
  19.     {
  20.         initialize() {console.log('wrapper2 beforeSay')},
  21.         close() {console.log('wrapper2 close')},
  22.     }
  23. ])
  24. // wrapper1 beforeSay
  25. // wrapper2 beforeSay
  26. // say.....
  27. // wrapper1 close
  28. // wrapper2 close
  29. newFn()
  1. // after 在。。。之后调用。如在函数调用三次之后调用
  2. // 词法作用域，函数定义时，已经决定了变量的可访问的范围。
  3. function after(times, callback) {
  4.     return function() { // fn
  5.         if(--times === 0) {
  6.             callback()
  7.         }
  8.     }
  9. }
  10. const fn = after(3, function() {
  11.     console.log('really')
  12. })
  13. fn()
  14. fn()
  1. const fs = require('fs');
  3. function after(times, cb) {
  4.     const res = {}
  5.     return function(key, value) {
  6.         res[key] = value
  7.         if(--times === 0) { // 若达到次数，则执行 after 方法的回调函数
  8.             cb(res) // 并且将结果传入
  9.         }
  10.     }
  11. }
  12. const out = after(2, function(result) { // 公共处理异步方式
  13.     console.log(result)
  14. })
  16. fs.readFile('./a.txt', 'utf-8', (err, data) => {
  17.     out('name', data)
  18. })
  19. fs.readFile('./b.txt', 'utf-8', (err, data) => {
  20.     out('age', data)
  21. })
  22. // 最终拿到的整体结果：{ age: '10', name: 'this is a.txt' }
  1. /* 
  2.     发布 - 订阅模式
  3.     理解：
  4.         发布、订阅之间并没有耦合性。
  5. */
  6. const fs = require('fs');
  8. const events = {
  9.     _arr: [],
  10.     on(fn) {
  11.         this._arr.push(fn)
  12.     },
  13.     emit() {
  14.         this._arr.forEach(func => func())
  15.     }
  16. }
  18. const school = {}
  19. events.on(function () { // 函数只是绑定，并不会立即执行
  20.     console.log('读取一个')
  21. })
  22. events.on(function() {
  23.     if (Object.keys(school).length === 2) {
  24.         console.log(school)
  25.     }
  26. })
  28. fs.readFile('./a.txt', 'utf-8', (err, data) => {
  29.     school.name = data
  30.     events.emit() // 触发
  31. })
  32. fs.readFile('./b.txt', 'utf-8', (err, data) => {
  33.     school.age = data
  34.     events.emit()
  35. })
  38. /* 
  39.     1：通过回调函数来解决 after 函数
  40.     2：发布-订阅模式，发布emit，订阅on
  41.     3：观察者模式
  42.         两者（观察者、被观察者）是否是有关系的
  43. */
  1. /* 
  2.     观察者模式
  3.         Vue 特点，数据变化 => 视图更新。
  4.         监控数据的变化，数据变化需更新视图。
  5. */
  7. // 观察者
  8. class Observer {
  9.     constructor(name) {
  10.         this.name = name
  11.     }
  12.     // 更新状态函数
  13.     update(newState) {
  14.         console.log(`${this.name}，状态: ${newState}`)
  15.     }
  16. }
  18. // 被观察者
  19. class Subject {
  20.     constructor() {
  21.         this.state = 'sleep。。。'
  22.         this.obList = []
  23.     }
  24.     attach(ob) {
  25.         this.obList.push(ob)
  26.     }
  27.     setState(newState) {
  28.         // 1：更新状态
  29.         this.state = newState
  30.         // 2：通知各个观察者
  31.         this.obList.forEach(ob => ob.update(newState))
  32.     }
  33. }
  35. const sub = new Subject() // 被观察者
  36. const ob1 = new Observer('chen') // 观察者
  37. const ob2 = new Observer('liu') // 观察者
  39. // 此时，观察者和被观察者之间就有了联系
  40. sub.attach(ob1)
  41. sub.attach(ob2)
  43. sub.setState('eat....')
  44. sub.setState('溜达。。。。')

Promise

  1. /* 
  2.     Promise 特点：
  3.         1：三个状态：pending（进行中）- 默认、fulfilled（已成功）和rejected（已失败）。状态一旦改变，就不能再变。
  4.         2：每个 Promise 实例都有一个 then 方法；
  5.         3：若 new Promise 时报错了，状态就会变成 rejected，执行 then 中的 rejected 方法。
  7.     Promise 优缺点：
  8.         优点：
  9.             1：可解决异步嵌套问题；
  10.             2：可解决多个异步并发问题；
  11.         缺点：
  12.             1：Promise 基于回调；
  13.             2：Promise 无法终止异步。
  15.     异步方案：
  16.         1：callback;
  17.         2：Promise
  18.         3：async / await
  19.         4：Generate
  20. */
  21. const PENDING = 'PENDING'
  22. const FULFILLED = 'FULFILLED'
  23. const REJECTED = 'REJECTED'
  25. // 判断 promise2 和 res 的关系
  26. const resolvePromise = (promise2, res, resolve, reject) => {
  27.     // 判断 promise2 和 res 是不是同一个，若是同一个，就不需要等待了，直接出错即可。
  28.     if (promise2 === res) {
  29.         return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
  30.     }
  31.     // 判断数据类型 typeof constructor instanceof toString
  32.     if ((typeof res === 'object' && res !== null) || typeof res === 'function') {
  33.         let called; // 内部测试时，会成功和失败都调用
  34.         try {
  35.             const then = res.then // 获取 then 属性可能会报错，有可能 then 属性是通过 Object.defineProperty 来定义的。
  36.             if (typeof then === 'function') {
  37.                 then.call(res, y => { // y 可能还是一个 promise，直到解析出来的结果是一个普通值为止。
  38.                     if (called) {
  39.                         return
  40.                     }
  41.                     called = true // 防止多次调用成功或失败
  42.                     resolvePromise(promise2, y, resolve, reject) // 采用 promise 的成功结果将值向下传递
  43.                 }, r => {
  44.                     reject(r) // 采用失败结果向下传递
  45.                 }) // 能保证不用再次取 then 的值，再次取值可能出错
  46.             } else {
  47.                 if (called) {
  48.                     return
  49.                 }
  50.                 called = true
  51.                 // {then: 1}
  52.                 resolve(res) // 说明 res 是一个普通对象，直接成功即可
  53.             }
  54.         } catch (error) {
  55.             // promise 失败了，有可能还能调用成功
  56.             if (called) {
  57.                 return
  58.             }
  59.             called = true
  60.             reject(error)
  61.         }
  62.     } else {
  63.         // 若 res 是普通值
  64.         resolve(res) // 直接让 promise2 成功即可
  65.     }
  66. }
  68. class MyPromise {
  69.     constructor(executor) {
  70.         this.state = PENDING
  72.         // 发布 - 订阅模式，收集 .then 中成功、失败的回调函数onFulfilledCallbacks / onRejectedCallbacks
  73.         this.onFulfilledCallbacks = []
  74.         this.onRejectedCallbacks = []
  76.         this.value = undefined // 成功的值，this 实例上的 value
  77.         this.reason = undefined // 失败的原因，this 实例上的 reason
  78.         // 成功函数，类中的私有方法
  79.         const resolve = (value) => {
  80.             if (this.state === PENDING) {
  81.                 this.value = value
  82.                 this.state = FULFILLED
  83.                 this.onFulfilledCallbacks.forEach(fn => fn()) // 发布
  84.             }
  85.         }
  87.         // 失败函数，类中的私有方法
  88.         const reject = (reason) => {
  89.             if (this.state === PENDING) {
  90.                 this.reason = reason
  91.                 this.state = REJECTED
  92.                 this.onRejectedCallbacks.forEach(fn => fn()) // 发布
  93.             }
  94.         }
  96.         // 若 executor 在执行时报错，等价于调用了 reject 方法。
  97.         // !重点：try...catch 只能捕获同步异常
  98.         try {
  99.             executor(resolve, reject) // 执行器，默认执行器会立即执行
  100.         } catch (error) {
  101.             reject(error)
  102.         }
  103.     }
  105.     // then 方法有两个可选参数，类中的实例方法
  106.     then(onfulfilled, onrejected) {
  107.         // 判断可选参数
  108.         onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
  109.         onrejected = typeof onrejected === 'function' ? onrejected : err => {
  110.             throw err
  111.         }
  113.         const promise2 = new MyPromise((resolve, reject) => { // executor 立即执行函数
  114.             // 处理 executor 中是同步代码
  115.             if (this.state === FULFILLED) {
  116.                 setTimeout(() => { // 宏任务，为了保证 promise2 已经 new 完成了
  117.                     try {
  118.                         const res = onfulfilled(this.value)
  120.                         // res 可能是普通值，也可能是 promise
  121.                         // 判断 res 的值，进而推导出 promise2 的状态
  122.                         // !重点：promise2 通过宏任务，来延迟取值
  123.                         resolvePromise(promise2, res, resolve, reject)
  124.                     } catch (error) {
  125.                         reject(error)
  126.                     }
  127.                 }, 0);
  128.             }
  129.             if (this.state === REJECTED) {
  130.                 setTimeout(() => {
  131.                     try {
  132.                         const res = onrejected(this.reason)
  133.                         resolvePromise(promise2, res, resolve, reject)
  134.                     } catch (error) {
  135.                         reject(error)
  136.                     }
  137.                 }, 0);
  138.             }
  140.             // 处理 executor 中是异步代码
  141.             if (this.state === PENDING) {
  142.                 this.onFulfilledCallbacks.push(() => {
  143.                     // others todo....
  144.                     setTimeout(() => {
  145.                         try {
  146.                             const res = onfulfilled(this.value)
  147.                             resolvePromise(promise2, res, resolve, reject)
  148.                         } catch (error) {
  149.                             reject(error)
  150.                         }
  151.                     }, 0);
  152.                 })
  153.                 this.onRejectedCallbacks.push(() => {
  154.                     // others todo....
  155.                     setTimeout(() => {
  156.                         try {
  157.                             const res = onrejected(this.reason)
  158.                             resolvePromise(promise2, res, resolve, reject)
  159.                         } catch (error) {
  160.                             reject(error)
  161.                         }
  162.                     }, 0);
  163.                 })
  164.             }
  165.         })
  166.         return promise2
  167.     }
  168. }
  170. MyPromise.defer = MyPromise.deferred = function() {
  171.     let dfd = {}
  172.     dfd.promise = new MyPromise((resolve, reject) => {
  173.         dfd.resolve = resolve
  174.         dfd.reject = reject
  175.     })
  176.     return dfd
  177. }
  179. MyPromise.resolve = function(value){
  180.   return new MyPromise((resolve,reject)=>{
  181.       resolve(value);
  182.   })
  183. }
  184. MyPromise.reject = function(value){
  185.   return new MyPromise((resolve,reject)=>{
  186.       reject(value);
  187.   })
  188. }
  189. MyPromise.prototype.finally = function(callback){
  190.   return this.then((data)=>{
  191.       return MyPromise.resolve(callback()).then(()=>data);
  192.       // return new MyPromise((resolve,reject)=>{
  193.       //     resolve(callback()); // 如果callback是一个函数返回promise 就等待这个promise执行完毕
  194.       // }).then(()=>data);
  195.       // callback();
  196.       // return data;
  197.   },(err)=>{
  198.       return MyPromise.resolve(callback()).then(()=>{throw err}); // koa 原理
  199.       // throw err;
  200.   }); 
  201. };
  203. // npm i promises-aplus-tests -g
  204. module.exports = MyPromise
  1. const MyPromise = require('./MyPromise')
  2. const fs = require('fs')
  4. /* 
  5.     Promise.all 全部 可实现等待所有异步执行完成后，拿到统一结果
  6.     解决异步并发 同步处理结果问题
  7. */
  9. // 读取文件内容
  10. function read(url) {
  11.     // 方法一：
  12.     /* return new MyPromise((resolve, reject) => {
  13.         fs.readFile(url, 'utf-8', (err, data) => {
  14.             if (err) {
  15.                 reject(err)
  16.             }
  17.             resolve(data)
  18.         })
  19.     }) */
  21.     // 方法二：利用 dfd 来写，解决封装嵌套问题
  22.     const dfd = MyPromise.defer()
  23.     fs.readFile(url, 'utf-8', (err, data) => {
  24.         if (err) {
  25.             dfd.reject(err)
  26.         }
  27.         dfd.resolve(data)
  28.     })
  29.     return dfd.promise
  30. }
  32. // 判断是不是 Promise
  33. function isPromise(value) {
  34.     if ((typeof value === 'object' && value !== null) || typeof value === 'function') {
  35.         if(typeof value.then === 'function') {
  36.             return true
  37.         }
  38.     } else {
  39.         return false
  40.     }
  41. }
  43. /* 
  44.     MyPromise.all 的实现，类上的静态属性。
  46.     思考：什么时候才算成功。
  47.         只有当 arr.length === values.length 时，才算全部成功，但是这样有个问题：
  48.             [1, 2, 3, read('./a.txt'), read('./b.txt'), 4, 5] 有两个异步项，当执行到 arr[6] = 5 时，异步还没有返回，此时输出结果是：[1, 2, 3, empty, empty, 4, 5]。理解：同步代码先执行，如 arr[6] = 5，那 arr.length = 6，此时arr.length === values.length，但是异步代码结果还没返回，所以此种判断方法不对。
  50.             所以，需用 count 计数器，来解决多个异步并发问题。
  51. */
  52. MyPromise.all = function (values) {
  53.     return new MyPromise((resolve, reject) => {
  54.         const arr = []
  55.         let count = 0 // 重点：解决多个异步并发问题，需使用计数器
  57.         function processData (key, value) {
  58.             arr[key] = value
  59.             // if (arr.length === values.length) { resolve(arr) } // !：这样判断不对
  60.             if (++count === values.length) {
  61.                 resolve(arr)
  62.             }
  63.         }
  65.         for (let i = 0; i < values.length; i++) {
  66.             const cur = values[i];
  67.             if(isPromise(cur)) {
  68.                 cur.then(data => {
  69.                     processData(i, data)
  70.                 }, reject)
  71.             } else {
  72.                 processData(i, cur)
  73.             }
  74.         }
  75.     })
  76. }
  78. /* MyPromise.all([1, 2, 3, read('./a.txt'), read('./b.txt'), 4, 5]).then(data => {
  79.     console.log(data)
  80. }) */
  82. // 场景一
  83. /* const promise = new MyPromise((resolve, reject) => {
  84.     resolve(123)
  85. }).then((data) => {
  86.     console.log('data', data)
  87. }, error => {
  88.     console.log('error', error)
  89. }) */
  91. // 场景二
  92. // 可多次调用 promise 实例上的 then 方法。
  93. // 若 executor 里面是一个 setTimeout，则需在 MyPromise 中添加成功、失败回调数组（onFulfilledCallbacks / onRejectedCallbacks）
  94. /* const promise = new MyPromise((resolve, reject) => {
  95.     setTimeout(() => {
  96.         resolve(123)
  97.     }, 2000);
  98. })
  99. promise.then((data) => {
  100.     console.log('data', data)
  101. }, error => {
  102.     console.log('error', error)
  103. })
  104. promise.then((data) => {
  105.     console.log('data', data)
  106. }, error => {
  107.     console.log('error', error)
  108. })
  109. promise.then((data) => {
  110.     console.log('data', data)
  111. }, error => {
  112.     console.log('error', error)
  113. }) */
  116. // 场景三
  117. /* 
  118.     若一个 promise 的 then 方法中的函数（成功、失败）返回的结果是一个 promise 的话，会自动将这个 promise 执行，并且采用它的状态，若成功会将成功的结果向外层的下一个 then 传递
  119. */
  120. read('./a.txt').then(data => {
  121.     console.log(read('./b.txt'))
  122.     return read('./b.txt')
  123. }, err => {
  124.     console.log(err)
  125. }).then(data => {
  126.     console.log(data)
  127. }, err => {
  128.     console.log(err)
  129.     return false // 返回一个普通值，会将此普通值作为下一次成功的结果
  130. }).then(data => {
  131.     console.log(data)
  132.     // !重点：若不希望继续向下再走 then ?
  133.     return new MyPromise(() => {}) // 终止 promise ，可返回一个 pending 状态的 promise
  134. }).then(() => {
  135.     console.log('success')
  136. },() => {
  137.     console.log('err')
  138. })

参考地址

  1. 【2022最新】珠峰-手写Promise A+ 完整版(附源码)
  2. 201905架构课
  3. Babel 官网