JS の new 関数の詳細な説明

JS の new 関数の詳細な説明

導入:

newに関する記事のほとんどはオブジェクト指向の考え方から始まりますが、私は常に、あることを説明するときには、別のより複雑なことを導入すべきではないと考えています。

プレイヤーが兵士の集団を操作して敵を攻撃できる戦略戦争ゲームを作っていると想像してください。

このゲームの「兵士を作る」部分に焦点を当ててみましょう。

兵士は、以下に示すように、コンピューター内の一連の属性によって表現されます。

1. 例

次のようにして兵士を作成できます。

var 兵士 = {
  ID: 1, // 各兵士のタイプを区別するために使用されます: "アメリカ兵"、
  攻撃力: 5,
  HP:42, 
  歩行: function(){ /*2歩歩くコード*/,
  実行: function(){ /*コードを実行中*/ },
  死: function(){ /*死ぬ*/ },
  攻撃: function(){ /* クマの顔を撫でる */ },
  防御: function(){ /*顔を守る*/ }
}

兵舎。製造(兵士)

2. 兵士100人を作成する

100 人の兵士を作成する必要がある場合はどうしますか?

100 回ループしてみましょう:

var 兵士 = []
var 兵士 for(var i=0; i<100; i++){
  兵士 = {
    ID: i, // ID は繰り返すことができません。兵士: "アメリカ兵",
    攻撃力: 5,
    HP:42, 
    歩行: function(){ /*2歩歩くコード*/,
    実行: function(){ /*コードを実行中*/ },
    死: function(){ /*死ぬ*/ },
    攻撃: function(){ /* クマの顔を撫でる */ },
    防御: function(){ /*顔を守る*/ }
  }
  兵士.push(兵士)
}

兵舎。大量生産(兵士)

3. 質問

上記のコードには問題があり、大量のメモリが浪費されています。

  • 歩く、走る、死ぬ、攻撃する、防御するの 5 つのアクションは、実際には各兵士に対して同じです。同じ関数を参照するだけで済みます。100 回の歩行、100 回の走行などを繰り返し作成する必要はありません。
  • これらの兵士はタイプと攻撃力が同じなので、100 回作成する必要はありません。
  • 各兵士は独自の ID と体力値を持っているため、ID と体力値のみを 100 回作成する必要があります。

4. 改善点

以前のコラム記事(JSプロトタイプチェーン)を読んだ人は、プロトタイプチェーンが繰り返し作成の問題を解決できることを知っているはずです。まず「兵士プロトタイプ」を作成し、次に「兵士」の__proto__が「兵士プロトタイプ」を指すようにします。

var 兵士プロトタイプ = {
  紋章:「アメリカ兵」
  攻撃力: 5,
  歩行: function(){ /*2歩歩くコード*/,
  実行: function(){ /*コードを実行中*/ },
  死: function(){ /*死ぬ*/ },
  攻撃: function(){ /* クマの顔を撫でる */ },
  防御: function(){ /*顔を守る*/ }
}
var 兵士 = []
var 兵士 for(var i=0; i<100; i++){
  兵士 = {
    ID: i, // IDは重複不可 ライフ値: 42
  }

  /*__proto__ は標準属性ではないため、実際の作業ではこれを記述しないでください*/
  Soldier.__proto__ = Soldier プロトタイプ Soldiers.push(Soldier)
}

兵舎。大量生産(兵士)

5. エレガント?

兵士を作成するためのコードを 2 か所に配置するのはエレガントではないと指摘されたので、関数を使用して 2 つの部分を接続します。

関数soldier(ID){
  var 一時オブジェクト = {}

  一時オブジェクト.__proto__ = soldier.prototype 一時オブジェクト.ID = ID
  一時オブジェクト.ライフ値 = 42
  
  一時オブジェクトを返す}

兵士.プロトタイプ = {
  紋章:「アメリカ兵」
  攻撃力: 5,
  歩行: function(){ /*2歩歩くコード*/,
  実行: function(){ /*コードを実行中*/ },
  死: function(){ /*死ぬ*/ },
  攻撃: function(){ /* クマの顔を撫でる */ },
  防御: function(){ /*顔を守る*/ }
}

// ファイルとして保存: soldier.js

次に、「Soldier」を参照して兵士を作成します。

var 兵士 = []
(var i=0; i<100; i++){
  兵士.push(兵士(i))
}

兵舎。大量生産(兵士)

6. JSの父からのケア

JS の作成者は、より少ないコード行を記述できるnewキーワードを作成しました。

兵士の前にnewキーワードを使用する限り、次の 4 つのことが少なくなります。

  • 一時オブジェクトを作成する必要はありません。new がnewにそれを実行します (「 this 」を使用して一時オブジェクトにアクセスできます)。
  • プロトタイプをバインドする必要はありません。new が自動的にそれを実行します ( new newプロトタイプがどこにあるかを知るためにプロトタイプ名をprototypeとして指定します)。
  • 一時オブジェクトreturn必要はありません。new new自動的にそれを実行します。
  • new prototype という名前を指定するため、 prototypeの名前を考えないでください。

7. 今回はnewを使って書きます

関数soldier(ID){
  this.ID = ID
  健康 = 42
}

兵士.プロトタイプ = {
  紋章:「アメリカ兵」
  攻撃力: 5,
  歩行: function(){ /*2歩歩くコード*/,
  実行: function(){ /*コードを実行中*/ },
  死: function(){ /*死ぬ*/ },
  攻撃: function(){ /* クマの顔を撫でる */ },
  防御: function(){ /*顔を守る*/ }
}

// ファイルとして保存: soldier.js

次に兵士を作成します(新しいキーワードを追加します)。

var 兵士 = []
(var i=0; i<100; i++){
  兵士.push(新しい兵士(i))
}

兵舎。大量生産(兵士)

new の目的は、コードを数行節約することです。 (糖衣構文とも呼ばれる)

8. コンストラクタ属性に注意する

「どの関数が一時オブジェクトを作成したか」を記録するために、 new操作では、事前に「 prototype 」にconstructor属性を追加します。

兵士.プロトタイプ = {
  コンストラクター: Soldier}


prototype 」を再割り当てすると、 constructorプロパティはなくなるため、次のように記述する必要があります。

Soldier.prototype.ArmyType = "アメリカ兵"
兵士.プロトタイプ.攻撃 = 5
Soldier.prototype.walk = function(){ /*2歩歩くためのコード*/
Soldier.prototype.run = function(){ /*実行コード*/ }
soldier.prototype.death = function(){ /*死んでください*/ }
Soldier.prototype.attack = function(){ /*彼のクマの顔をブラッシングする*/ }
Soldier.prototype.defense = function(){ /*顔を保護する*/ }


または、 constructor自分で再割り当てすることもできます。

兵士.プロトタイプ = {
  コンストラクター: 兵士、
  紋章:「アメリカ兵」
  攻撃力: 5,
  歩行: function(){ /*2歩歩くコード*/,
  実行: function(){ /*コードを実行中*/ },
  死: function(){ /*死ぬ*/ },
  攻撃: function(){ /* クマの顔を撫でる */ },
  防御: function(){ /*顔を守る*/ }
}

これで、JS における new の役割に関する詳細な記事は終了です。JS における new の役割の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JSコンストラクタとインスタンス化およびプロトタイプ導入の関係
  • JavaScriptプロトタイプと例の詳細な説明
  • Js の継承とプロトタイプチェーンを理解するのに役立つ記事
  • JavaScriptプロトタイプチェーン図のまとめと実践
  • JS での new の手書き実装
  • JavaScript のコンストラクター、プロトタイプ、プロトタイプ チェーン、new についてどれくらい知っていますか?

<<:  Dockerイメージの作成Dockerfileとコミット操作

>>:  MySQLの文字タイプは大文字と小文字を区別します

推薦する

Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順

最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...

mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し

1. ユーザーを作成します。注文: 'password' によって識別される ...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

Docker コンテナに TensorRT をインストールする際の問題

Ubuntu にインストールされているバージョンをアンインストールします。 sudo apt-get...

ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...

MySQLデータベースの追加、削除、変更操作の詳細な説明

データの挿入テーブル名(列名1、列名2、列名3)の値(値1、値2、値3)に挿入します。ユーザーに(u...

js 加算、減算、乗算、除算の正確な計算方法のサンプルコード

序文コンピュータの数値は浮動小数点であるため、計算プロセス中に取得されるデータは通常正確ではなく、そ...

Dockerは起動されていないコンテナの設定情報を変更します

私が初めてdockerを使用したときは、dockerfileやdocker-composeを使用して...

Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

1. システムに必要な libaio ソフトウェアがインストールされていることを確認します。インスト...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

HarborをベースにしたDocker専用倉庫の構築方法

目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

MySql 8.0.11 のインストール プロセスと Navicat とのリンク時に発生する問題の概要

私のシステムとソフトウェアのバージョンは次のとおりです。システム環境: win7、64ビットMySQ...

更新SQL文に基づくMySQLロックの理解

序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...

Saltstack に Zabbix サービスをデプロイする方法を説明します

目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...