js:object:oriented
差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
js:object:oriented [2021/06/07 09:55] y2sunlight [継承] |
js:object:oriented [2021/06/07 13:57] (現在) tanaka |
||
|---|---|---|---|
| 行 3: | 行 3: | ||
| --- // | --- // | ||
| - | 本章では、ES2015< | + | 本章では、ES2015< |
| ===== class構文 ===== | ===== class構文 ===== | ||
| - | ES2015では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。 | + | ES2015< |
| <sxh javascript; | <sxh javascript; | ||
| 行 24: | 行 24: | ||
| } | } | ||
| - | var suzuki = new Student(' | + | var suzuki = new Student(' |
| - | suzuki.greeting(); | + | suzuki.greeting(); |
| </ | </ | ||
| - | class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015以前のfunctionコンストラクタの[[https:// | + | class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015< |
| 但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。 | 但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。 | ||
| 行 38: | 行 38: | ||
| ===== アクセッサー ===== | ===== アクセッサー ===== | ||
| - | ES2015ではclass構文の中でアクセッサーを定義できるようになりました。 | + | ES2015< |
| <sxh javascript; | <sxh javascript; | ||
| 行 68: | 行 68: | ||
| var suzuki = new Student(); | var suzuki = new Student(); | ||
| - | suzuki.name = "suzuki"; | + | suzuki.name = "Suzuki"; |
| - | console.log(suzuki.name); | + | console.log(suzuki.name); |
| - | suzuki.greeting(); | + | suzuki.greeting(); |
| </ | </ | ||
| 行 76: | 行 76: | ||
| ===== 静的プロパティと静的メソッド ===== | ===== 静的プロパティと静的メソッド ===== | ||
| - | staticキーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。 | + | '' |
| <sxh javascript; | <sxh javascript; | ||
| 行 108: | 行 108: | ||
| <sxh javascript; | <sxh javascript; | ||
| - | var taro = new Student(' | ||
| var taro = new Student(' | var taro = new Student(' | ||
| taro.name = ' | taro.name = ' | ||
| 行 119: | 行 118: | ||
| ===== 継承 ===== | ===== 継承 ===== | ||
| - | ES2015以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では '' | + | ES2015< |
| 下の例は、前述のStudentクラスを継承した例です。 | 下の例は、前述のStudentクラスを継承した例です。 | ||
| - | * extends | + | <sxh javascript; |
| - | * super | + | class Student { |
| - | ===== プロパティの動的生成 ===== | + | constructor(name) { |
| + | this._name | ||
| + | } | ||
| + | greeting() { | ||
| + | console.log(`I am ${this._name}.`); | ||
| + | } | ||
| + | } | ||
| + | class SchoolStudent extends Student { | ||
| + | constructor(name, | ||
| + | super(name); | ||
| + | this.school = school; | ||
| + | } | ||
| + | greeting() { | ||
| + | console.log( | ||
| + | `I am ${this._name} attending ${this.school}.` | ||
| + | ); | ||
| + | } | ||
| + | } | ||
| + | var taro = new SchoolStudent(' | ||
| + | taro.greeting(); | ||
| + | </ | ||
| + | |||
| + | \\ | ||
| + | ===== オブジェクト初期化子 ===== | ||
| + | |||
| + | オブジェクト初期化子は中括弧 ( '' | ||
| + | |||
| + | === プロパティと同名の変数で初期化する場合 === | ||
| + | |||
| + | プロパティと同名の変数でオブジェクト初期化子で使用する場合は、より短く記述することができます。 | ||
| + | |||
| + | <sxh javascript; | ||
| + | var obj1 = {}; // var obj2 = new Object(); と同じ | ||
| + | var obj3 = { | ||
| + | name: ' | ||
| + | school: ' | ||
| + | age: 15 | ||
| + | }; | ||
| + | </ | ||
| + | |||
| + | === プロパティの動的生成 === | ||
| + | |||
| + | ES2015< | ||
| + | |||
| + | <sxh javascript; | ||
| + | let prop = ' | ||
| + | let i = 0; | ||
| + | let taro = { | ||
| + | [prop]: ' | ||
| + | [' | ||
| + | [' | ||
| + | }; | ||
| + | |||
| + | console.log(taro); | ||
| + | // {name: " | ||
| + | </ | ||
js/object/oriented.1623027357.txt.gz · 最終更新: 2021/06/07 09:55 by y2sunlight
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
