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の文字タイプは大文字と小文字を区別します

推薦する

MySQL 4 データをインポートする方法

1. mysqlコマンドをインポートするmysql コマンドのインポート構文は次のとおりです。 my...

Vue でカスタムパスのエイリアスを設定する方法

Vue でカスタム パス エイリアスを設定する方法日常の開発では、モジュールやコンポーネントをインポ...

フレックスレイアウトではサブアイテムの高さを維持できる

Flex レイアウトを使用すると、水平に配置すると、すべての子項目の高さが同じになることがわかります...

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

Dockerサーバーのストレージリソースプール不足問題の解決

目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

キーボード上の各種特殊記号の英語読み方(知識の普及)

キーボード文字英語`バッククォート〜チルダ!叫ぶ@で#ナンバーサイン$ドル%パーセント^キャレット&...

Nginx proxy_pass の / スラッシュによって引き起こされた殺人事件の詳細な説明

背景nginx サーバー モジュールは 2 つのサーバーにプロキシする必要があるため、異なるサーバー...

MySQL データベース シェル import_table データ インポート

目次MySQL Shell import_table データのインポート1. import_tabl...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

Linux での vi (vim) の新しい使い方のまとめ

私は数年間 vi エディタを使ってきましたが、実用的な用途で使ったことはありませんでした。今日 Py...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

nginxリバースプロキシwebSocket設定の詳細な説明

最近、プロジェクトで作業しているときに webSocket プロトコルを使用し、WeChat アプレ...