JavaScript における継承のさまざまな組み合わせの紹介 (コード例)-jsチュートリアル-php.cn

JavaScript における継承のさまざまな組み合わせの紹介 (コード例)

不言

リリース： 2019-01-19 10:54:18

転載

2366 人が閲覧しました

この記事では、JavaScript のさまざまな組み合わせの継承について紹介します (コード例)。必要な方は参考にしていただければ幸いです。。

1. 結合継承: 擬似古典継承とも呼ばれ、プロトタイプチェーンと借用したコンストラクターテクノロジを組み合わせた継承方法を指します。

例を見てみましょう:

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    alert(this.name);
  }
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承方法
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function() {
    alert(this.age);
  }
 
  var instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  alert(instance1.colors); //red,blue,green,black
  instance1.sayName(); //Nicholas
  instance1.sayAge(); //29
 
  var instance2 = new SubType("Greg", 27);
  alert(instance2.colors); //red,blue,green
  instance2.sayName(); //Greg
  instance2.sayAge(); //27

ログイン後にコピー

結合継承は、プロトタイプチェーンと借用コンストラクターの欠点を回避し、それらの利点を組み合わせます。

2. プロトタイプの継承

継承の本質は、指定されたオブジェクトの浅いコピーを実行することです。コピーしたコピーをさらに変形することもできます。

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
 
  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };
 
  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");
 
  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");
 
  alert(person.friends); //Shelby,Court,Van,Rob,Barbie

ログイン後にコピー

3. 寄生継承

# はプロトタイプ継承とよく似ており、オブジェクトまたはオブジェクトに基づいています。この情報を使用してオブジェクトを作成し、そのオブジェクトを強化して、最後にオブジェクトを返します。スーパータイプコンストラクターへの複数の呼び出しによる結合継承パターンによって引き起こされる非効率性の問題を解決するには、このパターンを結合継承で使用できます。

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: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
 
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();

ログイン後にコピー

4. 寄生結合継承

# 寄生継承と結合継承の利点を組み合わせた最も効率的な方法です。基本的な型の継承を実装します。

//继承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;
 
    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }
 
  //超类方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }
 
  //子类方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承超类的原型
  extend(SubType, SuperType);
 
  //子类方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }
 
  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);
 
  instance1.colors.push(&#39;black&#39;);
 
  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green
 
  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true

ログイン後にコピー

この例の効率の高さは、SuperType コンストラクターを 1 回だけ呼び出すため、SubType.prototype プロパティに不必要な冗長性が作成されないことです。同時に、プロトタイプチェーンは変更されないままにすることができます。したがって、instanceof と isPrototypeOf() は引き続き正常に使用できます。開発者は一般に、寄生構成継承が参照型にとって最も理想的な継承パラダイムであると信じています。

以上がJavaScript における継承のさまざまな組み合わせの紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。