JavaScript プロトタイプと継承の説明_js オブジェクト指向

WBOY
リリース: 2016-05-16 18:25:34
オリジナル
822 人が閲覧しました
function A(x) 
{ 
this.x = x; 
} 
alert(A.prototype); 
alert(A.prototype.constructor);
ログイン後にコピー

ポップアップの結果によると、プロトタイプ オブジェクトは関数のコンストラクターによって作成され、それが所有するプロパティはすべてのオブジェクトで共有できます。最初に、プロトタイプ オブジェクトは Object オブジェクトを指し、定義します。コンストラクター属性。この属性は、プロトタイプ オブジェクトを定義するコンストラクター自体を指します。次のコードをもう一度見てください。

コード

function A(x) 
{ 
A.prototype.x = x; 
} 
var obj = new A(10); 
alert(obj.x); 
alert(obj.constructor); 
ログイン後にコピー

プロトタイプオブジェクトのプロパティはすべてコンストラクタで作成したオブジェクトで共有できるため、作成されたオブジェクトはここでコンストラクタプロパティにアクセスできると同時に、objはプロトタイプオブジェクト(プロトタイプ)が作成したインスタンスに相当します。コンストラクターのプロパティをオーバーライドすると、結果はどうなるでしょうか?

コード

function A(x) 
{ 
A.prototype.x = x; 
} 

var objA = new A(10); 
objA.constructor = function(x){ alert("重写obj的constructor属性");this.x = 20 }; 
objA.constructor(); 
alert(objA.x); 

var objB = new A(10); 
alert(objB.x);
ログイン後にコピー

結果によると、最初に「obj のコンストラクター属性を書き換える」が表示され、次に 20 個が表示され、コンストラクターを書き換えると 10 個が表示されることがわかります。 objA オブジェクトの objB は変更されていないため、オブジェクトに属性がどれだけ追加または変更されても、そのプロトタイプ オブジェクト内の属性の元の外観には影響しません。 js がこれを行うのは、あるオブジェクトの動作が他のオブジェクトに影響を与えることができないためです。そうしないと混乱が生じます。

ここで、上記のコードのルールを要約します:

1. オブジェクトを呼び出すときは、まずオブジェクト自体の自己定義プロパティを確認し、存在する場合はそれを呼び出します。

2. 自身のプロパティが存在しない場合、そのコンストラクタで定義されたプロトタイプオブジェクトの参照が呼び出されます。

そして、このルールに従って JavaScript のプロトタイプチェーンが形成され、このルールに従って継承関係を定義できます。

function A(x) 
{ 
A.prototype.x = x; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
}
ログイン後にコピー

このコードは 2 つの関数を示しています。B 関数は A 関数を継承します。A.call(this.x) は、B オブジェクト this を実行のために A 関数に渡すことを意味します。次に、B 関数によって構築されたオブジェクトにも A 関数のすべての特性が含まれる必要があるため、次の文を追加する必要があります。

コードをコピー コードは次のとおりです:

B.プロトタイプ = 新しい A(); アラート(B.prototype.constructor);

まず、B のプロトタイプが A であることを指定します。したがって、B 関数は A 関数の特性を継承します。ポップアップ結果によると、そのコンストラクターが A 関数を指しており、その特性も継承していることがわかります。私たちのB機能は失われていますか?したがって、文を追加して、最後に継続的な統合コードを与える必要があります。


function A(x) 
{ 
A.prototype.x = x; 
A.prototype.ShowA = function(){ alert("A的Show方法!"); }; 
} 

function B(x,y) 
{ 
B.prototype.y = y; 
A.call(this,x); 
B.prototype.ShowB = function(){ alert("B的Show方法!"); }; 
} 

B.prototype = new A(); 
B.prototype.constructor = B; 

var obj = new B(10,5); 
alert(obj.x); 
alert(obj.y); 
obj.ShowA(); 
obj.ShowB();
ログイン後にコピー
ご質問や間違いがございましたら、お気軽に修正してご相談ください。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート