検索
ホームページウェブフロントエンドjsチュートリアルJavaScript 厳密モード (Strict Mode) の深い理解_JavaScript スキル

ECMAScript5 で導入された厳密モードにより、JavaScript ランタイム環境が開発プロセスで最も一般的で見つけにくいエラーの一部を現在とは異なる方法で処理できるようになるため、開発者は「より良い」JavaScript 言語を使用できるようになります。厳密モードをサポートしているのは Firefox だけだったので、私は長い間、このモードについて懐疑的でした。しかし現在、すべての主要なブラウザが最新バージョン (IE10、Opera12、Android4、IOS5 を含む) でストリクト モードをサポートするようになりました。

厳密モードはどのような役割を果たしますか?

厳密モードでは JavaScript に多くの変更が加えられますが、私はそれらを 2 つのカテゴリ (明らかな変更と微妙な変更) に分類します。小規模な改善の目的は、現在の JavaScript のいくつかの詳細な問題を修正することですが、ここでは詳しく説明しません。興味がある場合は、Dmitry Soshnikov による優れた文書 ECMA-262-5 の第 2 章 Strict Mode を参照してください。 。 ここでは、厳密モードによって導入される明らかな変更、厳密モードを使用する前に知っておくべき概念、および最も役立つ変更に焦点を当てます。

特定の機能の学習を開始する前に、厳密モードの目的の 1 つは、デバッグをより速く、より便利に行えるようにすることであることを思い出してください。ランタイム環境にとっては、(厳密モードを有効にしていない JavaScript ランタイム環境でよくあることですが) 黙って失敗したり、奇妙な動作をしたりするよりも、問題を検出したときに明示的にエラーをスローする方が良いです。厳密モードではより多くのエラーがスローされますが、これらのエラーが注意を呼び、以前は見つけるのが難しかった多くの潜在的な問題が修正されるため、これは良いことです。

キーワードを使用して削除

まず、with ステートメントが strict モードから削除されます。with ステートメントを含むコードは、strict モードで例外をスローします。したがって、厳密モードを使用するための最初のステップは、コード内で with を使用しないようにすることです。

コードをコピーします コードは次のとおりです:

// 次の JavaScript コードは、厳密モードでエラーをスローします
with (場所) {
アラート(href);
}

グローバル変数の誤った割り当てを防止します

次に、値を割り当てる前にローカル変数を宣言する必要があります。厳密モードが有効になる前に、宣言されていないローカル変数をコピーすると、同じ名前のグローバル変数が自動的に作成されます。これは Javascript プログラムで最も一般的なエラーの 1 つであり、これを厳密モードで実行しようとすると、明示的な例外がスローされます。

コードをコピーします コードは次のとおりです:

// 厳密モードでは例外がスローされます
(関数() {
SomeUndeclaredVar = "foo";
}());

関数内の THIS はデフォルトでグローバルを指さなくなりました

厳密モードでのもう 1 つの重要な変更は、未定義または空 (null または未定義) の関数内の this がデフォルトでグローバル環境 (global) を指さなくなったことです。これにより、次のような関数のデフォルトの this 動作に依存する一部のコードの実行でエラーが発生します。

コードをコピーします コードは次のとおりです:
window.color = "赤";
関数sayColor() {
アラート(this.color);
}
// 厳密モードではエラーが報告されます。厳密モードでない場合は、「red」
が表示されます。 SayColor();
// 厳密モードではエラーが報告されます。厳密モードでない場合は、「red」
が表示されます。 SayColor.call(null);

これは割り当てられるまで未定義のままです。つまり、コンストラクターの実行時に、前に明確な新しいキーワードが存在しない場合、例外がスローされます。

コードをコピーします コードは次のとおりです:
関数 人(名前) {
This.name = 名前;
}
//厳密モードではエラーが報告されます
var me = 人("ニコラス");

上記のコードでは、パーソン コンストラクターが実行されると、前に new がないため、関数内の this は未定義のままになります。未定義のプロパティを設定できないため、上記のコードはエラーをスローします。 非厳密モード環境では、コピーされない this はデフォルトで window グローバル変数を指し、操作の結果、window グローバル変数の name 属性が誤って設定されてしまいます。

名前の重複を防止します

大量のコードを記述する場合、オブジェクトのプロパティと関数のパラメーターを誤って重複した名前に設定してしまうことがよくあります。この場合、厳密モードでは明示的にエラーがスローされます

コードをコピー コードは次のとおりです:

//変数名が重複すると、厳密モードではエラーが報告されます
function doSomething(value1, value2, value1) {
//コード
}
// オブジェクト属性名が重複すると、厳密モードではエラーが報告されます:
var オブジェクト = {
foo: "バー"、
foo: 「バズ」
};

上記のコードは、厳密モードでは構文エラーとみなされ、実行前にプロンプ​​トが表示されます。

安全な EVAL()

eval() ステートメントは最終的には削除されませんでしたが、厳密モードでは依然としていくつかの改善が加えられました。最大の変更点は、 eval() で実行される変数および関数の宣言が、現在のスコープ内に対応する変数または関数を直接作成しないことです。次に例を示します。

コードをコピーします コードは次のとおりです:

(関数() {
eval("var x = 10;");
// 非厳密モードでは、アラート 10
// 厳密モードでは、x が定義されていないため、例外がスローされます。
アラート(x);
}());

eval() の実行中に作成された変数または関数はすべて eval() に保持されます。ただし、eval() ステートメントの戻り値から、eval() の実行結果を明確に取得できます。例:

コードをコピーします コードは次のとおりです:

(関数() {
var result = eval("var x = 10, y = 20; x y");
//残りのステートメントは、厳密モードまたは非厳密モードで正しく実行できます (結果は 30)
。 アラート(結果);
}());

読み取り専用プロパティを変更するときに例外がスローされました

ECMAScript5 では、オブジェクトの特定のプロパティを読み取り専用に設定したり、オブジェクト全体を変更不能にしたりする機能も導入されています。 ただし、非厳密モードでは、読み取り専用プロパティを変更しようとするとエラーが表示されずに失敗します。 一部のブラウザーのネイティブ API を処理しているときに、この状況が発生する可能性があります。この場合、厳密モードでは明示的に例外がスローされ、このプロパティの変更が許可されていないことが通知されます。

コードをコピーします コードは次のとおりです:

var person = {};
Object.defineProperty(人, "名前" {
書き込み可能: false、
値: 「ニコラス」
});
// 非厳密モードではサイレント障害が発生し、厳密モードでは例外がスローされます。 person.name = "ジョン";

上記の例では、name 属性は読み取り専用に設定されており、非厳密モードで name 属性を変更してもエラーは発生しませんが、変更は成功しません。ただし、厳密モードでは明示的に例外がスローされます。

注: ECMAScript プロパティ属性仕様を使用する場合は、厳密モードを有効にすることを強くお勧めします。

使い方は?

最新のブラウザで厳密モードをオンにするのは非常に簡単です。JavaScript コードに次のコマンドを入力するだけです

「厳密に使用する」;


上記のコードは変数に割り当てられていない単なる文字列であるように見えますが、実際には JavaScript エンジンに厳密モードに切り替えるよう指示しています (厳密モードをサポートしていないブラウザは上記のコードを無視し、何も実行しません)その後の実行への影響)。このディレクティブはグローバルまたは特定の関数に適用できますが、グローバル環境では厳密モードを有効にしないように注意する必要があります。

コードをコピーします コードは次のとおりです:
// このように使用しないでください
"厳密な使用";
関数 doSomething() {
// コードのこの部分は厳密モードで実行されます
}
関数 doSomethingElse() {
// コードのこの部分は、厳密モードでも実行されます
}


上記のコードは大きな問題ではないようですが。ただし、ページに紹介されているすべてのコードを保守する責任がない場合、この方法で厳密モードを使用すると、厳密モード用に準備されていないサードパーティのコードによって引き起こされる問題にさらされることになります。
したがって、関数内で厳密モードを有効にする命令を適用するのが最善です。例:

コードをコピー コードは次のとおりです:

関数 doSomething() {
"厳密な使用";
//この関数のコードは厳密モードで実行されます
}
関数 doSomethingElse() {
//この関数のコードは厳密モードでは実行されません
}


複数の関数で厳密モードを有効にしたい場合は、即時呼び出し関数式 (IIFE) を使用します:

コードをコピーします コードは次のとおりです:

(関数() {
"厳密な使用";
関数 doSomething() {
// この関数は厳密モードで実行されます
}
関数 doSomethingElse() {
// この関数は厳密モードでも実行されます
}
}());

結論

今後は JavaScript 厳密モードを有効にすることを強くお勧めします。これにより、コード内の気付かないエラーを見つけることができます。グローバルに有効にしないでください。ただし、IIFE (関数式の即時実行) を可能な限り使用して、複数の関数スコープに厳密モードを適用できます。最初は、これまでに見たことのないエラー メッセージが表示されますが、これは正常な現象です。厳密モードを有効にする場合は、サポートされているブラウザで必ずテストして、新たな潜在的な問題を特定してください。コードに「use strict」行を追加するだけで、コードの残りの部分が機能すると想定しないでください。最後に、厳密モードでより適切なコードの作成を開始します。

注:
以下は、さまざまなブラウザーでの厳密モードのサポートの概要です。
このページでは、現在のブラウザーの厳密モードのサポートをテストできます。

厳密モードの利点:

JavaScript を強化する
1. これはカプセル化されなくなりました。通常モードでは、これは常にオブジェクトです。
2. Fun.caller および fun.arguments は削除できる属性ではなく、設定または取得もできません。
3. Arguments.caller も削除できない属性であり、設定や取得もできません。

将来の ECMAScript バージョンへの道を開く
1. 次の予約語が追加されました:implements、interface、let、package、private、protected、public、static、および yield。
2. メソッド宣言は、if や for などのステートメントの途中ではなく、スクリプトまたはメソッドの先頭に配置する必要があります。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境