無料学習の推奨事項: JavaScript 学習チュートリアル
# #1. JavaScript とは
1-1. JavaScript の実装
JavaScript と ECMAScript は基本的に同義語ですが、JavaScript は ECMA-262 に限定されるわけではありません。定義されています。完全な JavaScript 実装には次のものが含まれます: 基本レベルでは、言語を説明します: 構文、型、ステートメント、キーワード、予約語、演算子、グローバル オブジェクト
。 JavaScript は ECMAScript を実装し、Adobe ActionScript も
ECMAScript を実装します。
1-2、DOM
ドキュメント オブジェクト モデル (DOM、ドキュメント オブジェクト モデル) は、HTML XML の拡張機能を使用するためのアプリケーション プログラミング インターフェイス (API) です。 DOM は、ページ全体を一連の階層ノードに抽象化します。 HTML または XML ページの各コンポーネントは、異なるデータを含むノードです。
DOM を使用すると、開発者はドキュメントを表すツリーを作成することで、Web ページのコンテンツと構造を自由に制御できます。 DOM API を使用すると、ノードを簡単に削除、追加、置換、変更できます。
IE3 および Netscape Navigator 3 は、ブラウザ ウィンドウへのアクセスと操作をサポートする
Browser Object Model(BOM) API を提供します。 。 BOM を使用すると、開発者はブラウザに表示される内容以外のページの部分を制御できます。 BOM の真にユニークな点、そして確かに最も問題があるのは、関連する標準が存在しない唯一の JavaScript 実装であることです。 HTML5 ではこの状況が変わり、このバージョンの HTML では、正式な仕様の形で可能な限り多くの BOM 機能がカバーされます。 HTML5 の登場により、BOM に関連するこれまでの問題の多くが解決されました。 一般に、BOM は主にブラウザ ウィンドウとサブウィンドウ (フレーム) を対象としていますが、
ユーザーは通常、ブラウザ固有の拡張機能を BOM の範囲内に置きます。そのような拡張機能の例を次に示します。2-1、script
要素 JavaScript を HTML に挿入する主な方法は、script 要素を使用することです。この 要素は Netscape によって作成され、Netscape Navigator 2 で最初に実装されました。その後、この要素は HTML 仕様に正式に追加されました。 script 要素には、以下に示す 8 つの属性があります。
#async
: オプション。スクリプトのダウンロードをすぐに開始する必要がありますが、リソースのダウンロードや他のスクリプトの読み込みの待機など、他のページのアクションを妨げることはできないことを示します。外部スクリプト ファイルに対してのみ有効です。
integrity : オプション。受信したリソースと指定された暗号署名を比較して、サブリソースの整合性 (SRI) を検証できます。受信したリソースの署名がこの属性で指定された署名と一致しない場合、ページはエラーを報告し、スクリプトは実行されません。この属性は、コンテンツ配信ネットワーク (CDN) が悪意のあるコンテンツを提供しないようにするために使用できます。
src: オプション。実行されるコードを含む外部ファイルを表します。
タイプ : オプション。 language の代わりに、コード ブロック内のスクリプト言語のコンテンツ タイプ (MIME タイプとも呼ばれます) を表します。
スクリプトに含まれるコードは上から下に解釈されます
2-2、
src を使用します。属性の script 要素には、script タグと /script タグ内に他の JavaScript コードを含めることはできません。両方が指定されている場合、ブラウザはインライン コードを無視して、スクリプト ファイルをダウンロードして実行するだけです。
script 要素の最も強力で物議を醸している機能の 1 つは、外部ドメインからの JavaScript ファイルを含めることができることです。 img 要素と同様に、script 要素の src 属性は完全な URL にすることができ、この URL が指すリソースは、それを含む HTML ページと同じドメインに存在することはできません。
2 -3. ドキュメント モード
doctype を使用してドキュメント モードを切り替えることができます。初期ドキュメント モードには、混合モード (互換モード) と 標準モード (標準モード) の 2 つがあります。前者は IE を IE5 のようにし (いくつかの非標準機能をサポート)、後者は IE を標準に準拠した動作にします。 2 つのモードの主な違いは CSS を通じてレンダリングされるコンテンツのみですが、JavaScript には関連する効果や副作用もいくつかあります。これらの副作用については、本書で頻繁に言及されます。
IE が最初にドキュメント モードの切り替えをサポートした後、他のブラウザもこれに追随しました。ブラウザの実装が広く普及するにつれて、3 番目のドキュメント モード、準標準モード (ほぼ
標準モード) が登場しました。このモードのブラウザは多くの標準機能をサポートしますが、標準ほど厳密ではありません。主な違いは、画像要素の周囲の空白の処理方法です (表で画像を使用する場合に最も顕著です)。
混合モードは、ドキュメントの先頭の doctype 宣言を省略することにより、すべてのブラウザで切り替えられます。混合モードはブラウザごとに大きく異なり、基本的にブラック テクノロジを使用しない限りブラウザの一貫性は存在しないため、この合意は不合理です。
2-4. noscript 要素
初期のブラウザが JavaScript をサポートしていないという問題を考慮して、ページの正常な劣化に対する解決策が必要です。最終的に、この要素は出現し、JavaScript をサポートしていないブラウザに代替コンテンツを提供するために使用されました。現在のブラウザはすでに JavaScript を 100% サポートしていますが、この要素は JavaScript を無効にするブラウザでもまだ使用できます。
要素には、次の場所に表示できる任意の HTML 要素を含めることができます。
3. 文法の基本
3-1. 文法
最初に知っておくべきことは、ECMAScript のすべては次のとおりであるということです。サイズに依存した書き込み。変数、関数名、演算子のいずれであっても、大文字と小文字が区別されます。つまり、変数 test と変数 Test は 2 つの異なる変数です。同様に、typeof はキーワードであるため、関数名として使用できません (これについては後で詳しく説明します)。ただし、Typeof は完全に有効な関数名です。
3-2. 識別子
いわゆる識別子は、変数、関数、属性、または関数パラメーターの名前です。識別子は、次の文字の 1 つ以上で構成できます:
識別子の文字には、拡張 ASCII (拡張 ASCII) の文字、または À や Æ などの Unicode アルファベット文字を使用できます (ただし、これはお勧めしません)。
慣例により、ECMAScript 識別子はキャメル ケースを使用します。つまり、最初の単語の最初の文字は小文字で、後続の各単語の最初の文字は大文字になります。
3-3 . 厳密モード
ECMAScript 5 では、厳密モードの概念が追加されています。 Strict モードは、別の JavaScript 解析および実行モデルです。ECMAScript 3 の一部の非標準記述メソッドはこのモードで処理され、安全でないアクティビティ
#3-4 、キーワードおよび予約語
ECMA-262 は、制御ステートメントの開始と終了を示したり、特定の操作を実行したりするなど、特別な用途を持つ一連の予約キーワードを記述します
ECMA-262 第 6 版で指定されているすべてのキーワード:
break do in typeof case else instanceof var catch export new void class extends return while const finally super with continue for switch yield debugger function this default if throw delete import try
将来の予約語のセットも仕様書に記載されており、同様に識別子や属性名として使用することはできません。予約語には言語内で特別な目的はありませんが、将来のキーワード使用のために予約されています
3-5.変数
ECMAScript 変数は緩やかに型付けされており、変数はあらゆる種類のデータを保持するために使用できます。各変数は、任意の値を保持するために使用される名前付きプレースホルダーにすぎません。変数を宣言するには、var、const、let の 3 つのキーワードがあります。このうち、var は CMAScript のすべてのバージョンで使用できますが、const と let は ECMAScript 6 以降のバージョンでのみ使用できます
3-6、var キーワード
var 宣言スコープ
主な問題は、var 演算子を使用して定義された変数が、それを含む関数のローカル変数になることです。たとえば、関数内で変数を定義するために var を使用すると、関数が終了するときに変数が破棄されることを意味します。
var 宣言のプロモーション
var を使用する場合、次のコードは次のコードを実行しません。エラーが報告されます。これは、このキーワードを使用して宣言された変数が自動的に関数スコープの先頭に昇格されるためです
3-7。その後に var を指定すると同じことを行いますが、非常に重要な違いがあります。最も明らかな違いは、let 宣言のスコープがブロック スコープであるのに対し、var 宣言のスコープは関数スコープであることです。
let が現れる前に、for ループで定義された反復変数がループ本体の外側に侵入します
const の動作は次のとおりです。基本的に let と同じですが、唯一の違いは、変数を宣言するときに変数を初期化する必要があり、const で宣言された変数を変更しようとすると実行時エラーが発生することです。
3-8. 宣言スタイルとベスト プラクティス
var を使用しない let と const を使用すると、ほとんどの開発者は var が不要になることに気づくでしょう。 let と const に制限すると、変数には明確なスコープ、宣言の場所、不変の値があるため、コードの品質が向上します。
const が優先され、2 番目に配置されます
const 宣言を使用すると、ブラウザの実行中に変数を強制的に変更しないようにすることができ、静的コード分析ツールが不正な代入操作を事前に検出できるようにすることもできます。したがって、多くの開発者は、変数は最初に const を使用して宣言する必要があり、将来変更があることが事前にわかっている場合にのみ let を使用する必要があると考えています。これにより、開発者は、特定の変数の値が決して変更されないことをより自信を持って推測できるようになり、また、誤った代入によって引き起こされる予期せぬ動作を迅速に検出することもできます。4-1. 演算子の種類
ECMAScript システムは緩いため、変数のデータ型を決定する手段が必要です。ここで typeof 演算子が登場します。値に対して typeof 演算子を使用すると、次の文字列のいずれかが返されます:
"unknown" は値が未定義であることを意味します;"boolean" は値がブール値であることを意味します; "string" は値を意味しますは文字列です; "number" は値が数値であることを意味します;
"object" は値がオブジェクト (関数ではない) または null であることを意味します; "function" は値が関数であることを意味します;
「シンボル」は、値がシンボルであることを意味します。
4-2. 未定義型
未定義型には値が 1 つだけあり、それは特別な値 unknown です。変数が var または let を使用して宣言されているが初期化されていない場合、それは変数に未定義の値を割り当てることと同じです。
初期化されていない変数には自動的に未定義の値が割り当てられますが、それでも、変数も同時に初期化します。こうすることで、typeof が「未定義」を返した場合、指定された変数が宣言されたものの初期化されていないためではなく、まだ宣言されていないことが原因であることがわかります。
4-3. Null 型Null 型にも値は 1 つだけあり、それは特別な値 null です。論理的に言えば、null 値は null オブジェクト ポインターを表します。そのため、typeof に null を渡すと「object」が返されます。
将来オブジェクト値を格納する変数を定義する場合は、null を使用することをお勧めします。他の値を使用してください。このように、この変数の値が null かどうかを確認するだけで、この変数に後でオブジェクトへの参照が再割り当てされるかどうかを知ることができます。
等号演算子 (==) を使用して null と未定義を比較すると、常に true が返されます。ただし、この演算子は比較のためにオペランドを変換することに注意してください。
null と unknown は関連していますが、その用途はまったく異なります。前に述べたように、変数値を明示的に unknown に設定する必要はありません。しかしヌルはそうではありません。変数がオブジェクトを保持していて、そのようなオブジェクトが存在しない場合は常に、変数を null で埋める必要があります。これにより、null が null オブジェクトへのポインタであるというセマンティクスが保持され、さらに未定義と区別されます。
null は偽の値です。したがって、必要に応じて、より簡潔な方法で検出できます。ただし、他にも false である可能性のある値が多数あることに注意してください。したがって、検出したいのは単なる偽の値ではなく、null のリテラル値であることを明確にする必要があります。
4-4、ブール型
Boolean (ブール値) 型 ECMAScript で最も頻繁に使用される型の 1 つで、true と false の 2 つのリテラル値があります。これら 2 つのブール値は数値とは異なるため、true は 1 に等しくなく、false は 0 に等しくありません。
注: ブール リテラル true と false は大文字と小文字が区別されるため、True と False (およびその他のケース混合形式) は有効な識別子ですが、ブール値ではありません。
4-5. 数値型
おそらく ECMAScript で最も興味深いデータ型は数値です。 Number 型は、IEEE 754 形式を使用して整数と浮動小数点値 (一部の言語では倍精度値とも呼ばれます) を表します。数値型が異なれば、それに応じて数値リテラル形式も異なります。
浮動小数点値
浮動小数点値を定義するには、値に小数点が含まれており、小数点の後に次の文字が続く必要があります。
番号が 1 つありません。小数点の前に整数を付ける必要はありませんが、小数点の前に整数を付けることをお勧めします。
値の範囲
メモリの制限により、ECMAScript は世界のすべての値の表現をサポートしません。 ECMAScript が表現できる最小値は Number.MIN_VALUE に格納されます。この値は、ほとんどのブラウザでは 5e-324 です。表現できる最大値は、Number.MAX_VALUE に格納されます。ほとんどのブラウザでは、この値は 1.797 693 134 862 315 です。 7e 308。計算の数値結果が JavaScript が表現できる範囲を超える場合、値は特別な Infinity 値に自動的に変換されます。表現できない負の数は -Infinity (負の無限大) で表され、表現できない正の数は Infinity (正の無限大) で表されます。計算で正の Infinity または負の Infinity が返された場合、その値をそれ以降の計算で使用することはできません。これは、Infinity には計算に使用できる数値表現がないためです。値が有限であるかどうか (つまり、JavaScript が表現できる最小値と最大値の間) を判断するには、isFinite() 関数
NaN
を使用できます。値は特殊です。値は NaN と呼ばれます。これは「数値ではない」を意味し、値を返すはずだった操作が (エラーをスローするのではなく) 失敗したことを示すために使用されます。たとえば、他の言語では通常、数値をゼロで除算するとエラーが発生し、コードの実行が中止されます。ただし、ECMAScript では、0、0、または -0 による除算は NaN
数値変換
数値以外の値を数値に変換できる関数が 3 つあります。 ()、parseInt ()、および parseFloat()。 Number() は、あらゆるデータ型に使用できる変換関数です。後の 2 つの関数は主に文字列を数値に変換するために使用されます。同じパラメータに対して、これら 3 つの関数は異なる演算を実行します。
4-6、NaN
NaN と呼ばれる特別な値があります。これは、「Not aNumber」(Not aNumber) を意味し、次の目的で使用されます。値を返すはずの操作が (エラーをスローするのではなく) 失敗したことを示します。4-7. 数値変換
数値以外の値を数値に変換できる関数は、Number()、parseInt()、parseFloat の 3 つです。 ()。 Number() は、あらゆるデータ型に使用できる変換関数です。後の 2 つの関数は主に文字列を数値に変換するために使用されます。同じパラメータに対して、これら 3 つの関数は異なる演算を実行します。 Number() 関数は、次の規則に基づいて変換を実行します。ブール値。true は 1 に変換され、false は 0 に変換されます。
4-8. 文字列型
String (文字列) データ型は、0 個以上の 16 ビット Unicode 文字シーケンスを表します。文字列は二重引用符 (")、一重引用符 (')、またはバックティック (`) でマークできます。
文字リテラル
文字列の特性
文字列に変換
テンプレート リテラル
ECMAScript 6 では、テンプレート リテラルを使用して文字列を定義する機能が追加されています。一重引用符や二重引用符を使用するのとは異なり、テンプレート リテラルは改行文字を保持し、複数行にわたる文字列を定義できます。
文字列補間
テンプレート リテラルの最も一般的に使用される機能の 1 つは、文字列をサポートすることです。補間とは、1 つ以上の値を連続定義に挿入できることを意味します。技術的に言えば、テンプレート リテラルは文字列ではなく、特殊な JavaScript 構文式ですが、評価後の結果は文字列になります。テンプレート リテラルは、定義されるとすぐに評価されて文字列インスタンスに変換され、挿入された変数も最も近いスコープから値を取得します。
テンプレート リテラル ラベル関数
Templateリテラルはタグ関数の定義もサポートしており、補間動作はタグ関数を通じてカスタマイズできます。 label 関数は、補間トークンで区切られたテンプレートと各式の評価結果を受け取ります。タグ関数自体は、テンプレート リテラルにプレフィックスを付けることでカスタム動作を適用する通常の関数です。
元の文字列
テンプレート リテラルを使用して、元のテンプレート リテラルを直接取得することもできます。変換された文字表現ではなく、コンテンツ (改行文字や Unicode 文字など)。この目的のために、デフォルトの String.raw タグ関数
5 を使用できます。データ値には、数学演算子 (加算、減算など)、ビット演算子、関係演算子、等価演算子などの演算子を使用できます。 ECMAScript の演算子は、文字列、数値、ブール値、さらにはオブジェクトを含むさまざまな値に使用できるという点で独特です。オブジェクトに適用される場合、演算子は通常、valueOf() メソッドや toString() メソッドを呼び出して、計算可能な値を取得します。 3.5.1 単項演算子 1 つの値のみを操作する演算子を単項演算子と呼びます。単項演算子は、ECMAScript の最も単純な演算子です。
5-1. 単項演算子
インクリメント/デクリメント演算子
インクリメント演算子とデクリメント演算子は C 言語から直接コピーされていますが、 two プレフィックス バージョンとサフィックス バージョンの 2 つのバージョンがあります。名前が示すように、プレフィックス バージョンは演算対象の変数の前に配置され、サフィックス バージョンは演算対象の変数の後に配置されます。接頭辞のインクリメント演算子は、値に 1 を加えます。変数
#5-2. ビット演算子
ビット単位の NOT
Logical NOT
乗算演算子
乗算演算子はアスタリスク (*) で表され、2 つの値の値を計算するために使用できます。
除算演算子
モジュラム演算子
6. ステートメント
ECMA-262 では、いくつかのステートメント (フロー制御ステートメントとも呼ばれます) について説明しており、ECMAScript の構文のほとんどが声明。通常、ステートメントでは 1 つ以上のキーワードを使用して、特定のタスクを実行します。ステートメントは単純な場合もあれば、複雑な場合もあります。関数に終了を指示するような単純なものもあれば、繰り返し実行する一連の命令をリストするような複雑なものもありえます。
6-1. do-while ステートメント
do-while ステートメントは、テスト後のループ ステートメント、つまり、ループ本体のコードがテストされた後のステートメントです。実行されました
この場合にのみ、終了条件が評価されます。つまり、ループ本体内のコードが少なくとも 1 回実行されます。終了条件を検出してから、ループ内のコードを実行します。
7. 関数
関数はステートメントをカプセル化できるため、あらゆる言語の中核コンポーネントです。いつでもどこでも。 ECMAScript の関数は、function キーワードを使用して宣言され、その後にパラメーターのセットが続き、その後に関数本体が続きます。 ECMAScript の関数は、値を返すかどうかを指定する必要はありません。どの関数でも、いつでも return ステートメントを使用して関数の値を返すことができ、その後に返される値が続きます。関数 sum() は 2 つの値を加算して結果を返します。 return ステートメント以外に、関数が戻り値を持つという特別な宣言がないことに注意してください。
Strict モードでは、関数にもいくつかの制限があります:関数に eval または引数の名前を付けることはできません。関数のパラメータは eval または引数を呼び出すことができません;
2 つの関数のパラメータを同じ名前で呼び出すことはできません。8. 変数、スコープ、メモリ
4-1. 元の値と参照値
ECMAScript 変数には次のものが含まれます2 つの異なるタイプのデータ: プリミティブ値と参照値。プリミティブ値は最も単純なデータであり、参照値は複数の値から構成されるオブジェクトです。 変数に値を割り当てるとき、JavaScript エンジンはその値がプリミティブ値であるか参照値であるかを判断する必要があります。前の章では、6 つのプリミティブ値 (未定義、Null、ブール値、数値、文字列、シンボル) について説明しました。生の値を保持する変数は、変数に格納されている実際の値を操作しているため、値によってアクセスされます。
参照値はメモリに格納されているオブジェクトです。他の言語とは異なり、JavaScript ではメモリ位置への直接アクセスが許可されていないため、オブジェクトが配置されているメモリ空間を直接操作することはできません。オブジェクトを操作する場合、実際に操作されるのはオブジェクトそのものではなく、オブジェクトへの参照です。この目的のために、参照値を保持する変数は参照によってアクセスされます。注: 多くの言語では、文字列はオブジェクトを使用して表現されるため、参照型とみなされます。 ECMAScript はこの慣例を破ります。
動的プロパティ
元の値と参照値の定義は非常に似ており、どちらも変数を作成し、それに値を割り当てます。ただし、変数が値を保持した後にその値に対して何ができるかは、まったく異なります。参照値については、そのプロパティとメソッドをいつでも追加、変更、削除できます。値をコピー
さまざまな保存方法に加えて、元の値と参照値も変数を介してコピーされると、差異が生じます。変数を介して元の値を別の変数に割り当てる場合、元の値は新しい変数の場所にコピーされます。パラメータを値によって渡す場合、値はローカル変数 (名前付きパラメータ、ECMAScript 用語では引数オブジェクトのスロット) にコピーされます。パラメーターを参照渡しする場合、メモリ内の値の場所はローカル変数に保存されます。つまり、ローカル変数への変更は関数の外部に反映されます
定義により、すべての参照値は Object のインスタンスであるため、instanceof 演算子とオブジェクト コンストラクターは true を返します。同様に、instanceof を使用してプリミティブ値を検出すると、プリミティブ値はオブジェクトではないため、常に false が返されます。
typeof 演算子は、関数の検出に使用される場合には「function」も返すことに注意してください。 Safari (Safari 5 まで) および Chrome (Chrome 7 まで) で正規表現を検出するために使用される場合、実装の詳細により、 typeof は "function" も返します。 ECMA-262 では、内部 [[Call]] メソッドを実装するオブジェクトは typeof 検出時に「function」を返す必要があると規定しています。上記のブラウザの正規表現はこのメソッドを実装しているため、typeof は正規表現の「関数」も返します。 IE および Firefox では、typeof は正規表現の「オブジェクト」を返します。
4-2. 実行コンテキストとスコープ
実行コンテキスト (ここでは「コンテキスト」と呼びます) の概念は、JavaScript において非常に重要です。変数または関数のコンテキストによって、アクセスできるデータとその動作が決まります。各コンテキストには関連付けられた変数オブジェクトがあり、
このコンテキストで定義されたすべての変数と関数はこのオブジェクト上に存在します。変数オブジェクトにはコードからアクセスできませんが、バックグラウンドでデータを処理するために使用されます。
グローバル コンテキストは、最も外側のコンテキストです。 ECMAScript 実装のホスト環境に応じて、グローバル コンテキストを表すオブジェクトが異なる場合があります。ブラウザでは、グローバル コンテキストはウィンドウ オブジェクトとよく呼ばれるものです (詳細は第 12 章で紹介します)。そのため、
var で定義されたすべてのグローバル変数と関数は、ウィンドウ オブジェクトのプロパティとメソッドになります。 let と const を使用したトップレベルの宣言はグローバル コンテキストでは定義されませんが、スコープ チェーンの解決には同じ効果があります。コンテキストは、定義されているすべての変数や関数を含め、すべてのコードが実行された後に破棄されます (グローバル コンテキストは、Web ページを閉じるかブラウザを終了するなど、アプリケーションが終了するまで破棄されません)。
各関数呼び出しには独自のコンテキストがあります。コード実行フローが関数に入ると、関数のコンテキストがコンテキスト スタックにプッシュされます。関数が実行されると、コンテキスト スタックは関数コンテキストをポップし、制御を前の実行コンテキストに返します。 ECMAScript
プログラムの実行フローは、このコンテキスト スタックを通じて制御されます。コンテキスト内のコードが実行されると、変数オブジェクトのスコープ チェーンが作成されます。このスコープ チェーンは、コンテキストの各レベルでコードによって変数と関数にアクセスされる順序を決定します。コードが実行されているコンテキストの変数オブジェクトは、常にスコープ チェーンの先頭にあります。コンテキストが関数の場合、そのアクティブ化オブジェクトが変数オブジェクトとして使用されます。アクティブなオブジェクトには、最初は 1 つの変数 (引数) だけが定義されています。 (グローバル コンテキストにはそのような変数はありません。) スコープ チェーン内の次の変数オブジェクトは、それを含んでいるコンテキストから取得され、次のオブジェクトはその後、それを含んでいるコンテキストから取得されます。グローバル コンテキストまで同様に、グローバル コンテキストの変数オブジェクトは常にスコープ チェーンの最後の変数オブジェクトになります
スコープ チェーンの強化
実行コンテキストには主にグローバル コンテキストと関数 コンテキストは 2 つあります (3 番目のコンテキストは eval() 呼び出し内に存在します)。ただし、スコープ チェーンを拡張する方法は他にもあります。特定のステートメントにより、スコープ チェーンの先頭にコンテキストが一時的に追加されます。このコンテキストは、コード
の実行後に削除されます。
変数宣言
ES6 以降、JavaScript の変数宣言は劇的に変更されました。
ECMAScript 5.1 までは、var が変数を宣言するための唯一のキーワードでした。 ES6 では
let と const キーワードが追加されただけでなく、これら 2 つのキーワードが
var を圧倒的に上回って第一候補になります。
var を使用した関数スコープ宣言
var を使用して変数を宣言すると、変数は最も近いコンテキストに自動的に追加されます。関数内で最も近いコンテキストは、関数のローカル コンテキストです。 with ステートメントでは、最も近いコンテキストは関数コンテキストでもあります。変数を宣言せずに初期化すると、その変数は自動的にグローバル コンテキストに追加されます。注: 変数を宣言せずに初期化することは、JavaScript プログラミングでよくある間違いであり、多くの問題を引き起こす可能性があります。このため、リーダーは変数を初期化する前に変数を宣言する必要があります。厳密モードでは、宣言せずに変数を初期化するとエラーが発生します。
var 宣言は、スコープ内のすべてのコードの前に、関数またはグローバル スコープの先頭に移動されます。この現象を「巻き上げ」といいます。ホイスティングを使用すると、同じスコープ内のコードで変数が宣言されているかどうかを気にせずに変数を使用できるようになります。ただし、実際には、プロモーションによって、宣言される前に変数が使用されるという、正当ではあるが奇妙な現象が発生する可能性もあります。
let's ブロックレベルのスコープ宣言を使用する
ES6 の新しい let キーワードは var に非常によく似ていますが、そのスコープはブロックレベルであり、これは JavaScript の場合にも当てはまります。コンセプト。ブロックレベルのスコープは、最も近い中括弧 {} のペアで区切られます。言い換えれば、if ブロック、while ブロック、関数ブロック、さらには個々のブロックも let 宣言された変数のスコープになります。
const 定数宣言を使用する
let に加えて、ES6 では const キーワードも追加されています。 const を使用して宣言された変数も、値に初期化する必要があります。一度宣言すると、ライフサイクル中いつでも新しい値を再割り当てすることはできません。
開発実践では、開発プロセスがこれによって大きな影響を受けない場合、将来再割り当てされる変数が本当に必要な場合を除き、できる限り const 宣言を使用する必要があります。これにより、再割り当てによって発生するバグを事前に確実に発見できるようになります。
4-3. ガベージ コレクション
JavaScript はガベージ コレクションを使用する言語です。前記実行環境は、コードの実行中にメモリを管理する役割を担う。 C や C などの言語では、メモリ使用量の追跡は開発者にとって大きな負担であり、多くの問題の原因となります。 JavaScript は開発者をこの負担から解放し、自動メモリ管理を通じてメモリ割り当てとアイドル リソースのリサイクルを実装します。基本的な考え方は単純です。どの変数が使用されなくなるかを判断し、その変数が占有しているメモリを解放します。このプロセスは周期的です。つまり、ガベージ コレクション プログラムは一定の間隔 (またはコード実行中のスケジュールされた収集時間) で自動的に実行されます。ガベージ コレクション プロセスは、近似的で不完全な解決策です。なぜなら、メモリの特定の部分がまだ役立つかどうかは「決定できない」問題であり、アルゴリズムでは解決できないことを意味するからです。
関数内のローカル変数の通常のライフサイクルを例として取り上げます。関数内のローカル変数は、関数が実行されるときに存在します。このとき、スタック (またはヒープ) メモリは、対応する値を保存するためのスペースを割り当てます。関数は内部で変数を使用してから終了します。この時点で、ローカル変数は不要になり、ローカル変数が占有しているメモリは後で使用できるように解放できます。この場合、ローカル変数が不要であることは明らかですが、常に明らかであるとは限りません。ガベージ コレクターは、メモリを再利用するために、どの変数がまだ使用されており、どの変数が使用されなくなったかを追跡する必要があります。未使用の変数をマークする方法の実装は異なる場合があります。ただし、ブラウザ開発の歴史では、マークアップのサニタイズと参照カウントという 2 つの主要なマークアップ戦略が使用されてきました。
マーク スイープ
JavaScript で最も一般的に使用されるガベージ コレクション戦略は、マーク アンド スイープです。関数内で変数を宣言するなど、変数がコンテキストに入る場合、その変数はコンテキスト内に存在するものとしてマークされます。コンテキスト内にない変数は、コンテキスト内のコードが実行されている限り使用される可能性があるため、論理的にはメモリを解放すべきではありません。変数がコンテキストを離れると、その変数もコンテキストを離れるとマークされます。
変数にタグを付ける方法はたくさんあります。たとえば、変数がコンテキストに入ったときに、特定のビットを反転したり、「コンテキスト内」と「コンテキスト外」の変数の 2 つのリストを維持したり、一方のリストから別のリストに変数を移動したりできます。採点プロセスの実装は重要ではなく、鍵となるのは戦略です。
ガベージ コレクション プログラムが実行されると、メモリに格納されているすべての変数にマークが付けられます (マークを付ける方法はたくさんあることを思い出してください)。次に、コンテキスト内のすべての変数と、コンテキスト内の変数によって参照される変数からタグが削除されます。これ以降にマークされた変数は、コンテキスト内のどの変数にもアクセスできなくなるため、削除の対象となります。次に、ガベージ コレクターはメモリ クリーンアップを実行し、マークされた値をすべて破棄し、メモリを再利用します。
2008 年までに、IE、Firefox、Opera、Chrome、Safari はすべて、JavaScript 実装でマークアップ クリーニング (またはそのバリエーション) を使用していましたが、違いはガベージ コレクションの実行頻度だけでした。
参照カウント
あまり一般的には使用されないもう 1 つのガベージ コレクション戦略は、参照カウントです。考え方は、値ごとに参照された回数を記録することです。変数を宣言して参照値を割り当てると、この値の参照番号は 1 になります。同じ値が別の変数に割り当てられている場合、参照番号は 1 増加します。同様に、値への参照を保持する変数が別の値で上書きされると、参照カウントは 1 つ減ります。値の参照カウントが 0 の場合、その値にアクセスできなくなったことを意味するため、そのメモリは安全に再利用できます。ガベージ コレクション プログラム
は、次回実行時に参照番号 0 のメモリを解放します。参照カウントは Netscape Navigator 3.0 で最初に採用されましたが、すぐに循環参照という深刻な問題に遭遇しました。いわゆる循環参照とは、オブジェクト A がオブジェクト B を指すポインターを持ち、オブジェクト B もオブジェクト A を参照することを意味します。
#更新予定。 。 。
関連する無料学習の推奨事項:javascript (ビデオ)
以上がJavaScript の学習メモを記録するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
