継承_javascript スキルを実装するための JavaScript シミュレーション メソッド

この記事の例では、JavaScript シミュレーションで継承を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JavaScript は OO の「クラス」のみをシミュレートおよび実装できることを誰もが知っています。これは、JavaScript にはクラスの継承がないことを意味します。元のオブジェクトに属性を追加または書き換えることによってのみ、実装をシミュレートできます。

最初に親クラス

を定義します。

//父类
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

1. プロトタイプの実装:

//子类
//1、prototype继承
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();

このメソッドは非常に簡単です。親クラスのインスタンスをサブクラスのプロトタイプ属性に割り当てるだけです。そうすれば、サブクラスは親クラスのメソッドと属性を使用できるようになります。ここでは、この例の cctest1.parentClassInfo() メソッドなど、プロトタイプ チェーン内で上方向に検索する機能を実際に使用します。 JavaScript はまず、ChildClassByPrototype のインスタンスでparentClassInfo() メソッドを検索します。したがって、ChildClassByPrototype.prototype プロパティの検索が続行され、そのプロトタイプ プロパティの値は、parentClassInfo() メソッドを持つ ParentClass のインスタンスであるため、検索は終了し、呼び出しは成功します。

2. 実装を適用します:

//2、apply继承
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}

JavaScript での適用は、メソッド B をメソッド A に置き換えることとして理解できます。最初のパラメーターはメソッド B 自体のオブジェクトであり、2 番目のパラメーターは配列である必要があるパラメーターです。メソッド A. List に渡されます。パラメーターが空の場合、つまりパラメーターが渡されない場合は、new Array()、[] を介して渡すことができます。

3. プロトタイプ実装を呼び出します:

//3、call+prototype继承
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

Call と apply は同様の機能を持ちます。つまり、どちらもメソッド B をメソッド A に置き換えますが、渡されるパラメーターが異なります。call メソッドの最初のパラメーターはメソッド B 自体のオブジェクトであり、後続のパラメーターは必要ありません。配列でラップされ、順番に直接配信される必要があります。機能はほぼ同じなのに、なぜプロトタイプ割り当ての一文が追加されているのでしょうか。これは、call メソッドがメソッドの置換のみを実装し、オブジェクトの属性をコピーしないためです。

各メソッドには、適用可能な環境があります。たとえば、親クラスにパラメーター化されたコンストラクターがある場合:

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

この場合、プロトタイプは適用されず、apply または call を使用できます。

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

インスタンス化:

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

申し込みと電話のどちらを選択するのですか? OO 継承では、サブクラスは親クラスから継承するため、親クラスの型でもある必要があります。つまり、ChildClassByCall と ChildClassByApply も ParentClass 型である必要がありますが、「instanceof」を使用してそれらを検出すると、apply を通じて継承されたサブクラスが ParentClass 型ではないことがわかります。したがって、呼び出しプロトタイプを使用して継承をシミュレートすることをお勧めします。 Google Map APIの継承ではこの方式を利用しているとのこと。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。