# JavaScript 基礎編3(学習日:9/14)(オブジェクト、プロトタイプオブジェクト) ## 1. オブジェクト ### オブジェクトとは オブジェクトとは、プロパティ(キーと値の組み合わせ)の集合である。 配列や関数などもオブジェクトに含まれる。 ECMAScriptに「Object」というビルドインオブジェクトが定義されている。 ### オブジェクトの生成 a.オブジェクトリテラル({})を利用する場合 変数宣言でオブジェクトリテラルで囲んだ変数を定義する。 オブジェクトリテラル内は空でもプロパティの初期値を定義してもよい。 また、変数名と値が一致する場合、変数名のみでよい<ES2015以降> ```javascript= const birthday = { //"キー":"値"(キーは"",'',クォートなしいずれも可(但し日本語等変数の識別子として利用できない名前には""必要)) "Ichigo":"3/15", 'Aoi':"1/31", ran:"8/3" }; ``` b.インスタンスオブジェクトを利用する場合 newでインスタンスオブジェクトを定義する。 ```javascript= const color = new object(); ``` ### プロパティへのアクセス a. ドット記法を用いる場合 「変数名.キー値」の要領で記述する。 変数の命名規則を満たしたもののみ利用できる。 b. ブラケット記法を用いる場合 「変数名[キー値]」の要領で記述する。 命名規則の縛りはない。但し、暗黙的な型変換は生じる。 ```javascript= const birthday = { Ichigo:"3/15", Aoi:"1/31", Ran:"8/3" }; console.log(birthday.Ichigo);//a.ドット記法 console.log(birthday["Aoi"]);//b.ブラケット記法 ``` c. 分割代入 1つのオブジェクトに複数のキー値がある場合、複数のキー値を1つの変数で一括に扱えるようにしたもの。 複数のキー値を{}で囲み、オブジェクトの変数名候補として登録する。 ```javascript= const lineColor = { midosuji:"red", chuo:"green" }; const {midosuji, chuo} = lineColor; console.log(midosuji); console.log(chuo) ``` ### プロパティの追加・削除 a.追加 変数名 ```javascript= const lineColor = { midosuji:"red", chuo:"green" }; lineColor.tanimachi = "purple"; lineColor[yotsubashi] = "blue"; ``` b.削除 ```javascript= const lineColor = { midosuji:"red", tanimachi:"purple", yotsubashi:"blue", chuo:"green" }; delete.lineColor.chuo; lineColor; ``` c.再代入の阻止  Object.freezeを用いると、オブジェクトの変更を防げる。(strict.modeで実行する) ### プロパティの存在確認 存在しないキー値はundefinedが返るが、もともと値が"undefined"である場合と区別しにくい。 a. in演算子 値がオブジェクト内にあるかどうかを調べる。プロトタイプオブジェクトまで上って検索する。 b. hasOwnPropertyメソッドを利用する。指定した値がオブジェクト内にあるかどうかのみを調べる。 c. ?.(Optional chaining)演算子を利用する。<ES2020対応> . , [] の代わりに、?. , []?.を用いることで、存在確認を1つのconsole.logでまとめて実行できる。 ```javascript= const lineColor = { midosuji:"red", tanimachi:"purple" }; if("tanimachi" in lineColor){ console.log(true); } if(lineColor.hasOwnProperty("midosuji")) console.log(true); } ``` ### オブジェクトの文字列化 toStringメソッドを用いる。 オブジェクト名.toString() ### オブジェクトの静的メソッド a.列挙 Object.keys //キー値を配列にして返す。 Object.values //値を配列にして返す。 Object.entires //キー値・値の配列を返す。 for.eachメソッド(基礎編2参照)と組み合わせると、配列を1つずつ出力するプログラムが完成する。 b.マージ オブジェクト同士の代入が可能である。 Object.assain(代入先オブジェクト,代入したいオブジェクト1,2,…) 代入先オブジェクトは、空({})でも既存のオブジェクトでもよい。 c.コピー 直接コピーは不可だが、新しい空オブジェクトを作成し、代入することで 可能となる。 ```javascript= const lineColor = { midosuji:"red", tanimachi:"purple" }; const lineColor2 = Object.assign({}, lineColor); //lineColor2は空オブジェクトにlineColorの内容をコピーしたものになる。 ``` ## 2. プロトタイプオブジェクト ### プロトタイプオブジェクトとは プロトタイプオブジェクトとは、Objectクラスの中にあるprototypeオブジェクトを指す。 String,Function,Arrayはこれらを継承している。 プロトタイプオブジェクトに属する主なメソッド * toString * ValueOf * hasOwnProperty ### 実行の優先順位 インスタンスの中にプロトタイプオブジェクト内のメソッドと同一名のメソッドがある場合、インスタンスの方が優先される。(継承の特徴:サブクラスメソッド優先) ### 継承元を明示する Object.createメソッドは、指定したprototypeオブジェクトを継承した新しいオブジェクトを作成できる。 →Object内のprototypeオブジェクトではなく、新たにprototypeオブジェクトを定義し適用したいときに有効である。 ###### tags: `JavaScript`