ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の継承方法の概要_JavaScript スキル

JavaScript の継承方法の概要_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:57:371084ブラウズ

最初の段階:

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

function A(){
this.funB = function(){
alert('A:funB');
}
A.prototype = {
funA:function(){
alert('A:funA');
}
};
function B(){
}
function extend(sub,parent){
sub.prototype =新しい親 ();
sub.prototype.constructor = sub;
var b = new B(); // out 'A:funA'
b.funB() // out 'A:funB'
alert(binstanceof A) // out "true"


;ひと目で意味がわかると思います。 まず、AとBという2つのクラスを定義し、extendメソッドを使ってBにクラスAを継承させます。拡張の原則は、親クラスを子クラスのプロトタイプに新しく追加することです。
instanceof を使用して検出することも true にしたい場合は、2 つのクラスのプロトタイプ オブジェクトが間接的または直接的に同じオブジェクトである必要があります。
このアプローチに問題はありますか?一般的なオブジェクト指向言語では、サブクラスが親クラスを継承する場合、親クラスのコンストラクタの実行はトリガーされませんが、ここでは継承時に親クラスが実行されます。
第 2 段階




コードをコピー
コードは次のとおりです。 function A( ){ this.Astr = 'こんにちは A';
}
A.prototype = {
funA:function(){
alert(this.Astr); 🎜> };
function B(){
arguments.callee.superclass && argument.callee.superclass.apply(this,arguments);
this.Bstr = 'hello B';
B.prototype = {
funB:function(){
alert(this.Bstr);
}
};
function C(){
arguments.callee .superclass && argument.callee.superclass.apply(this,arguments);
alert(this.Astr);
}
function extend(sub,parent); {
var subproto type = sub.prototype;
subprototype != 'object' && (subproto = {}); object' && (sub.prototype = {});
for(var i in subproto){
sub.prototype[i] = subproto[i];
sub.superclass = 親;
}
//B は A を継承します
extend(B,A);
//C は B を継承します
extend(C,B); ); // 'こんにちは A','こんにちは B'
c.funA() // 'こんにちは A'
c.funB(); // 'こんにちは B'
アラート; (cinstanceofA) //out true
alert(cinstanceof B) //out true;


ここの extend メソッドにはいくつかの変更が加えられています。スーパークラスの属性は、継承する親クラスを参照するために使用されます。空の関数 proto は、親クラスのプロトタイプを取得するために使用され、サブクラスのプロトタイプにインスタンス化されるため、親クラスのコンストラクターは実行されません。
代わりに、サブクラスのコンストラクターでコードを使用して、親クラスの合意されたコンストラクターを実行します。




コードをコピー


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

arguments.callee.superclass && argument.callee .superclass.apply(this,argumengs);

これでクラスの継承が完了します。 上記のコードの継承を記述するより便利な方法はありますか? Function のプロトタイプを変更して、以下を参照してください。コードをコピーします

コードは次のとおりです。

Function.prototype.extend = function(parent){
var subproto = this.prototype;
this.prototype =parent.prototype; 🎜>サブプロトタイプのタイプ ! = 'オブジェクト' && (サブプロト = {});
このプロトタイプのタイプ != 'オブジェクト' && (サブプロトタイプの変数 i){ this.prototype[i] = subproto[i]; this.superclass = 親; 関数 A(){ this .Astr = 'こんにちは A'; A.prototype = { funA:function(){
alert(this.Astr);
}; >var B = function (){
arguments.callee.superclass && argument.callee.superclass.apply(this,arguments);
this.Bstr = 'hello B'
}
B .prototype = {
funB:function(){
alert(this.Astr)
}
};
B.extend(A); ){
argument.callee.superclass && argument.callee.superclass.apply(this,arguments);
alert(this.Astr); (B);
var c = new C(); // 'こんにちは A','こんにちは B'
c.funA(); ); // 'hello B'
alert(c instanceof A) // 出力 true
alert(c instanceof B) // 出力


ここで extend することは次のとおりです: subproto はサブクラスの元のプロトタイプを参照し、サブクラスのプロトタイプが親クラスのプロトタイプ オブジェクトを指すようにして、親クラスを継承します (これの目的は、instanceof を作成することです)サブクラスの親クラスは true)。次に、サブプロトを走査し、元のプロトタイプのメンバーを現在のプロトタイプに追加します。これにより、同じ名前を持つサブクラスのメンバーが親クラスのメンバーを上書きします。最後に、サブクラスの属性スーパークラスが親クラスを指すようにします。
JS 継承の鍵は、プロトタイプ チェーンの一意性を維持することです。instanceof は、インスタンスの __proto__ が親クラスのプロトタイプと同じオブジェクトであるかどうかを判断します。

Author cnblogs OD。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。