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

推薦する

VMware + Ubuntu18.04 による Hadoop クラスタ環境の構築に関するグラフィック チュートリアル

目次序文VMware クローン仮想マシン (準備、3 台の仮想マシンのクローン、1 台のマスター、2...

jQueryをベースにカルーセル効果を実現する

この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有しま...

Ubuntu 16.04 サーバーで MySQL を設定し、リモート接続を有効にする方法

背景最近、Node.js を勉強しているのですが、クラウド サーバーがあることを思い出しました。しか...

Dockerデータのバックアップとリカバリプロセスの詳細な説明

データのバックアップ操作は非常に簡単です。次のコマンドを実行します。 docker run --vo...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします...

MySQL 5.7.18 でパスワードを変更する方法

MySQL 5.7.18 でパスワードを変更する方法: 1. まずMySQLサーバーをシャットダウン...

Robots.txtの詳細な紹介

robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...

Expressはログイン認証を実装

この記事では、ログイン認証を実装するためのExpressの具体的なコードを例として紹介します。具体的...

HTML におけるいくつかの特殊属性タグの使用法の紹介

以下の属性はブラウザとの互換性があまりありません。 1.transform:rotate(45度) ...

Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。

コードをコピーコードは次のとおりです。 <div class="content&qu...