JavaScript オブジェクト指向 - 関数フォージェリに基づく継承の実装

プロトタイプ チェーンに基づいて継承を実装する方法にはいくつかの欠点があるため、関数偽造に基づいて継承を実装する別の方法が採用されています。この手法の考え方は、子クラスのコンストラクター内で親クラスのコンストラクターを呼び出すことです。

関数フォージェリに基づく継承の実装

JavaScript では、関数は特定の環境でコードを実行するオブジェクトであるため、call() メソッドまたは apply() メソッドを使用して子クラス オブジェクトの親を実行できます。クラスオブジェクトのコンストラクター。次の例を見てください:

/* 创建父类 */
function Parent(){
  this.color = ["red","blue"];
}
 
/* 创建子类 */
function Child(){
  // 继承父类的属性
  Parent.call(this);
}

上記のコードでは、最初に親クラス Parent を作成し、次にサブクラス Child を作成し、サブクラス内で Parent.call(this); を使用して継承を完了します。

記事「関数のプロパティ」では、call() メソッドと apply() メソッドを紹介しました。これら 2 つのメソッドの機能は、特定のスコープで関数を呼び出すことです。つまり、これら 2 つのメソッドは関数名によって呼び出すことができます。 . 関数を呼び出します。ここでは、Child 内で Parent.call(this); を使用して継承を完了しています。この文は、この時点では Child オブジェクトを参照しています (Child では this が実行されるオブジェクトである必要があります)。 Child) なので、Child に this.color = ["red", "blue"]; を持つことと同じであり、これも偽装フォームです。

次の方法で確認できます:

var c1 = new Child();     //创建子类对象c1
c1.color.push("Green");   //为c1添加新的颜色
console.info(c1.color);   //控制台输出：red,blue,Green
 
var c2 = new Child();     //创建子类对象c2
console.info(c2.color);   //控制台输出：red,blue

上記のコードでは、サブクラス オブジェクト c1 を作成し、それに新しい色 "Green" を追加しました。これにより、コンソールに出力されます: "red, blue,green" 」。次に、オブジェクト c2 を作成しました。新しい色は追加されていないため、コンソールには親クラスから継承された色 (「赤、青」) のみが出力されます。

new Childが呼び出されるたびに、オブジェクトの属性を設定するのと同じになります。このとき、各オブジェクトは空間内にカラー属性を持っていますが、プロトタイプには存在しないため、カラーは共有されません。これにより、プロトタイプチェーン継承における参照型変数の問題が解決されます。

サブクラス コンストラクター

プロトタイプ チェーン継承のもう 1 つの欠点は、親クラスのコンストラクターをサブクラスから呼び出すことができないため、サブクラスの属性を親クラスに割り当てる方法がないことです。この問題は関数偽造によってうまく解決できます。次の例を見てください:

// 创建父类
function Parent(name){
  this.name = name;
}
 
//创建子类
function Student(name,age){
  //使用伪造的方式就可以把子类的构造函数参数传递到父类中
  Parent.call(this,name); //调用父类的属性
  this.age = age;
}
 
var s1 = new Student("Leon",22);
var s2 = new Student("Ada",25);
 
console.info(s1.name + "," + s1.age);  // 控制台输出：Leon,22
console.info(s2.name + "," + s2.age);  // 控制台输出：Ada,25

上記のコードでは、サブクラス Student が関数フォージェリを通じて親クラスの name 属性を呼び出し、実際にサブクラスに name 属性を追加します。ここで、call() メソッドは Student クラスのパラメータ名を親クラスに渡し、完了した操作は this.name = name; と同等になります。そして、この name 属性は、親クラスの name 属性ではなく、サブクラスの name 属性です。

関数偽造に基づく継承実装の問題点

上記の議論では、サブクラスが親クラスの属性を継承することについてのみ説明しましたが、サブクラスはどのようにして親クラスのメソッドを継承するのでしょうか?前にも述べたように、通常はプロトタイプにメソッドを設定します。たとえば、親クラスに Say() メソッドがあり、コードは次のとおりです。

// 创建父类
function Parent(name){
  this.name = name;
}
 
// 父类的say()方法
Parent.prototype.say = function(){
  console.info(this.name);
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

関数フォージェリを使用するメソッドのため、サブクラス Student は親クラスを指すため、サブクラスが親クラスを継承した後は、say() メソッドは存在しません。この問題を解決する方法は、say() メソッドを親に配置し、this キーワードを使用して作成することです。

// 创建父类
function Parent(name){
  this.name = name;
  // 父类的say()方法
  this.say = function(){
    console.info(this.name);
  }
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

これを行うと、サブクラスが親クラスのsay()メソッドを継承できるようになりますが、別の問題が発生します。サブクラスオブジェクトが作成されるたびにsay()メソッドが生成され、大量のメモリを占有することになります。空間。

関数フォージェリに基づいた継承の実装にも欠陥があるため、この方法だけで継承を完了するのではなく、組み合わせベースの方法を使用して継承を実装します。この種の継承については、次の記事で紹介します。 。

上記は JavaScript オブジェクト指向 - 関数偽造に基づく継承の内容です。さらに関連する内容については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。