举一个需要正则匹配验证手机与邮箱的例子来展示柯里化的应用。
function convertToCurry(funct, ...args) { const argsLength = funct.length; return function(..._args) { _args.unshift(...args); if (_args.length < argsLength) return convertToCurry.call(this, funct, ..._args); return funct.apply(this, _args); } } var check = (regex, str) => regex.test(str); var checkPhone = convertToCurry(check, /^1[34578]\d{9}$/); var checkEmail = convertToCurry(check, /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/); console.log(checkPhone("13300000000")); // true console.log(checkPhone("13311111111")); // true console.log(checkPhone("13322222222")); // true console.log(checkEmail("13300000000@a.com")); // true console.log(checkEmail("13311111111@a.com")); // true console.log(checkEmail("13322222222@a.com")); // true高级柯里化有一个应用方面在于Thunk函数,Thunk函数是应用于编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thunk 函数。Thunk函数将参数替换成单参数的版本,且只接受回调函数作为参数。
// 假设一个延时函数需要传递一些参数 // 通常使用的版本如下 var delayAsync = function(time, callback, ...args){ setTimeout(() => callback(...args), time); } var callback = function(x, y, z){ console.log(x, y, z); } delayAsync(1000, callback, 1, 2, 3); // 使用Thunk函数 var thunk = function(time, ...args){ return function(callback){ setTimeout(() => callback(...args), time); } } var callback = function(x, y, z){ console.log(x, y, z); } var delayAsyncThunk = thunk(1000, 1, 2, 3); delayAsyncThunk(callback);实现一个简单的Thunk函数转换器,对于任何函数,只要参数有回调函数,就能写成Thunk函数的形式。
const convertToThunk = (funct) => (...args) => (callback) => funct.apply(null, args); const callback = function(x, y, z){ console.log(x, y, z); } const delayAsyncThunk = convertToThunk(function(time, ...args){ setTimeout(() => callback(...args), time); }); thunkFunct = delayAsyncThunk(1000, 1, 2, 3); thunkFunct(callback);Thunk函数在ES6之前可能应用比较少,但是在ES6之后,出现了Generator函数,通过使用Thunk函数就可以可以用于Generator函数的自动流程管理。首先是关于Generator函数的基本使用,调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的迭代器iterator 对象,他是一个指向内部状态对象的指针。当这个迭代器的next()方法被首次(后续)调用时,其内的语句会执行到第一个(后续)出现yield的位置为止,yield后紧跟迭代器要返回的值,也就是指针就会从函数头部或者上一次停下来的地方开始执行到下一个yield。或者如果用的是yield*,则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。
function* f(x) { yield x + 10; yield x + 20; return x + 30; } var g = f(1); console.log(g); // f {<suspended>} console.log(g.next()); // {value: 11, done: false} console.log(g.next()); // {value: 21, done: false} console.log(g.next()); // {value: 31, done: true} console.log(g.next()); // {value: undefined, done: true} // 可以无限next(),但是value总为undefined,done总为true由于Generator函数能够将函数的执行暂时挂起,那么他就完全可以操作一个异步任务,当上一个任务完成之后再继续下一个任务,下面这个例子就是将一个异步任务同步化表达,当上一个延时定时器完成之后才会进行下一个定时器任务,可以通过这种方式解决一个异步嵌套的问题,例如利用回调的方式需要在一个网络请求之后加入一次回调进行下一次请求,很容易造成回调地狱,而通过Generator函数就可以解决这个问题,事实上async/await就是利用的Generator函数以及Promise实现的异步解决方案。
var it = null; function f(){ var rand = Math.random() * 2; setTimeout(function(){ if(it) it.next(rand); },1000) } function* g(){ var r1 = yield f(); console.log(r1); var r2 = yield f(); console.log(r2); var r3 = yield f(); console.log(r3); } it = g(); it.next();虽然上边的例子能够自动执行,但是不够方便,现在实现一个Thunk函数的自动流程管理,其自动帮我们进行回调函数的处理,只需要在Thunk函数中传递一些函数执行所需要的参数比如例子中的index,然后就可以编写Generator函数的函数体,通过左边的变量接收Thunk函数中funct执行的参数,在使用Thunk函数进行自动流程管理时,必须保证yield后是一个Thunk函数。
关于自动流程管理run函数,首先需要知道在调用next()方法时,如果传入了参数,那么这个参数会传给上一条执行的yield语句左边的变量,在这个函数中,第一次执行next时并未传递参数,而且在第一个yield上边也并不存在接收变量的语句,无需传递参数,接下来就是判断是否执行完这个生成器函数,在这里并没有执行完,那么将自定义的next函数传入res.value中,这里需要注意res.value是一个函数,可以在下边的例子中将注释的那一行执行,然后就可以看到这个值是f(funct){...},此时我们将自定义的next函数传递后,就将next的执行权限交予了f这个函数,在这个函数执行完异步任务后,会执行回调函数,在这个回调函数中会触发生成器的下一个next方法,并且这个next方法是传递了参数的,上文提到传入参数后会将其传递给上一条执行的yield语句左边的变量,那么在这一次执行中会将这个参数值传递给r1,然后在继续执行next,不断往复,直到生成器函数结束运行,这样就实现了流程的自动管理。