JavaScript厳格モード(Strict Mode)による開発効率と品質の向上

WebAppの急進的な発展に伴い、Javascriptが書いたWebAppの規模はますます膨大になり、例えば典型的な代表製品であるテンセントWebQQ、HTML 5ゲームなど、Javascriptはますます多くの開発者が協力して開発する必要がある.同時にHTML 5、CSS 3などの新技術とNodeJsプロジェクトの急速な発展は、ここ数年、JavaScript言語が様々な新しいAPIを借りてモバイルデバイスからサーバまでの複数の「新しい分野」に次々と運用されている.
しかし、JavaScript言語自体はECMAScript第4版が放棄されたため、あまり改善されていない.HTML 5の名を借りて過度に宣伝されている様々な新しいAPIに比べて、文法面では厳格なパターン(Strict Mode)による改善はほとんど知られていないと形容できる.厳格なパターンを学んだ後、すぐに実践しなくても、JavaScriptの悪いにおいの一面をより明確に認識し、より良いコードを書くのに役立ちます.以下の内容はIt’s time to start using JavaScript strict mode、著者Nicholas C.ZakasがYUIフレームワークの開発に参加し、多くの先端技術書を執筆し、JavaScriptの厳格なモードに関する入門紹介文章を読んだ中で、この文章が一番よく書かれています.
ECMAScript 5に導入された厳格なモードは、JavaScript実行環境が開発中に最もよく見られるエラーと発見しにくいエラーを現在とは異なる処理することによって、開発者に「より良い」JavaScript言語を持たせる.長い間、Firefoxだけが厳格なモードをサポートしていたので、厳格なモードに疑問を示したことがあります.しかし、今日では、すべての主流のブラウザが最新バージョンで厳格モード(IE 10、Opera 12、Android 4、IOS 5を含む)をサポートしている.
厳格なパターンはどんな役割を果たすことができますか?
厳格なモードはJavaScriptに多くの変化を導入し、私は彼らを2つの種類(明らかと微細)に分けた.細かい改善の目標は現在のJavaScriptのいくつかの詳細な問題を修復することであり、これらの問題についてはここで深く紹介しない.興味があれば、Dmitry Soshnikovが書いた素晴らしいドキュメントECMA-262-5 in Detail Chapter 2 Strict Modeを読んでください.ここでは主に厳格なモードが導入された明らかな変化を紹介します.厳格なモードを使用する前に知っておくべき概念と、あなたを助ける最大の変化を紹介します.
具体的な特性を学ぶ前に、厳格なモードの大きな目標は、より速く、より便利なデバッグであることを覚えておいてください.実行環境では、問題を発見したときの顕著な投げ出しエラーは、黙っていた失敗や奇妙な行動(厳格なモードをオンにしていないJavaScript実行環境ではよくそうである)よりも優れています.厳格なモードはより多くのエラーを投げ出しますが、これは良いことです.これらのエラーは、以前発見されにくい潜在的な問題に注意を喚起し、修復することができます.
WITHキーワードの削除
まず,厳格モードではwith文が除去され,with文を含むコードは厳格モードで異常を放出する.厳格なモードを使用する最初のステップ:あなたのコードにwithが使用されていないことを確認します.

//         JavaScript       
with (location) {
    alert(href);
}

グローバル変数に予期せぬ値を割り当てるのを防止
次に,局所変数は付与前に先に明記しなければならない.厳密モードを有効にする前に、不明なローカル変数をコピーすると、同じ名前のグローバル変数が自動的に作成されます.これはJavacriptプログラムで最も起こりやすいエラーの一つであり、厳格なモードで試してみると顕著な異常が投げ出されます.

//           
(function() {
    someUndeclaredVar = "foo";
}());

 
関数のTHISはデフォルトでグローバルを指しません
厳密モードのもう一つの重要な変化は、関数で定義されていないか、空(null or undefined)のthisがデフォルトでグローバル環境(global)を指していないことです.これにより、依存関数でthis動作をデフォルトで実行するコードの実行エラーが発生します.たとえば、次のようになります.

window.color = "red";
function sayColor() {
    alert(this.color);
}
//  strict      ,              “red"
sayColor();
//  strict      ,              “red"
sayColor.call(null);

 
thisは、割り当てられるまでundefinedとして維持されます.これは、コンストラクション関数が実行されている間に、明確なnewキーワードがない場合、例外が投げ出されることを意味します.

function Person(name) {
    this.name = name;
}
//         
var me = Person("Nicholas");

上のコードでは、Personコンストラクション関数が実行されている間にnewがなかったため、関数のthisはundefinedとして保持されます.undefinedのプロパティを設定できないため、上のコードはエラーを放出します.非strictモード環境では、コピーされていないthisはデフォルトでwindowグローバル変数を指し、実行結果は意外にもwindowグローバル変数にname属性を設定します.
重複の防止
大量のコードを記述すると、オブジェクトのプロパティと関数パラメータが誤って重複した名前に設定されやすくなります.厳格モードはこの場合に顕著な放出エラーが発生します

//      ,         
function doSomething(value1, value2, value1) {
    //code
}

//        ,         :
var object = {
    foo: "bar",
    foo: "baz"
};

以上のコードは厳格モードでは文法エラーとみなされ、実行前にヒントを得ることができます.
安全なEVAL()
eval()文は最終的に削除されませんでしたが、厳密なモードではいくつかの改良が行われています.最大の変更点は、eval()で実行される変数と関数が、現在の役割ドメインで直接対応する変数または関数を作成しないことを示していることです.たとえば、次のようにします.

(function() {
    eval("var x = 10;");
    //       ,alert 10
    //        x         ,
    alert(x);
}());

eval()の実行中に作成された変数または関数は、eval()に保持されます.しかし、eval()文の戻り値からeval()の実行結果を明確に取得できます.たとえば、次のようになります.

(function() {
    var result = eval("var x = 10, y = 20; x + y");
    //  strict  strict               .(resulst 30)
    alert(result);
}());

 
読み取り専用プロパティの変更時に例外を放出
ECMAScript 5には、オブジェクトの特定の属性を読み取り専用に設定したり、オブジェクト全体を変更できないようにしたりする能力も導入されています.ただし、非厳密モードでは、読み取り専用プロパティを変更しようとすると、黙って音を立てないだけで失敗します.いくつかのブラウザのオリジナルAPIと付き合う過程で、このような状況に遭遇する可能性があります.厳格なモードでは、この場合に例外が明確に投げ出され、この属性の変更は許可されていないことを注意します.

var person = {};
Object.defineProperty(person, "name" {
    writable: false,
    value: "Nicholas"
});
//        ,     ,          .
person.name = "John";

上記の例では、nameプロパティは読み取り専用に設定されており、非厳格モードでnameプロパティの変更を実行してもエラーは発生しませんが、変更は成功しません.しかし、厳格なパターンは異常を明確に投げ出す.
NOTE:ECMAScriptプロパティの指定を使用するときに厳格なモードをオンにすることを強くお勧めします.
使用方法
現代のブラウザで厳格なモードをオンにするのは簡単で、JavaScriptコードに以下のコマンドが現れるだけです.

"use strict";

上のコードは変数が与えられていない文字列にすぎないように見えますが、JavaScriptエンジンが厳格なモードに切り替わることを示す役割を果たしています(厳格なモードをサポートしていないブラウザは上記のコードを無視し、後続の実行に影響を与えません).このコマンドをグローバルまたは関数に適用できますが、グローバル環境で厳格なモードを有効にしないでください.

//        
"use strict";
function doSomething() {
    //              
}
function doSomethingElse() {
    //               
}

上のコードは大きな問題ではないように見えますが.しかし、ページに導入されたすべてのコードを維持する責任がない場合、strictモードを使用すると、サードパーティのコードが厳格なモードの準備ができていないため、問題に直面します.
したがって、厳密モードをオンにする命令は、例えば、

function doSomething() {
    "use strict";
    //                  
}
function doSomethingElse() {
    //                 
}

 
厳密モードを複数の関数でオンにしたい場合は、即時実行関数式(immediately-invoked function expression,IIFE)を使用します.

(function() {
    "use strict";
    function doSomething() {
        //            
    }
    function doSomethingElse() {
        //              
    }
}());

 
結論
今からJavaScript厳格モードを有効にすることを強くお勧めします.コードで気づかなかったエラーを発見することができます.グローバル環境では有効にしないでくださいが、IIFE(関数式をすぐに実行)をできるだけ多く使用して、複数の関数の範囲に厳格なモードを適用することができます.最初は、これまで出会ったことのないエラーメッセージに遭遇します.これは正常です.厳格モードが有効になっている場合は、サポートされているブラウザでテストを行って、新しい潜在的な問題を発見してください.コードに「use strict」を1行追加するだけで、残りのコードが正常に動作すると仮定しないでください.最後に、厳格なモードでより良いコードの作成を開始してください.
注意:
ここには、厳格なモードのサポート状況に対するブラウザの要約があります.このページでは、現在のブラウザの厳格なモードサポート度をテストできます.