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

推薦する

Linux でバックグラウンド タスクを実行するために nohup と screen を使用する例と違いの簡単な分析

SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...

MySQLインデックス最適化分析に関する簡単な説明

記述した SQL クエリが遅いのはなぜですか?作成したインデックスが頻繁に失敗するのはなぜですか?こ...

JavaScriptでシンプルなスクロールウィンドウを実装する

この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹...

Mac ノードの削除と再インストールのケーススタディ

Macノードの削除と再インストール消去 ノード -v sudo npm アンインストール npm -...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

MySQL Innodbの主な機能挿入バッファ

目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

HTML における画像タグの使用方法の詳細な説明

HTML では、<img> タグはテキスト内の画像タグを定義するために使用されます。その...

Reactにおけるキーの役割の詳細な説明

目次質問: ボタンをクリックすると、スパンの色が赤に変わりますか?上記の問題を分析します。 2番目の...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

MySQL サーバー ログイン エラー ERROR 1820 (HY000) の解決方法

障害サイト: MySQL サーバーにログインし、どのコマンドを実行してもこのエラーが発生します my...

JavaScript BOMの構成と一般的なイベントの詳細な説明

目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...