JavaScript 事前分析、オブジェクトの詳細

JavaScript 事前分析、オブジェクトの詳細

1. 事前分析

1. 変数の事前解析と関数の事前解析

JavaScript コードはブラウザ内の JavaScript パーサーによって実行されます。 JavaScript パーサーは、事前解析とコード実行の 2 つのステップで JavaScript コードを実行します。

  • 事前解析: 現在のスコープでは、JS コードが実行される前に、ブラウザはデフォルトで var と関数宣言を使用して変数をメモリ内に事前に宣言または定義します。
  • コード実行: JS ステートメントを上から下に実行します。

準備は、var で定義された変数と関数に対してのみ行われます。事前分析を学習すると、変数が宣言される前にアクセスされたときにその値が未定義になる理由や、関数が宣言される前に呼び出される理由を理解するのに役立ちます。準備は変数および関数の昇格とも呼ばれます。

1. 変数の事前解析

変数の事前解析: 変数宣言は現在のスコープの先頭に昇格され、変数の割り当ては昇格されません。

例えば:

  /* まずvar変数numを解析する
  次にコンソール出力を実行し、最後にnumに10を代入します*/
console.log(num); // 結果は何ですか?
var num = 10; // ?

2. 機能事前分析

関数の事前分析: 関数宣言は現在のスコープの先頭に昇格されますが、関数は呼び出されません。

/*まずfn関数の定義を解析し、コンソールステートメントを実行します*/
console.log("1+2+3+...+100=",fn());
		関数fn(){
			var s = 0;
			(var i=1;i<=100;i++){
				s + = i;
			}
			s を返します。
		}

2. 事前分析ケース

ちょっとした練習をして、出力がどうなるか見てみましょう。

コンソールにログ出力します。
var a = 1;
 コンソールにログ出力します。
 関数a(){
    を返します。
 }

結果は次のとおりです。

ここに画像の説明を挿入

2. ターゲット

JavaScript では、オブジェクトは関連するプロパティとメソッドの順序付けられていないコレクションです。文字列、数値、配列、関数など、すべてがオブジェクトです。
オブジェクトはプロパティとメソッドで構成されます。

  • 属性: 物体の属性によって表される、何かの特性(一般名詞)
  • メソッド: メソッドを使用してオブジェクトで表現される何かの動作 (一般的な動詞)

1. オブジェクトを作成する3つの方法

1. リテラルを使用してオブジェクトを作成する

オブジェクトリテラル: 中括弧 { } には、この特定のもの (オブジェクト) を表すプロパティとメソッドが含まれます。 { } はキーと値のペアの形式で表現されます。

  • キー: 属性名と同等
  • 値: 属性値と同等で、任意の型の値 (数値型、文字列型、ブール型、関数型など) にすることができます。
var スター = {
    名前: 'xl',
    年齢: 18歳
    性別:「女性」、
    sayStudy: 関数(){
        console.log('一生懸命勉強しなさい');
    }
};

オブジェクト内のプロパティ呼び出しは、オブジェクト.プロパティ名です。ドット . は「of」として認識されます。例: star.name

オブジェクト内の属性を呼び出す別の方法は、object['attribute name']です。角括弧内の属性は引用符で囲む必要があることに注意してください。例: star['age']

2. new Objectを使用してオブジェクトを作成する

これは、先ほど学んだ new Array() を使用して配列を作成する原理と同じです。

var andy = 新しいオブジェクト();
andy.name = 'xl';
アンディ.年齢 = 18;
andy.sex = '女性';
andy.sayStudy = 関数(){
   console.log('一生懸命勉強しなさい');
}
  • Object() : 最初の文字は大文字です
  • new Object(): newキーワードが必要です
  • 使用される形式は次のとおりです: object.property = value;

3. コンストラクタを使用してオブジェクトを作成する

コンストラクター: 主にオブジェクトを初期化する、つまりオブジェクトのメンバー変数に初期値を割り当てるために使用される特別な関数です。常に new 演算子とともに使用されます。オブジェクトからいくつかの共通プロパティとメソッドを抽出し、この関数にカプセル化することができます。

js では、コンストラクターを使用する場合、次の 2 つの点に注意してください。

  • コンストラクターは特定のタイプのオブジェクトを作成するために使用され、最初の文字は大文字にする必要があります。
  • コンストラクタはnewと一緒に使用する場合にのみ意味を持ちます

例えば:

関数 MyName(名前,年齢,性別){
    this.name = 名前;
    this.age = 年齢;
    this.sex = セックス;
}
var xl = new MyName('熊柳','18','女');
var huan = new MyName('王欢','16','女');
コンソールログ('xl.name='+xl.name);
console.log('huan:');
console.log(huan);

印刷結果は次のとおりです。

ここに画像の説明を挿入

知らせ

  • コンストラクターは通常大文字で表記されます。
  • 現在のオブジェクトのプロパティとメソッドを示すには、関数内のプロパティとメソッドの前にこれを追加する必要があります。
  • コンストラクターで結果を返す必要はありません。
  • オブジェクトを作成するときは、new を使用してコンストラクターを呼び出す必要があります。

4. コンストラクタとオブジェクト

  • コンストラクターは、オブジェクトの共通部分を抽象化し、関数にカプセル化します。これは、一般的なクラスを参照します。
  • new キーワードを使用してオブジェクト (具体的には 1 つ) を作成することを、オブジェクトのインスタンス化とも呼びます。

2. 新しいキーワード

new は実行されると次の 4 つの処理を実行します。

1. メモリ内に新しい空のオブジェクトを作成します。

2. これを新しいオブジェクトを指すようにします。

3. コンストラクター内のコードを実行して、新しいオブジェクトにプロパティとメソッドを追加します。

4. この新しいオブジェクトを返します (コンストラクターで return は必要ありません)。

3. オブジェクトプロパティのトラバース

for...in ステートメントは、配列またはオブジェクトのプロパティをループするために使用されます。

構文は次のとおりです。

for (オブジェクト名の変数) {
    // ここでコードを実行します }

構文内の変数はカスタムであり、命名規則に準拠する必要があります。通常、この変数は k または key として記述されます。

(var k in obj) {
    console.log(k); // ここで k はプロパティ名です console.log(obj[k]); // ここで obj[k] はプロパティ値です}

例えば、次のオブジェクトが構築されます

関数 ヒーロー(名前,タイプ,血,攻撃){
    this.name = 名前;
    this.type = タイプ;
    this.blood = 血液;
    this.attack = 攻撃;
}
var lianpo = new Hero('Lian Po', 'Power', '500 HP', 'Melee');
var houyi = new Hero('Houyi','シュータータイプ','体力100','長距離');

for..in ステートメントを実行すると、k と obj[k] を印刷すると、それぞれ次の結果が生成されます。

関数 ヒーロー(名前,タイプ,血,攻撃){
    this.name = 名前;
    this.type = タイプ;
    this.blood = 血液;
    this.attack = 攻撃;
}
var lianpo = new Hero('Lian Po', 'Power', '500 HP', 'Melee');
var houyi = new Hero('Houyi','シュータータイプ','体力100','長距離');

ここに画像の説明を挿入

for(k in lianpo){
    コンソールにログ出力します。
}

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JSスコープと事前解析メカニズムの詳細な説明
  • JavaScript事前解析の4つの実装方法の分析
  • 例を通してJavaScriptの事前解析を理解する

<<:  Webデザインチュートリアル(6):デザインへの情熱を持ち続ける

>>:  IE6では画像要素imgに余分な空白スペースがある

推薦する

JS でモバイルのインタラクティブ エクスペリエンスを向上させる方法

目次1. 即時フィードバック1.1 ボタンからの即時フィードバック1.2 継続的なフィードバック1....

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

Nginx+SSL による双方向認証を実装するためのサンプル コード

まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

docker pull imageエラーの問題を解決する

説明する: Windows 10 に VM をインストールし、VM で Docker を実行し、Do...

ウェブデザインのグラフィック構成と組版機能の紹介

すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...

Node.jsはMySQLデータベースの実戦記録を追加、削除、変更、チェックします

目次プロジェクトでデータベースを操作する3つのステップデータベースを操作するための具体的な手順1: ...

MySQL テーブルスペースの断片化の概念と関連する問題の解決策

目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...

モバイルデバイスでインラインスクロールを実装するための4つのソリューションの詳細な説明

ニーズの発見領域の一部のみスクロールでき、残りの部分は移動できない場合、どのような方法を使用しますか...

JavaScript の useRef と useState の紹介

目次1. useStateフック2. useRefフック3. useRef と useState 4...

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...

JavaScriptはスライダーを介してWebページの色を変更することを実装します

みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...

HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります

インターネットで見つけた方法は効果的ですinclude によって導入されたフッター ファイルとヘッダ...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...