JavaScriptの例外処理メソッドを詳しく解説_基礎知識-jsチュートリアル-php.cn

JavaScriptの例外処理メソッドを詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:54:31

オリジナル

1195 人が閲覧しました

プログラミングエラーには 3 つのタイプがあります: (1) 構文エラー、(2) 実行時エラー、(3) 論理エラー:
構文エラー:

解析エラーとも呼ばれる構文エラーは、従来のプログラミング言語をコンパイルするときに発生し、JavaScript が解釈されるときに発生します。

たとえば、次の行では右括弧が欠落しているため、構文エラーが発生します。

<script type="text/javascript">
<!--
window.print(;
//-->
</script>

ログイン後にコピー

JavaScript で構文エラーが発生した場合、同じスレッドに含まれる構文エラーのみが影響を受け、他のスレッドのコードは実行され、エラーが含まれるコードに依存するコードは実行されません。
実行時エラー:

実行時 (コンパイル/解釈後) に、例外とも呼ばれる実行時エラーが発生します。

たとえば、次の行は、構文が正しいにもかかわらず、実行時に存在しないメソッドを呼び出そうとしているため、実行時エラーが発生します。

<script type="text/javascript">
<!--
window.printme();
//-->
</script>

ログイン後にコピー

例外は、例外が発生したスレッドにも影響を与えるため、他の JavaScript スレッドは正常に実行を継続できます。
ロジックエラー:

論理エラーは、おそらく追跡が最も難しい種類のエラーです。これらのエラーは、構文エラーや実行時エラーの結果ではありません。逆に、スクリプトロジックの駆動中にバグが発生すると、期待した結果が得られません。

ビジネス要件に基づくロジックの種類はプログラムに依存するため、これらのエラーを検出できない場合があります。
try...catch...finally ステートメント:

最新バージョンの JavaScript に追加された例外処理機能。 JavaScript は、例外を処理するために try...catch...finally 構造と throw 操作を実装します。

プログラマが生成した例外や実行時例外は捕捉できますが、JavaScript 構文エラーは捕捉できません。

これが try...catch...finally ブロックの構文です:

<script type="text/javascript">
<!--
try {
  // Code to run
  [break;]
} catch ( e ) {
  // Code to run if an exception occurs
  [break;]
}[ finally {
  // Code that is always executed regardless of 
  // an exception occurring
}]
//-->
</script>

ログイン後にコピー

try ブロックの後には、catch ブロックまたはfinally ブロック (またはそのいずれか) のみが続く必要があります。 try ブロックで例外が発生した場合、例外は e に配置され、catch ブロックが実行されます。 try/catch ステートメントの後のオプションの Final ブロックは無条件に実行されます。
例:

以下は、例外をスローする存在しない関数を呼び出そうとしている例です。 try...catch を使わずに、どのように動作するかを見てみましょう:

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;

  alert("Value of variable a is : " + a );
 
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

ここで、try ... catch を使用してこの例外をキャッチし、わかりやすいメッセージを表示してみましょう。このエラーをユーザーに見せたくない場合は、このメッセージを抑制することもできます。

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  
  try {
   alert("Value of variable a is : " + a );
  } catch ( e ) {
   alert("Error: " + e.description );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

finally ブロックを使用すると、try/catch ステートメントの後に無条件で永久に実行できます。以下に例を示します:

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  
  try {
   alert("Value of variable a is : " + a );
  }catch ( e ) {
   alert("Error: " + e.description );
  }finally {
   alert("Finally block will always execute!" );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

スローステートメント:

throw ステートメントを使用して、組み込み例外またはカスタム例外を拡張できます。後でこれらの例外を捕捉し、適切なアクションを実行できます。

以下は throw ステートメントの使用例です。

<html>
<head>
<script type="text/javascript">
<!--
function myFunc()
{
  var a = 100;
  var b = 0;
  
  try{
   if ( b == 0 ){
     throw( "Divide by zero error." ); 
   }else{
     var c = a / b;
   }
  }catch ( e ) {
   alert("Error: " + e );
  }
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

文字列、整数、ブール値、またはオブジェクトを使用して関数で例外をスローでき、その後、上記と同じ関数で例外をキャッチしたり、他の関数で try...catch ブロックを使用したりできます。
onerror() 構文

onerror イベントハンドラーは、JavaScript によるエラーの処理を容易にする最初の機能です。ページ上で例外が発生するたびに、ウィンドウオブジェクト上でエラーイベントが発生します。例:

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function () {
  alert("An error occurred.");
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

onerror イベントハンドラーは、エラーの正確な性質を調べるために 3 つの情報を提供します。

エラーメッセージ。ブラウザには、指定されたエラー
URL 。エラーが発生したファイル
行番号。エラーの原因となった URL に指定された行番号。

この情報を抽出する方法の例を次に示します

<html>
<head>
<script type="text/javascript">
<!--
window.onerror = function (msg, url, line) {
  alert("Message : " + msg );
  alert("url : " + url );
  alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>Click the following to see the result:</p>
<form>
<input type="button" value="Click Me" onclick="myFunc();" />
</form>
</body>
</html>

ログイン後にコピー

情報を抽出するのに適していると思われる任意の方法で表示できます。

次のように、onError メソッドを使用すると、画像の読み込み時に問題なくエラーメッセージを表示できます。

<img src="myimage.gif"
  onerror="alert('An error occurred loading the image.')" />

ログイン後にコピー

onerror を使用すると、多くの HTML タグでエラーが発生した場合に、対応する情報を表示できます。