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

推薦する

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

MYSQLデータベースの最適化段階を簡単に理解する

導入面接官がこんな質問をしたことはありませんか?データベースをどのように最適化しますか?では、この質...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

mysql-5.7.21-winx64 無料インストール版のインストール - Windows チュートリアル詳細説明

1 ダウンロードアドレスは https://dev.mysql.com/downloads/mysq...

Pythonは出力をcsv操作に書き込む

以下のように表示されます。 def test_write(self): フィールド=[] field...

Vue+element ui はアンカーの配置を実現します

この記事では、アンカー配置を実現するためのVue +要素UIの具体的なコードを例として紹介します。具...

JavaScript でシンプルなクリスマス ゲームを実装する

目次序文成果を達成するコードCSSコードJSコードHTMLコードデモンストレーションのプロセス序文ク...

Js における new 演算子の役割の詳細な説明

序文Js は現在最も一般的に使用されているコード操作言語であり、その中でも new 演算子は特によく...

vue3 プロジェクトを素早く構築し、関連機能を紹介する vite+ts の詳細な説明

目次ヴィテ建てる構成vite.config.tsルーターtsタイプvue3 の知識設定小道具コンテク...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

Vue はアップロードされた画像に透かしを追加する機能を実装します

この記事では、Vueでアップロードされた画像に透かしを追加する具体的な実装コードを参考までに共有しま...

LinkedIn がウェブサイト閲覧を簡素化するためにリニューアル

ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します

1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...

nginx + セカンダリドメイン名 + https サポートを使用する

ステップ1: Alibaba Cloudプライマリドメイン名にセカンダリドメイン名を追加する2 番目...