JavaScript継承の使用例を詳しく解説：プロトタイプ継承、寄生継承、寄生複合継承

プロトタイプ継承

プロトタイプ継承の実装方法は、通常の継承とは異なり、厳密な意味でのコンストラクタを使用せず、プロトタイプを使用して既存のオブジェクトに基づいて新しいオブジェクトを作成します。カスタム タイプを作成します。具体的なコードは次のとおりです。

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

コード例:

/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Tim']
}

var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');

var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');

alert(person.friends);  // wyc,Nicholas,Tim,Bob,Rose

寄生継承

/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}

使用例:

/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
   
/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

寄生組み合わせ 式継承

組み合わせJavaScript のパターン実装の継承には独自の欠点があります。ここでその欠点を解決します。実装の考え方は、コンストラクターがプロパティを継承し、プロトタイプ チェーンのハイブリッド形式がメソッドを継承するというものです。つまり、親をインスタンス化する必要はありません。メソッドを継承するときの型コンストラクター。コードは次のとおりです:

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

これを使用する場合、結合モードのコード行「SubType.prototype = new SuperType();」をinheritPrototype(subType, superType);に置き換えるだけで済みます。寄生結合継承の効率の高さは、親型コンストラクターを 1 回だけ呼び出すことで、不必要または冗長なプロパティの作成を回避できるという事実に反映されています。同時に、プロトタイプチェーンは変更されないため、instanceof と isPrototypeof() は通常どおり使用できます。これが現状では最も理想的な継承方法であり、現在このモデルに移行中です。 (YUIもこのパターンを使用しています。)

以上がJavaScript継承の使用例を詳しく解説：プロトタイプ継承、寄生継承、寄生複合継承の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。