ケルベリゼーション関数
ケルベリゼーション関数のアイデアは、クロージャのメカニズムを利用して、ある情報をあらかじめ保存しておくもので、一種の前処理のアイデアです。
function fn(...arg1){
return function anonymous(...arg2){
let args = arg1.concat(arg2);
return args.reduce((n,item) =>n+item);
}
}
let res =fn(1,2)(3);
console.log(res);
//=> 6
配列の縮小メソッド
reduceメソッドには2つのパラメータがあります：
- コールバック関数には2つのパラメータがあります：
- pre
- next
- 2番目のパラメータは、1番目のプリ
前のコールバック関数の戻り値が次のコールバック関数のnとして使われ、次の項目は配列の次の項目
パラメータを渡す 2 つのシナリオを示します。
- 第2パラメータが渡されない場合：第1パラメータのみが渡され、コールバック関数となります。
let ary =[,];
let res =ary.reduce((n,item)=>{
console.log(n,item);
return n+item;
});
console.log(res);
//=>
回答： コールバック関数が最初に実行されるとき、nは配列の1番目の項目、itemは配列の2番目の項目です。コールバック関数が2回目に実行されるとき、nは1回目の実行の戻り値の値で、このコードでは配列の1番目の項目に配列の2番目の項目を加えた結果、itemは配列の3番目の項目です。
- 2番目のパラメータを渡す場合：2番目のパラメータを渡す場合、最初に実行されるとき、nは2番目のパラメータで、itemは配列の最初の項目です。
let ary =[,];
let res =ary.reduce((n,item)=>{
console.log(n,item);
return n+item;
},0);
console.log(res);
//=> 0
アロー関数
アロー関数の特徴
まず、arrow関数は関数キーワードを省略します。
let res = function(x,y){}
let res = (x,y) => {}
また、正式なパラメータが1つしかない場合は、括弧を省略することもできます。
let res = x =>{}
また、中括弧の中に戻り値しかない場合は、中括弧を省略できます。
let res = function (x,y){
return x+y;
}
let res = (x,y) => x+y ;
パラメータが1つだけで、戻り値も1つだけなら、とても便利です。
let res = x => ++x;
console.log(res(1));
//=> 2
注： しかし、arrow関数の中に thisはありません。thisは親スコープの thisです。
アロー関数 thisポインティング問題
矢印関数自体は thisを作成しません；
また、アロー関数自身は thisを持ちませんが、宣言されたときに他人の thisを取り込んで自分用に使うことができるとも言えます。
特記事項： 一旦 thisをキャプチャすると、後で変更することはできません。
アロー関数の thisは、それが宣言されたスコープの thisをキャプチャします。
call、apply、bindを使用しても、矢印関数thisのポイントを変更することはできません。
アロー関数と普通の関数の違い
- 矢印関数は、通常の関数にはない矢印の定義を使用します。
- アロー関数はすべて匿名関数です。通常の関数は、名前付き関数と同様に匿名関数を持つことができます。
- アロー関数はコンストラクタでは使用できません。通常の関数は、オブジェクトのインスタンスを生成するコンストラクタで使用できます。
- アロー関数は引数オブジェクトを持ちません。通常の関数呼び出しはすべて、実際に渡された引数を格納する引数オブジェクトを持っています。しかし、アロー関数はこのオブジェクトを持ちません。
- その他の違い
.矢印関数は関数を生成できません。
.アロー関数はプロトタイプ・オブジェクトを持ちません。
.アロー関数はスーパーを持ちません。
.アロー関数はnew.targetを持ちません。
アイデアの構成
compose:入れ子になった複数の呼び出しを平坦化する関数を合成します。
const fn1 = x => x+10;
const fn2 = x => x-10;
const fn3 = x => x*10;
const fn4 = x => x/10;
let res = fn4(fn3(fn2(fn1(20))));
console.log(res);
composeのアイデアを使って、上記の関数コールを実装し、関数の実行順序をより明確でわかりやすくするために、compose関数を手で書いてください。
const fn1 = x => x+10;
const fn2 = x => x-10;
const fn3 = x => x*10;
const fn4 = x => x/10;
function compose(...arg1){
//arg1シーケンシャル関数を=> [fn1,fn2,fn3,fn4]
return function(...arg2){
//arg2関数実行のために渡される最初の実パラメータを格納する=>[20]
//入力された関数の配列arg1の長さを決定する。
if(arg1.length === 0){return arg2};
if(arg1.length === 1){return arg1[0](...arg2)};
return arg1.reduce(function(pre,next){
// 初回のpreの値：実行される関数の最初の実パラメータ、次が最初に実行される関数である。
//番目のpreの値：前に実行された次の関数の戻り値で、次に実行される関数の実パラメータとして渡される。
return Array.isArray(pre)?next(...pre):next(pre);
},arg2);
};
}
let res = compose(fn1,fn2,fn3,fn4)(20);
console.log(res);
//=> 20
このように、compose関数が実行されるとき、パラメータが渡される順番は関数が実行される順番になります。
