JS の 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: