ホームページ > 記事 > ウェブフロントエンド > 面接の質問における Javascript カリー化についての詳細な理解
この記事は、面接の質問における Javascript のカリー化について詳しく説明しています。必要な方は参考にしていただければ幸いです。
インタビューの質問: add(1)(2)(3) を実装 //結果 = 6、質問の核心は js のカリー化です
まず、カリー化とは何かについて話しましょう。 , カリー化に関する多くの記事を読みましたが、まだ理解できません。例: カリー化は、複数のパラメーターを受け入れる関数を、単一のパラメーター (元の関数の最初のパラメーター) を受け入れる関数に変換して返します。残りのパラメーターを受け入れ、結果を返す新しい関数。ほとんどのブログにはそう書かれていますが、正直言って私は混乱しています。
私の理解では、カレーはパラメータを収集する方法であり、十分な数が収集された場合に関数が実行されます。
実装の前に重要なポイントを列挙しましょう
1. パラメータを収集します (複数のパラメータを複数回実行する面接の質問と同じです)。はい、クロージャを使用します。
2たとえば、add(1)(2,3)(4)
3 などです。パラメータがいつ十分になるかを知る必要があります。
//如题 //add(1)(2)(3) //逻辑应该是这样add(1)执行收集参数1继续执行收集参数2依次类推直到收集完毕。 function curry(fn) { let arg = []; //用于收集参数 //做一个闭包https://segmentfault.com/a/1190000017824877 return function() { //每执行一次收集一次参数,为什么用concat是因为有时候后是多个参数(2,3) arg = arg.concat([...arguments]); //直到参数收集完成执行fn // 我们需要知道什么时候收集完了,条件就是curry参数fn的参数个数 fn.length //如果收集的参数个数大于等于fn的参数个数执行fn,如果没有递归执行 if (arg.length >= fn.length) { return fn(...arg) } // 参数没有收集完我们需要继续收集,递归 return arguments.callee } } // 测试一下 let testAdd = curry(add1) // console.log(testAdd(1)(2)(3)) // console.log(testAdd(1, 2)(3)) //console.log(testAdd(1)(2, 3))
誤って書き込みを終了してしまいました。
しかし、私は詳細な説明をします。次に、インターネット上のカリー化された実装コードのほとんどを分析しましょう。
function curry(fn) { function _c(restNum, argsList) { return restNum === 0 ? fn.apply(null, argsList) : function(x) { return _c(restNum - 1, argsList.concat(x)); }; } return _c(fn.length, []); }
それができれば大丈夫です。一見しただけではわかりません。詳しく見てみましょう。
分析:
1. カリーはパラメータ (fn) も受け取ります。これは必然です。これは関数を返し、fn.length と空の配列を受け取ります。 .
説明 、私が書いた簡略版で述べたように、 fn.length はパラメータが十分に収集されたかどうかを判断するために使用され、実際にはパラメータを収集するために使用されるクロージャの実装です。
3. 内部には三眼判定があります。見た目は派手ですが、fn を判定するためのパラメータの数が 0 の場合は、fn.apply(null と同様) を直接実行する必要はありません。 ,argList) I はっきりと声に出して言えば、応用してどこにでも使えますか?私の意見では、これが使用される理由は、argList が配列であり、apply が 2 番目のパラメーターが配列であることをサポートしているだけであるためです。
4. fn パラメータの数は 0 ではありません。fn 関数のパラメータの数が 0 になるまで 1 ずつ減らして、fn を実行します。 2匹同時に通り過ぎて死んでしまいました。
別の例: バインド メソッドの実装
Function.prototype.bind = function(context) { //返回一个绑定this的函数,我们需要在此保存this let self = this // 可以支持柯里化传参,保存参数 let arg = [...arguments].slice(1) // 返回一个函数 return function() { //同样因为支持柯里化形式传参我们需要再次获取存储参数 let newArg = [...arguments] console.log(newArg) // 返回函数绑定this,传入两次保存的参数 //考虑返回函数有返回值做了return return self.apply(context, arg.concat(newArg)) } } // 搞定测试 let fn = Person.say.bind(Person1) fn() fn(18)
はい、バインド メソッドはカリー化を使用します。
以上が面接の質問における Javascript カリー化についての詳細な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。