JavaScript継承プロトタイプチェーンと借用コンストラクターの使用例の詳細な説明

プロトタイプ チェーン

JavaScript で継承を実装する最も簡単な方法は、プロトタイプ チェーンを使用することです。サブタイプのプロトタイプを親タイプのインスタンスにポイントするだけです。つまり、「subtype.prototype = 新しい親タイプ ( );"を実現する方法は次のとおりです:

// 为父类型创建构造函数
function SuperType() {
  this.name = ['wuyuchang', 'Jack', 'Tim'];
  this.property = true;
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType() {
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 实现继承的关键步骤，子类型的原型指向父类型的实例
SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType();
instance1.name.push('wyc');
instance1.test.push('h5');
alert(instance1.getSuerperValue());    // true
alert(instance1.getSubValue());      // false
alert(instance1.name);          // wuyuchang,Jack,Tim,wyc
alert(instance1.test);          // h1,h2,h3,h4,h5


var instance2 = new SubType();
alert(instance2.name);          // wuyuchang,Jack,Tim,wyc
alert(instance2.test);          // h1,h2,h3,h4

上記のコードはプロトタイプチェーンを通じて実装された単純な継承であることがわかりますが、テストコード例にはまだいくつかの問題があります。私のブログ投稿「オブジェクト指向 JS、ファクトリ モード、コンストラクター モード、プロトタイプ モード、ハイブリッド モード、ダイナミック プロトタイプ モードの基本説明」を読んだ子供たちは、プロトタイプ チェーン コードの最初の問題は、サブタイプは親タイプのインスタンス、つまりサブタイプのプロトタイプに含まれる親タイプのプロパティであり、その結果、参照型値のプロトタイプ プロパティがすべてのインスタンスで共有されます。上記のコードのinstance1.name.push('wyc'); は、この問題の存在を証明できます。プロトタイプ チェーンの 2 番目の問題は、サブタイプのインスタンスを作成するときに、パラメーターをスーパータイプのコンストラクターに渡すことができないことです。したがって、実際の開発ではプロトタイプチェーンのみを使用することはほとんどありません。

コンストラクターの借用

プロトタイプチェーンに存在する2つの問題を解決するために、開発者はプロトタイプチェーンに存在する問題を解決するためにコンストラクターの借用と呼ばれる手法を使い始めました。このテクノロジーの実装アイデアも非常にシンプルで、サブタイプのコンストラクター内で親タイプのコンストラクターを呼び出すだけです。関数は特定の環境でコードを実行するオブジェクトにすぎないため、コンストラクターは apply() メソッドまたは call() メソッドを介して実行できることを忘れないでください。コードは次のとおりです:

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue());    // error 报错
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
// alert(instance2.getSuerperValue());    // error 报错
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

上記のコードでは、サブタイプ SubType のコンストラクターが親タイプ "SuperType.call(this, name);" を呼び出し、それによってプロパティの継承を実現していることがわかります。サブタイプでも使用できます。インスタンスを作成するときに、親タイプのパラメータが渡されますが、新たな問題が発生します。親型のコンストラクターにメソッド testFun を定義し、親型のプロトタイプにメソッド getSuperValue を定義したことがわかります。ただし、サブタイプをインスタンス化した後でも、親タイプのプロトタイプで定義されているメソッド getSuperValue を呼び出すことはできません。呼び出せるのは、親タイプのコンストラクター メソッド testFun のみです。これは、オブジェクトの作成時にコンストラクター パターンのみを使用するのと同じであり、関数が再利用できなくなります。これらの問題を考慮すると、コンストラクターを借用する手法が単独で使用されることはほとんどありません。

結合継承(プロトタイプチェーン+借用コンストラクター)

結合継承はその名の通り、プロトタイプチェーンと借用コンストラクターの利点を組み合わせたパターンです。実装も非常にシンプルで、プロトタイプチェーンはメソッドを継承し、コンストラクターはプロパティを継承するという、両方の利点を確実に組み合わせています。具体的なコード実装は次のとおりです。

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue());      // true
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
alert(instance2.getSuerperValue());      // true
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

上記のコードは、SuperType.call(this, name) を通じて親型のプロパティを継承し、SubType.prototype = new SuperType() を通じて親型のメソッドを継承します。 ）;。上記のコードは、プロトタイプ チェーンと借用コンストラクターが遭遇する問題を都合よく解決し、JavaScript で最も一般的に使用されるインスタンス継承メソッドになっています。

以上がJavaScript継承プロトタイプチェーンと借用コンストラクターの使用例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。