
No.3ベストアンサー
- 回答日時:
JavaScriptにはクラス定義がないので、プロパティとメソッドを動的に継承しなければなりません。
プロパティは、コンストラクタから親のコンストラクタを呼び出すことで継承します。
ただし、その際 this のメソッドとして呼ばないと、親コンストラクタでの初期化が自分に反映されません。親コンストラクタをメソッドとして呼び出すには、
> call(または apply)メソッドを使い、「親コンストラクタ.call(this, 引数...)」とする。
または
> 一時的に親のコンストラクタをプロパティに登録し、実行後に削除する。
という方法を取ります。
メソッドは、親の prototype を自分の prototype にコピーすることで継承します。
ただし、prototype はオブジェクトなので単に代入すると親のものを参照するようになってしまい、メソッドの追加などが親にも影響してしまいます。この問題の解法としては、
> for - in で prototype のプロパティを1つ1つコピーする。
とか
> 親のインスタンスを作り、それを prototype に代入する。
というような方法が知られています。
しかし、for - in ではビルトインオブジェクトなどが持つ内部プロパティまでは取れないので、汎用的な継承の手段としては今ひとつです。
また、親のインスタンスを使う方法には余計な親コンストラクタ呼び出しが伴うので、親コンストラクタでクラスプロパティの変更などをしていると問題が生じます。
この問題を回避するには、親クラスと同じ prototype を持ち、コンストラクタでは何もしないダミークラスを定義して、そのインスタンスを prototype として使うようにします。
例:Base クラスを継承して Deriv クラスを構築する。
/**** class Base ****/
// コンストラクタ
function Base(a) {
++Base.count; // 生成したBaseオブジェクトをカウント(親クラスを直接使って継承すると、問題が起こる例)
this.a = a;
}
// メソッド定義
Base.prototype.print = function () {
document.write("a=",this.a, "<br>");
}
/**** class Deriv ****/
// コンストラクタ
function Deriv(a, b) {
// プロパティの継承
Base.call(this, a);
// 固有プロパティの追加
this.b = b;
}
// メソッドの継承
function DerivPrototype() {} // 継承用ダミークラス
DerivPrototype.prototype = Base.prototype; // プロトタイプは代入でOK
Deriv.prototype = new DerivPrototype;
Deriv.prototype.constructor = Deriv; // コンストラクタまで変更されてしまうので修正
// メソッド定義
Deriv.prototype.print = function () { // print のオーバーライド
document.write("a=",this.a, ", b=",this.b, "<br>");
}
このコードで気になるのは、メソッド継承の部分だけ抽象レベルが低いことでしょう。単に関数化するだけでも見通しは良くなりますが、次のように全ての関数の上位クラスである Function のメソッドとして登録すると、さらに可読性が高まります。
Function.prototype.inherit = function (baseClass) {
function tempClass() {}
tempClass.prototype = baseClass.prototype;
this.prototype = new tempClass;
this.prototype.constructor = this;
}
このコードをクラス定義の前に記述しておき、継承の部分は次のように変更します。
Deriv.inherit(Base);
※インデントなどに全角空白を使っているので、コピーする場合はタブなどに置換して下さい。
ご回答ありがとうございます。
詳細な解説とサンプルのおかげで、問題点なども含めた非常に深い知識と、大変高度なテクニックを学ぶことができました。
どうもありがとうございました。
No.2
- 回答日時:
こんな感じ
-------------------------------------------------------------
//Animalクラス
//コンストラクタ
function Animal(name, kind){
this.name=name;
this.kind=kind;
}
//メソッド
Animal.prototype.hey=function(){
return "I'm a " + this.name;
};
Animal.prototype.toString=function(){
return "{" + this.name + " of " + this.kind +"}";
};
//Catクラス/Animalサブクラス
function Cat(name){
this.name=name;
this.kind="CAT";
}
Cat.prototype=new Animal("","");//継承にあたる
Cat.prototype.constructor=Cat;//コンストラクタは自分のを使う
//新しいメソッド
Cat.prototype.sing=function(){
return "nya-o";
};
ご回答ありがとうございます。
分かりやすいサンプルにより、JavaScriptでのクラスの理解が一層深まりました。
どうもありがとうございました。
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- C言語・C++・C# C# 継承の問題で programに示された拡張をすべて含んだ上で,クラス Mammal に,そのオ 1 2022/07/22 09:48
- その他(プログラミング・Web制作) どういうプログラムで組みますか?google colabでやってるんですけど、出来る方お願いします。 1 2022/07/06 09:28
- その他(プログラミング・Web制作) どういうプログラムで組みますか?google colabでやってるんですけど、出来る方お願いします。 1 2022/07/17 18:41
- 弁護士・行政書士・司法書士・社会保険労務士 管理費滞納債務の特定承継人への承継 6 2022/04/02 16:59
- その他(プログラミング・Web制作) このプログラミングをどう組みますか? Googlecolabでやってるんですが、出来る方お願いします 1 2022/07/13 10:52
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- JavaScript JavaScriptのif文について 3 2022/07/19 10:35
- その他(プログラミング・Web制作) pythonのプログラムについての質問です。 1 2023/05/26 10:31
- Java java 飾子を付けること(public static・・・) ・コンソールへの出力処理はmainメ 2 2022/06/16 19:34
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GASでチェックボックスを一括of...
-
スマホ上で、左右スワイプで次...
-
Cookieに保存されない
-
初心者です。gulpでコンパイル...
-
Adobe acrobat proでフォームを...
-
画面遷移を行わずに同一ページ...
-
変数宣言と初期値代入の場所に...
-
switch文のswitch(n)の部分を複...
-
jsでは、'で区切った部分を改行...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
タグを教えてください。
-
jqueryのselect2で検索欄の文字...
-
jsonテキストデータの並び替え...
-
初心者です。gulpでコンパイル...
-
ラジオボタンを複数選択したと...
-
階層別の組織図の自動作成について
-
jQueryで同じクラス名のものを...
-
二次元配列を使って順位をだす...
-
読み込んだQRコードをフォーム...
-
画面遷移を行わずに同一ページ...
-
セレクトを全て選択されていな...
-
【Google Apps Script】「ライ...
-
Adobe acrobat proでフォームを...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
GASでGoogleフォームの自動返信...
-
フォームが空欄の時にフォーム...
-
セレクトボックスで配列を呼び...
-
イラストレーター、縦中横のシ...
おすすめ情報