Water Sunlight

軽量プログラミングの文法 - JavaScript/Python

ユーザ用ツール

サイト用ツール


js:object:oriented

差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
js:object:oriented [2021/06/07 13:44]
tanaka [オブジェクト初期化子]
js:object:oriented [2021/06/07 13:57] (現在)
tanaka
行 7: 行 7:
 ===== class構文 ===== ===== class構文 =====
  
-ES2015では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。
  
 <sxh javascript;title:Example> <sxh javascript;title:Example>
行 24: 行 24:
 } }
  
-var suzuki = new Student('suzuki'); +var suzuki = new Student('Suzuki'); 
-suzuki.greeting();                   // I am suzuki.+suzuki.greeting();                   // I am Suzuki.
 </sxh> </sxh>
  
-class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015以前のfunctionコンストラクタの[[https://ja.wikipedia.org/wiki/%E7%B3%96%E8%A1%A3%E6%A7%8B%E6%96%87#:~:text=%E7%B3%96%E8%A1%A3%E6%A7%8B%E6%96%87%EF%BC%88%E3%81%A8%E3%81%86%E3%81%84%E3%81%93%E3%81%86%E3%81%B6%E3%82%93,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%82%E3%81%AE%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82|構文糖]]です。関数型のプロパティとして実装していたメソッドは、他の言語と同様に関数定義として記述できるようになりました。+class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015<sup>[[js:top#ECMAScript|*2015]]</sup>以前のfunctionコンストラクタの[[https://ja.wikipedia.org/wiki/%E7%B3%96%E8%A1%A3%E6%A7%8B%E6%96%87#:~:text=%E7%B3%96%E8%A1%A3%E6%A7%8B%E6%96%87%EF%BC%88%E3%81%A8%E3%81%86%E3%81%84%E3%81%93%E3%81%86%E3%81%B6%E3%82%93,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%82%E3%81%AE%E3%81%AE%E3%81%93%E3%81%A8%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82|構文糖]]です。関数型のプロパティとして実装していたメソッドは、他の言語と同様に関数定義として記述できるようになりました。
  
 但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。 但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。
行 38: 行 38:
 ===== アクセッサー ===== ===== アクセッサー =====
  
-ES2015ではclass構文の中でアクセッサーを定義できるようになりました。+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>ではclass構文の中でアクセッサーを定義できるようになりました。
  
 <sxh javascript;title:Example> <sxh javascript;title:Example>
行 68: 行 68:
  
 var suzuki = new Student(); var suzuki = new Student();
-suzuki.name = "suzuki"; +suzuki.name = "Suzuki"; 
-console.log(suzuki.name);  // suzuki +console.log(suzuki.name);  // Suzuki 
-suzuki.greeting();         // I am suzuki.+suzuki.greeting();         // I am Suzuki.
 </sxh> </sxh>
  
行 76: 行 76:
 ===== 静的プロパティと静的メソッド ===== ===== 静的プロパティと静的メソッド =====
  
-staticキーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。+''static'' キーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。
  
 <sxh javascript;title:Example> <sxh javascript;title:Example>
行 118: 行 118:
 ===== 継承 ===== ===== 継承 =====
  
-ES2015以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では ''extends'' と ''super'' キーワードを使いこれを実現することができます。+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では ''extends'' と ''super'' キーワードを使いこれを実現することができます。
  
 下の例は、前述のStudentクラスを継承した例です。 下の例は、前述のStudentクラスを継承した例です。
行 155: 行 155:
 ===== オブジェクト初期化子 ===== ===== オブジェクト初期化子 =====
  
-オブジェクト初期化子は中括弧 ({}) で囲まれたオブジェクトのプロパティのリストです。+オブジェクト初期化子は中括弧 ( ''{}'' ) で囲まれたオブジェクトのプロパティのリストです。
  
 === プロパティと同名の変数で初期化する場合 === === プロパティと同名の変数で初期化する場合 ===
行 172: 行 172:
 === プロパティの動的生成 === === プロパティの動的生成 ===
  
 +ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>ではブラケット( ''[]'' )を使って動的にプロパティ名を生成することができます。この機能は、Computed Property Names と呼ばれています。
 +
 +<sxh javascript;title:Example>
 +let prop = 'name';
 +let i = 0;
 +let taro = {
 +    [prop]: 'Suzuki Taro',
 +    ['School' + (++i)]: 'Sunlight Programming School',
 +    ['School' + (++i)]: 'Hidaka Higashi Junior High School'
 +};
 +
 +console.log(taro);
 +// {name: "Suzuki Taro", School1: "Sunlight Programming School", School2: "Hidaka Higashi Junior High School"}
 +</sxh>
  
js/object/oriented.1623041046.txt.gz · 最終更新: 2021/06/07 13:44 by tanaka