ユーザ用ツール

サイト用ツール


javascript:inherit

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
javascript:inherit [2013/06/11 13:30] – [継承とオーバーライド] nullponjavascript:inherit [2025/09/10 06:40] (現在) – 削除 nullpon
行 1: 行 1:
-====== inherit ====== 
-===== 継承 ===== 
-インスタンスのメソッドを呼び出されたとき、prototypeからメソッドを探すので、インスタンスのコンストラクタが持っている prototype を適当な別のクラスのインスタンスに書き換えれば、その置き換えたクラスのメソッドを全て利用することができる。 
- 
- 
-ClassBのprototypeをClassAのインスタンスに置き換えることで、ClassBのインスタンスがClassAのメソッドを呼べるようになる。 
-<code javascript> 
-function ClassA(){ 
-} 
-ClassA.prototype.execute = function(){ 
-    window.alert("hoge"); 
-} 
- 
-function ClassB(){} 
-ClassB.prototype = new ClassA(); 
- 
-new ClassA().execute();   // hogeと表示 
-new ClassB().execute();   // hogeと表示 
-</code> 
- 
-===== オーバーライド ===== 
-継承した親クラスのメソッドと同じ名前のメソッドを定義するだけ。 
- 
-<code javascript> 
-function ClassA(){ 
-    this.hoge = "executeメソッド実行。\n\n"; 
-} 
-ClassA.prototype.execute = function(){ 
-    window.alert( this.hoge + "Aのメソッド"); 
-} 
- 
-function ClassB(){} 
-ClassB.prototype = new ClassA(); 
-ClassB.prototype.execute = function(){ 
-    window.alert( this.hoge + "Bでオーバーライドされたメソッド"); 
-} 
- 
-new ClassA().execute(); 
-new ClassB().execute(); 
- 
-</code> 
-実際の処理は次のようになる。オーバーライド前のメソッド呼び出しは 
- 
-  自分のexecuteメソッドを探す 
-  →見つからないので prototype の execute を探す 
-  →見つからないので prototype の prototype の execute を探す 
-  →見つかったのでexecute実行 
- 
-これがオーバーライドによって、 
- 
-  自分のexecuteメソッドを探す 
-  →見つからないのでprototype の executeを探す 
-  →見つかったのでexecute実行 
- 
-と変化したのである。なお、このような prototype 参照の連鎖を**プロトタイプチェイン**と呼ぶ 
- 
-===== 親クラスのメソッドを呼ぶ。 ===== 
- 
-親クラスのメソッドを呼び出すにはcallメソッドを使います。 
- 
-callメソッドは Functionオブジェクトのメソッドで、第一引数に渡したオブジェクトのメソッドとして自分自身を実行するものです。以下の例では、prototype の execute メソッドを自分自身のメソッドとして実行します。そうしないとClassA.execute で this.hoge が undefined になってしまいます。 
-<code javascript> 
-function ClassC(){} 
-ClassC.prototype = new ClassA(); 
-ClassC.prototype.execute = function(){ 
-    this.hoge = "Cクラスから親クラスのメソッドを呼ぶ"; 
-    this.constructor.prototype.execute.call(this , arguments); 
-} 
- 
-// Cクラスから親クラスのメソッドを呼ぶAのメソッド と表示される 
-new ClassC().execute();   
-</code> 
-なお、JavaScriptにはsuperキーワードはありませんが、予約語なので変数名などに使用することはできません。 
- 
- 
-===== constructorプロパティ ===== 
-''this.constructor'' って ''function ClassC(){}'' じゃないの、上のコードって自分自身を呼び出してスタック使い果たすまで再帰しないの?と思うかもしれませんが、そうはなりません。constructor は インスタンス固有のプロパティではなく、クラスを定義した時に prototype にセットされるプロパティです。 
- 
-<code javascript> 
-new ClassC().constructor; 
-new ClassC().hasOwnProperty("constructor"); // インスタンス固有のプロパティではない 
-</code> 
- 
-''this.constructor''にアクセスするとconstructorプロパティは、プロトタイプチェインを辿って、ClassC の prototype、すなわちClassA の インスタンスから取得しようとします。ClassAのインスタンスもconstructorを持ってないので、さらにプロトタイプチェインを辿って、ClassA の prototype から取得されます。よって 、''this.constructor''は、''function ClassA(){}''になります。 
- 
- 
  
javascript/inherit.1370957444.txt.gz · 最終更新: by nullpon