diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-19 00:56:21 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-26 16:04:26 +0900 |
commit | 0a62538a112c551b7507a9cb5125ba67f53a7a16 (patch) | |
tree | 2692a6a14dd64d6d79f3a720b8e2e557e5a21c77 /files/ja/web/javascript | |
parent | 8b9b6768f815fb3a24c50104e1d96cba51870026 (diff) | |
download | translated-content-0a62538a112c551b7507a9cb5125ba67f53a7a16.tar.gz translated-content-0a62538a112c551b7507a9cb5125ba67f53a7a16.tar.bz2 translated-content-0a62538a112c551b7507a9cb5125ba67f53a7a16.zip |
2021/07/21 時点の英語版に同期
Diffstat (limited to 'files/ja/web/javascript')
-rw-r--r-- | files/ja/web/javascript/reference/operators/super/index.md | 108 |
1 files changed, 49 insertions, 59 deletions
diff --git a/files/ja/web/javascript/reference/operators/super/index.md b/files/ja/web/javascript/reference/operators/super/index.md index f4787e8d5f..4be58d9586 100644 --- a/files/ja/web/javascript/reference/operators/super/index.md +++ b/files/ja/web/javascript/reference/operators/super/index.md @@ -2,37 +2,40 @@ title: super slug: Web/JavaScript/Reference/Operators/super tags: - - Classes + - クラス - ECMAScript 2015 - JavaScript - - Language feature - - Left-hand-side expressions - - Operator + - 言語機能 + - 左辺式 + - 演算子 +browser-compat: javascript.operators.super translation_of: Web/JavaScript/Reference/Operators/super --- -<div>{{jsSidebar("Operators")}}</div> +{{jsSidebar("Operators")}} -<p><strong>super</strong> キーワードは、オブジェクトの親の関数を呼び出すために使用できます。</p> +**super** キーワードは、オブジェクトの親の関数を呼び出すために使用できます。 -<p><code>super.prop</code> および <code>super[expr]</code> 式は、<a href="/ja/docs/Web/JavaScript/Reference/Classes">class</a> と <a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">オブジェクトリテラル</a> の両方におけるあらゆる<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>で有効です。</p> +`super.prop` および `super[expr]` 式は、[class](/ja/docs/Web/JavaScript/Reference/Classes) と[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)の両方におけるあらゆる[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)で有効です。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="syntaxbox notranslate">super([arguments]); // 親コンストラクターを呼び出します。 +```js +super([arguments]); // 親コンストラクターを呼び出します。 super.functionOnParent([arguments]); -</pre> +``` -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>コンストラクターで使用する場合、<code>super</code> キーワードを単独で置き、<code>this</code> キーワードが使われる前に使用する必要があります。<code>super</code> キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。</p> +コンストラクターで使用する場合、`super` キーワードを単独で置き、`this` キーワードが使われる前に使用する必要があります。`super` キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。 -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="Using_super_in_classes" name="Using_super_in_classes">クラス内での <code>super</code> の使用</h3> +### クラス内での `super` の使用 -<p>このコードスニペットは、<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">実際のデモ</a>) からとっています。<code>super()</code> を利用することで、<code>Rectangle</code> と <code>Square</code> のコンストラクターに共通する処理を重複して記述しないようにしています。</p> +このコードスニペットは、[クラスの例](https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html) ([ライブデモ](https://googlechrome.github.io/samples/classes-es6/index.html)) からとっています。`super()` を利用することで、`Rectangle` と `Square` のコンストラクターに共通する処理を重複して記述しないようにしています。 -<pre class="brush: js notranslate">class Rectangle { +```js +class Rectangle { constructor(height, width) { this.name = 'Rectangle'; this.height = height; @@ -45,7 +48,7 @@ super.functionOnParent([arguments]); return this.height * this.width; } set area(value) { - this.height = this.width = Math.sqrt(value); + this._area = value; } } @@ -61,50 +64,51 @@ class Square extends Rectangle { // でないと reference error になります。 this.name = 'Square'; } -}</pre> +} +``` -<h3 id="Super-calling_static_methods" name="Super-calling_static_methods">静的メソッドでの super の呼び出し</h3> +### 静的メソッドでの super の呼び出し -<p><a href="/ja/docs/Web/JavaScript/Reference/Classes/static">static</a> メソッドでも super を呼び出すことができます。</p> +[static](/ja/docs/Web/JavaScript/Reference/Classes/static) メソッドでも super を呼び出すことができます。 -<pre class="brush: js notranslate">class Rectangle { - constructor() {} +```js +class Rectangle { static logNbSides() { return 'I have 4 sides'; } } class Square extends Rectangle { - constructor() {} static logDescription() { return super.logNbSides() + ' which are all equal'; } } Square.logDescription(); // 'I have 4 sides which are all equal' -</pre> +``` -<h3 id="Deleting_super_properties_will_throw_an_error" name="Deleting_super_properties_will_throw_an_error">super プロパティの削除でエラーが発生</h3> +### super プロパティを削除するとエラーが発生する -<p>親クラスのプロパティを削除するために、<a href="/ja/docs/Web/JavaScript/Reference/Operators/delete">delete 演算子</a> や <code>super.prop</code>、<code>super[expr]</code> を使うことはできません。{{jsxref("ReferenceError")}} がスローされます。</p> +親クラスのプロパティを削除するために、[delete 演算子](/ja/docs/Web/JavaScript/Reference/Operators/delete) や `super.prop`、`super[expr]` を使うことはできません。{{jsxref("ReferenceError")}} がスローされます。 -<pre class="brush: js notranslate">class Base { - constructor() {} +```js +class Base { foo() {} } class Derived extends Base { - constructor() {} delete() { delete super.foo; // this is bad } } -new Derived().delete(); // ReferenceError: invalid delete involving 'super'. </pre> +new Derived().delete(); // ReferenceError: invalid delete involving 'super'. +``` -<h3 id="super.prop_cannot_overwrite_non-writable_properties" name="super.prop_cannot_overwrite_non-writable_properties"><code>super.prop</code> は書き込み不可能なプロパティを上書きできない</h3> +### `super.prop` は書き込み不可能なプロパティを上書きできない -<p>{{jsxref("Object.defineProperty")}} などで書き込み不可プロパティを定義した場合、<code>super</code> はプロパティの値を上書きできません。</p> +{{jsxref("Object.defineProperty")}} などで書き込み不可プロパティを定義した場合、`super` はプロパティの値を上書きできません。 -<pre class="brush: js notranslate">class X { +```js +class X { constructor() { Object.defineProperty(this, 'prop', { configurable: true, @@ -126,13 +130,14 @@ class Y extends X { var y = new Y(); y.foo(); // TypeError: "prop" は読み取り専用 console.log(y.prop); // 1 -</pre> +``` -<h3 id="Using_super.prop_in_object_literals" name="Using_super.prop_in_object_literals">オブジェクトリテラル内での <code>super.prop</code> の使用</h3> +### オブジェクトリテラル内での `super.prop` の使用 -<p>super は <a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal</a> 記法内でも使用できます。この例では、二つのオブジェクトがメソッドを定義しています。二つ目のオブジェクトの中で、<code>super</code> が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは <code>obj2</code> のプロトタイプを <code>obj1</code> に設定するので、<code>super</code> は <code>method1</code> を <code>obj1</code> 上で見つけることができます。</p> +super は[オブジェクト初期化子 / リテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)記法内でも使用できます。この例では、 2 つのオブジェクトがメソッドを定義しています。 2 つ目のオブジェクトの中で、`super` が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは `obj2` のプロトタイプを `obj1` に設定するので、`super` は `method1` を `obj1` 上で見つけることができます。 -<pre class="brush: js notranslate">var obj1 = { +```js +var obj1 = { method1() { console.log('method 1'); } @@ -146,31 +151,16 @@ var obj2 = { Object.setPrototypeOf(obj2, obj1); obj2.method2(); // logs "method 1" -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> - </tr> - </tbody> -</table> +``` -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> +## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -<p>{{Compat("javascript.operators.super")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a></li> -</ul> +- [クラス](/ja/docs/Web/JavaScript/Reference/Classes) |