差分

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

--- js:object:oriented [2021/06/07 10:33]
y2sunlight [継承]
+++ js:object:oriented [2021/06/07 13:57] (現在)
tanaka
@@ 行 7: / 行 7: @@
 ===== class構文 =====
-ES2015では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。
+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。
 <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>
-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構文には以下の制限があります。これらは制限というよりも、・・・です。
@@ 行 38: / 行 38: @@
 ===== アクセッサー =====
-ES2015ではclass構文の中でアクセッサーを定義できるようになりました。
+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>ではclass構文の中でアクセッサーを定義できるようになりました。
 <sxh javascript;title:Example>
@@ 行 68: / 行 68: @@
 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>
@@ 行 76: / 行 76: @@
 ===== 静的プロパティと静的メソッド =====
-staticキーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。
+''static'' キーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。
 <sxh javascript;title:Example>
@@ 行 118: / 行 118: @@
 ===== 継承 =====
-ES2015以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では ''extends'' と ''super'' キーワードを使いこれを実現することができます。
+ES2015<sup>[[js:top#ECMAScript|*2015]]</sup>以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では ''extends'' と ''super'' キーワードを使いこれを実現することができます。
 下の例は、前述のStudentクラスを継承した例です。
-> TODO: 例
+<sxh javascript;title:Example>
+class Student {
-  * extends
+    constructor(name) {
-  * super
+        this._name = name;
+    }
-\\
+    greeting() {
-===== プロパティの動的生成 =====
+        console.log(`I am ${this._name}.`);
+    }
+}
+class SchoolStudent extends Student {
+    constructor(name, school) {
+        super(name);
+        this.school = school;
+    }
+    greeting() {
+        console.log(
+          `I am ${this._name} attending ${this.school}.`
+        );
+    }
+}
+var taro = new SchoolStudent('Suzuki Taro', 'Sunlight Programming School');
+taro.greeting(); // I am Suzuki Taro attending Sunlight Programming School.
+</sxh>
+\\
 ===== オブジェクト初期化子 =====
-オブジェクト初期化子は中括弧 ({}) で囲まれたオブジェクトのプロパティのリストです。
+オブジェクト初期化子は中括弧 ( ''{}'' ) で囲まれたオブジェクトのプロパティのリストです。
+=== プロパティと同名の変数で初期化する場合 ===
+プロパティと同名の変数でオブジェクト初期化子で使用する場合は、より短く記述することができます。
+<sxh javascript;title:Example>
+var obj1 = {};  // var obj2 = new Object(); と同じ
+var obj3 = {
+    name: 'Suzuki Taro',
+    school: 'Sunlight Programming School',
+    age: 15
+};
+</sxh>
+=== プロパティの動的生成 ===
+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>

Water Sunlight

ユーザ用ツール

サイト用ツール

差分

ページ用ツール