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に余分な空白スペースがある

推薦する

JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため...

MySQLデータ移行方法とツールの分析

この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

Vue グローバル フィルターの概念、注意事項、基本的な使用方法

目次1. フィルターの概念1. グローバルフィルターのフォーマットをカスタマイズする2. フィルター...

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...

mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

HTML 固定タイトル列、タイトル ヘッダー テーブル固有の実装コード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

HTMLテーブルではテーブルの外側の境界線のみが表示されます

質問があります。Dreamweaver で、3 行 1 列のログイン フォーム (ログイン、登録、パ...

W3C チュートリアル (7): W3C XSL アクティビティ

スタイル シートは、ドキュメントの表示方法、発音方法、または入力方法を記述します。XSL 言語は、X...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...

Ubuntu 16.04 カーネルのアップグレード手順

1. 環境仮想マシン上で実行されているUbuntu 16.04では、コマンドuname -rを使用し...

MySQLデータベースエンジンをInnoDBに変更する

PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...

js キャンバスは検証コードを実装し、検証コード機能を取得します

この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。...

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...