From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../reference/classes/extends/index.html | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 files/ja/web/javascript/reference/classes/extends/index.html (limited to 'files/ja/web/javascript/reference/classes/extends/index.html') diff --git a/files/ja/web/javascript/reference/classes/extends/index.html b/files/ja/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..e4c31b4128 --- /dev/null +++ b/files/ja/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,91 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Language feature +translation_of: Web/JavaScript/Reference/Classes/extends +--- +
{{jsSidebar("Classes")}}
+ +

extends キーワードはクラス宣言やクラス式の中で、他のクラスの子であるクラスを生成するために使用します。

+ +
{{EmbedInteractiveExample("pages/js/classes-extends.html")}}
+ + + +

構文

+ +
class ChildClass extends ParentClass { ... }
+ +

解説

+ +

extends キーワードは、独自のクラスや組込みオブジェクトをサブクラス化するために使用することができます。

+ +

拡張したものの .prototype は、{{jsxref("Object")}} か {{jsxref("null")}} である必要があります。

+ +

例

+ +

extends の使用

+ +

最初の例では、 Square と呼ばれるクラスを Polygon と呼ばれるクラスから作成します。この例は、ライブデモ (ソース) から転載しています。

+ +
class Square extends Polygon {
+  constructor(length) {
+    // ここでは、親クラスのコンストラクターを呼び出し、
+    // Polygon の幅と高さの寸法を渡します。
+    super(length, length);
+    // 注: 派生クラスでは、 'this' を使う前に super() を
+    // 呼び出さなくてはなりません。さもないと参照エラーになります。
+    this.name = 'Square';
+  }
+
+  get area() {
+    return this.height * this.width;
+  }
+}
+ +

組込みオブジェクトでの extends の使用

+ +

この例では、組込みの {{jsxref("Date")}} オブジェクトを拡張します。この例は、ライブデモ (ソース) から転載しています。

+ +
class myDate extends Date {
+
+  getFormattedDate() {
+    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear();
+  }
+}
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.classes.extends")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf