JavaScript の最大呼び出しスタック サイズ超過エラー
JavaScript の Maximum call stack size exceeded エラーは、関数が何度も呼び出され、呼び出しが最大呼び出しスタック制限を超えると発生します。
JavaScript の Maximum call stack size exceeded エラーが発生した場合、問題は JavaScript コード内の再帰関数にあります。 より具体的には、問題は関数にあり、それ自体が繰り返し呼び出され続けます。
JavaScript の最大呼び出しスタック サイズを超えましたエラー
このエラーが発生した場合、ブラウザー内で使用可能なすべてのコール スタックを消費しているコード部分を修正するために実行できるいくつかの手順があります。
この JavaScript 記事の助けを借りて、Maximum call stack size exceeded エラーが表示される理由と、それを修正するためにできることについて詳しく説明します。
すべての JavaScript エラー オブジェクトは、Error オブジェクトから派生または継承されます。 これは RangeError と呼ばれます。
RangeError は、多くの場合、コードのパラメーターの引数値の範囲外のエラーを示します。
このエラーが JavaScript エラーの範囲内に収まる場所が少しわかったので、Maximum call stack size exceeded エラーの原因に進みましょう。
それでも、最大呼び出しスタック サイズを超えましたというエラーを理解する前に、再帰を理解する必要があります。
JavaScript の再帰関数
再帰は、定義された関数がそれ自体を呼び出すパターンであり、反復ごとに条件が関数呼び出しからのエスケープを可能にする基本ケースに近づきます。 ただし、注意しないと、ブラウザーのスタックが使い果たされるまで、関数が自分自身を呼び出し続ける可能性があります。
再帰関数の Maximum call stack size exceeded エラーの最も一般的な原因は、基本ケースの問題またはその欠如です。 再帰コードがベース コードを持っていないか、それを通り過ぎた場合、ブラウザのMaximum Call Stackに達するまで自分自身を呼び出し続けます。
JavaScript の再帰関数を修正する
それ自体を呼び出し続ける再帰関数の問題は、チェーン内で次の関数に進むことができず、スタック全体を使い果たすことです。
この問題を回避するには、再帰関数を再確認するのが最善の方法です。 次に、問題を解決するために、再帰を終了するために満たさなければならない基本ケースを指定します。
以下のスクリーンショットは、再帰コードが自分自身を無期限に呼び出す場合にどのように見えるかを示しています。
function example() {
// RangeError: Maximum call stack size exceeded
example();
}
example();
関数を呼び出すことができます。この関数は、呼び出しスタックの制限を超えるまで自分自身を呼び出します。 その後、エラーを解決するために関数が自身の呼び出しを停止する条件を指定する必要があります。
let counter = 0;
function example(num) {
if (num < 0) {
return;
}
counter += 1;
example(num - 1);
}
example(4);
console.log(counter);
今回は、呼び出しごとに 0 未満の数値で関数が呼び出されたかどうかを確認します。 数値が 0 未満の場合は、関数から戻るため、コール スタックの制限を超えません。
渡された値がゼロ以上の場合、渡された値 1 で関数を呼び出します。 これにより、if チェックが満たされる場合に向けて動き続けることができます。
再帰関数は、条件が満たされるまで自分自身を呼び出し続けます。 たとえば、関数を完了する条件がない場合、関数は最大呼び出しスタック サイズを超えるまで自分自身を呼び出します。
関数を呼び出す無限ループがある場合、このエラーが発生します。
function sum(x, y) {
return x + y;
}
while (true) {
sum(10, 10);
}
while ループは関数を呼び出し続け、ループを終了する条件がないため、最終的にコール スタック サイズを超えます。
これは、基本条件なしで自分自身を呼び出す関数と同様に動作します。 たとえば、for ループを使用した場合も同様です。
以下は、ループを終了するために満たす必要がある条件を指定する方法の例です。
function sum(x, y) {
return x + y;
}
let total = 0;
for (let i = 10; i > 0; i--) {
total += sum(5, 5);
}
console.log(total);
i 変数が 0 以下の場合、for ループの条件は満たされません。 したがって、ループを離れます。
JavaScript のエラーを見つける
エラーを見つけるための最初のステップはログを調べることですが、何千行ものコードを扱っている場合、壊れたコードの 1 行を見つけるのは難しい場合があります。
同じページで jQuery スクリプトを何度もロードする場合など、同じページで同じファイルを何度もインポートした場合にも、エラーが発生する可能性があります。 ブラウザーの開発者ツールで [ネットワーク] タブを開き、ページを更新して、Web サイトに読み込まれているスクリプトを確認します。