ホームページ > ウェブフロントエンド > jsチュートリアル > OOP_javascriptスキルを実装するためのJavaScriptプロトタイプモードの再研究

OOP_javascriptスキルを実装するためのJavaScriptプロトタイプモードの再研究

WBOY
リリース: 2016-05-16 18:54:15
オリジナル
902 人が閲覧しました
コードをコピー コードは次のとおりです:


コードをコピーします コードは次のとおりです。

function A()
{
this.v1 = 10; 🎜>}
A.prototype.print = function()
{
alert(this.v1)
}
function B()
{
}
B.prototype = new A();
new B().print();

このコードを実行すると出力は 10 になります。クラス B はメソッド print を継承しているようです。クラス A が正しい出力を生成する場合、実際の実行プロセスはクラス B によって生成されたオブジェクト内にあります。メソッド print は直接取得できないため、対応するメソッドはそのプロトタイプ属性で見つかります。この解決策の出発点は非常に優れています。クラスがクラス B に存在する場合はクラス B が呼び出され、それ以外の場合はそのプロトタイプ属性 (クラス A) の同じ名前のメソッドが呼び出されます。ただし、サブクラスのメソッドが同じ名前の親クラスのメソッドを呼び出す必要がある場合があります。たとえば、クラス B を

function B()
{
this.v2 = 15;
B.prototype = 新しい A();
B.prototype.print = function()
{
this.prototype.print.call(this);
alert(this.v2);
new B().print();


このうち this.prototype.print がクラス A に対応する print メソッドです。実際にはそうではありません。別のレイヤーを継承してみましょう。



コードをコピーします。 }
C.prototype = new B();
C.prototype.print = function( )
{
this.prototype.print.call(this);
alert(this.v3);
new C().print(); >
期待される出力は 10、15、20 ですが、残念ながら、この方法で記述した結果、システムは無限ループに陥ります
。なぜなら、このメソッドを実行すると、




コードをコピーします


コードは次のとおりです:
スタックがオーバーフローするまで、次のメソッドが呼び出されます。 🎜>



コードをコピーします


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


B.prototype.print = function()
{ this.prototype.print.call(this); alert(this.v2) } 正しい書き込みメソッドは
になります。



コードをコピー


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


B.prototype .print = function()
{ A.prototype.print.call(this); alert(this.v3); C.prototype.print = function() { B. prototype.print.call(this); alert(this.v3);
}


しかし、継承関係が変わると、親クラスへのかなりの数の参照を変更する必要があります。これは最善の方法ではありません。実際のアプリケーションでは、_super を使用して親クラスの名前を置き換え、_this を使用してそのクラス自体の名前を置き換え、その後、標準のメソッドを使用して、それらを [super].prototype または [this] に置き換えることを検討できます。 ].prototype、これにより、指定されたメソッドが曖昧さなく呼び出されます。これは、JavaScript の OOP に対する実際の解決策です。




コードをコピーします。

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

/*
OOP 継承システムを使用する場合、最初にクラスを定義し、最後に extendsOf を実行します。 クラスを初期化し、_super を使用して参照します。たとえば、親クラスでは、_this を使用して独自のメソッド
を参照します。 例:
function Extend2() { _super(); Extend2.prototype。 setValue = function(value) { _super.setValue(value); alert("Extend2:" 値);
Extend2.extendsOf(Extend1); 🎜>
クラス継承ツリーのルートは Object です。 注: エスケープを使用するすべてのメンバー関数は、extendsOf メソッドが呼び出される前に定義する必要があります。
オブジェクトは、アンダースコアで始まる自動的に実行される初期化コードを設定できます。名前は次のとおりです。 オブジェクトは同じ名前です。たとえば、
Object._Object = function() {...}
オブジェクトの初期化コードが存在しない場合、親オブジェクトの初期化コードは次のようになります。すべての検索が完了するまで自動的に検索されます
コードをコピー コードは次のとおりです:

関数。 FRBlock = / *("([^"^\]|\" )*"|'([^'^\]|\')*'|/([^/^\]|\.)*/) */;
Function.FRSpace = /s /g;
Function.FRSign = / ?(^|;|:|<|>|?|,|.|/|{|}|[ |]|-| |=|(|)|*|^| %||) ?/g
Function.FRRefer = /_(super|this)(.[^(] )?([^ )]*))/;
Function.prototype.FCompile = function(name)
{
//name パラメーターがクラスのコンストラクターであるか、クラスの属性であるかを確認します。空の場合は、コンストラクターであることを意味します。
if (name)
{
//クラスの場合、属性は関数実装ではありません。値をサブクラスに直接割り当てて終了します。
if (typeof. this.prototype[名前] != "関数")
{
window[this.FClassName].prototype[名前] = this .prototype[名前];
return; var s = this.prototype[name].toString();
}
else
{
var s = this.toString();
var b = "" ;
var r;
//空白文字をフィルターします
while (r = Function.FRBlock.exec(s))
s = RegExp.rightContext; .leftContext.replace(Function.FRSpace, " ").replace(Function.FRSign, "$1") r[1];
}
b = s.replace(Function.FRSpace, " ").replace (Function.FRSign, "$1");
var i = b.indexOf("(");
var j = b .indexOf(")",
if (!name);
{
this.FClassName = b.substring(9, i);
}
var cn = this.substring(i 1, j);
s = b.substring(j 2, b.length - 1);
b = "";
// 呼び出しエスケープを実行し、_super,_this を指定されたメソッド
for (var n = 0; r = Function.FRRefer.exec(s); n )
{
if (r[2 ])
{
if (!name && !n)
{
b = this.FSuperClass.FClassName ".apply(this,arguments);"
}
r [2] = ".prototype" r[2]
}
else if (r[1] == "this")
{
//JS 関数はパラメーターの違いを区別しません。コンストラクターは再帰的に自分自身を呼び出すことはできません
throw "コンストラクター呼び出しは次のようにしてはなりません"_this();" コンストラクター内";
}
else if (name || RegExp.leftContext)
{
throw "コンストラクター呼び出しはコンストラクター内の最初のステートメントである必要があります";
}
else
{
r[2] = "";
}
s = RegExp .rightContext;
b = RegExp.leftContext (r[1] == "this" ? cn : this.FSuperClass.FClassName) r[2] (r[3] ? ".call(this," r[3 ] ")" : ".apply(this,arguments)"); >}
if (n)
{
b = s;
}
else if (name)
{
// _this、_super、への呼び出しはありません。コンパイルする必要はありません
window[cn].prototype[name] = this.prototype[name];
return;
}
else
{
//親クラスのコンストラクターを呼び出し、自動的に
b = this.FSuperClass.FClassName ".apply(this,arguments);" s;
}
//コンパイル結果の割り当て
if (name)
{
eval(cn ".prototype." name "=function(" arg "){" b "}");
}
else
{
eval(cn) "=function(" arg "){" b ";if(this.constructor==" cn ")" cn "._" cn ".apply(this,arguments);}"); ].FClassName = cn;
}
}
Function.prototype.extendsOf = function(superClass)
{
this .FSuperClass = superClass>// のすべての関数をコンパイルします。 class
this.FCompile();
for (this.prototype の変数名)
{
this.FCompile(name);
}
var clazz = window[this. FClassName];
clazz.FSuperClass = superClass;
//サブクラスによって実装されていない関数とプロパティをコピーします
varprototype = clazz .prototype; superClass.prototype)
{
if (!prototype[名前])
{
プロトタイプ[名前] = superClass.prototype[名前];
}
}
; //初期化メソッドを Object._Object の形式でコピーします
for (var c = this; ; c = c.FSuperClass)
{
if (c[" _" c.FClassName])
{
clazz["_" clazz.FClassName] = c["_" c.FClassName];
}
}
}
/* OOP の組み込みオブジェクト クラスによって提供されるサポート
*/
Object.FClassName = "Object";
Object._Object = Function.Instance
Object.prototype .instanceOf = function; (clazz)
{
for (var c = this.constructor; c; c = c.FSuperClass)
{
if (c === clazz)
{
return true;
}
}
戻り値
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート