JavaScriptのuse strict(strictモード)は厳格にコードを記述しないとエラーとなるため正しくコードを記述する方は使った方が良いです。
strictモードを使わずに記述することは多々あるのですが、今回strict(厳格)モードと非strictモードで関数の実行結果を試してみます。
Contents
ディスプレイ広告
JavaScript処理を実行させるクリックボタンのCSS記述
※JavaScript処理を実行させるクリックボタン(.clk)のCSS記述です。ここは重要では無いので必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; text-align: center; } h1{ font-size:26px; text-align:center; font-weight:normal; padding:10px 0 20px 0; line-height: 1.4em; } .clk{ width: 500px; margin: 0 auto 20px auto; background-color: #cccccc; font-weight: bold; text-align: center; line-height: 1.7em; cursor: pointer; font-size:14px; padding:8px; } .clk span{ font-size: 20px; font-weight: bold; } </style>
JavaScript処理を実行させるクリックボタンのHTML記述
※クリックボタン(class=”clk”)はonclickでfunc1()、func2()、func3()関数を実行します。
<h1>以下をクリックするとstrict(厳格)モードと非strictモードでエラーとなって関数の実行できない場合と、<br>エラーにならず関数の実行可能な場合を試せます。</h1> <br> <div class="clk" onclick="func1()"><span>ここをクリック</span><br>関数func1(strictモード:変数宣言無し)を実行=変数宣言無しのため実行されず、JavaScriptエラーになる</div> <div class="clk" onclick="func2()"><span>ここをクリック</span><br>関数func2(非strictモード:変数宣言無し)を実行=変数宣言無しだが、非strictモードのため実行される</div> <div class="clk" onclick="func3()"><span>ここをクリック</span><br>関数func3(strictモード:変数宣言有り)を実行=変数宣言有りなので、strictモードで実行される</div>
strict(厳格)モードと非strictモードを実行するJavaScript記述
JavaScript処理実行前に”use strict”を宣言することでstrictモードで実行します。
- 関数func1(strictモード:変数宣言無し)を実行=変数宣言無しのため実行されず、JavaScriptエラーになる
- 関数func2(非strictモード:変数宣言無し)を実行=変数宣言無しだが、非strictモードのため実行される
- 関数func3(strictモード:変数宣言有り)を実行=変数宣言有りなので、strictモードで実行される
上記3パターンの関数を記述してます。
<script type="text/javascript"> function func1(){ "use strict"; x1 = 5; y1 = 7 alert(x1 + y1); } function func2(){ x2 = 5; y2 = 7; alert(x2 + y2); } function func3(){ "use strict"; var x3 = 5; var y3 = 7 alert(x3 + y3); } </script>
【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試すデページ
【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試すデモ
※他のjsプラグインを使う場合プラグインがstrictモードで記述されているとは限らず、その場合バッティングする可能性もあるのでstrictモードは全体に適用するのではなく、関数単位で適用した方が良いです。
※流用される場合は自己責任でお願いします。
デモページ