JavsScriptの継承

プロトタイプ継承チェーン

基本的な概念のプロトタイプチェーン:人気の子供が独自のプロトタイプオブジェクトへのターンポイントでプロトタイプオブジェクトをオブジェクト、およびオブジェクトと言うことまでそのプロトタイプオブジェクトのプロトタイプオブジェクトへのこのターンでのポイント、

達成するための原型継承:

<script>
   function SuperType(){
       this.property=true;
   }
   SuperType.prototype.getSuperValue=function () {
       return this.property;
   }
   
   function SubType() {
       this.subproperty=false;
   }
   
   SubType.prototype=new SuperType();
   SubType.prototype.getSubValue=function () {
       return this.subproperty;
   }
   var instance=new SubType();
   console.log(instance.getSuperValue());
</script>

エッセンス:プロトタイプオブジェクトを書き換え、それは新しいプロトタイプに変更し、別のタイプのプロトタイプ・オブジェクト・インスタンスに等しいです。

console.log(instance);

プロトタイプチェーンの明確な理解
ここに画像を挿入説明
ここでインスタンススーパータイプであるSubType.prototypeでgetSubValue()、一方、SuperType.prototypeにサブタイプのプロトタイプ、プロトタイプおよびサブタイプ点スーパープロトタイプ、プロトタイプスーパーポイントオブジェクト、getSuperValue()を指しインチ

:プロトタイプチェーンを通じて継承された実装するときに、リテラルのプロトタイプメソッドの使用を作成することはできません、である、ないリテラルENTEREDすることにより、プロトタイプのメソッドを追加し、それはプロトタイプチェーンを書き換えます。

<script>
   function SuperType(){
       this.property=true;
   }
   SuperType.prototype.getSuperValue=function () {
       return this.property;
   }
   function SubType() {
       this.subproperty=false;
   }
   
   SubType.prototype=new SuperType();
   //使用字面量添加新方法会使上一行无效
   SubType.prototype={
       getSubValue:function () {
           return this.subproperty;
       },
       someOtherMethod:function () {
           return false;
       }
   };
   
    var instance=new SubType();
   console.log(instance.getSuperValue());//error
</script>

短所
継承チェーンのプロトタイプは、一般的な例の初期化は、めったに使われないと同じ財産です

<script>
   function SuperType(){
       this.color=["red","blue","yellow"];
   }
   function SubType() {
       //this.subproperty=false;
   }
   
   SubType.prototype=new SuperType();
   
   stance1=new SubType();
   instance1.color.push("black");
   console.log(instance1.color);//"red","blue","yellow","black"

   var instance2=new SubType();
   console.log(instance2.color);//"red","blue","yellow","black"
</script>

コンストラクタを借入

実現

<script>
   function SuperType(){
       this.color=["red","blue","yellow"];
   }

   function SubType() {
      SuperType.call(this);
   }
   SubType.prototype=new SuperType();

   var instance1=new SubType();
   instance1.color.push("black");
   console.log(instance1.color);//"red","blue","yellow","black"

   var instance2=new SubType();
   console.log(instance2.color);//"red","blue","yellow"
</script>

エッセンス:内部のサブタイプのコンストラクタは、スーパータイプのコンストラクタを呼び出し、または呼び出しによって、この親クラスを変更適用
のサブタイプので、すべてのオブジェクトが関数で定義されたコードを初期化するための新しいサブタイプはスーパータイプを()オブジェクトに対して実行人気があります各インスタンスは、独自のカラーコピーの属性を持っています。

あなたは、パラメータを渡すことができます

<script src="../JS/jquery 1.12.4.js"></script>
 <script>
    function SuperType(name) {
        this.name=name;
    }
    function SubType() {
        SuperType.call(this,"wsp");
        this.age=22;
    }
    var instance=new SubType();
    console.log(instance.name);//wsp
    console.log(instance.age);//22
 </script>

欠点:コンストラクタ関数で呼び出されるメソッドを再利用することはできません、それはめったに単独で使用されていないので。

継承の組み合わせ

プロトタイプ継承チェーンおよび借入コンストラクタ組成物に関する。継承の最も一般的なモード

実現

<script>
   function SuperType(name) {
       this.name=name;
       this.color=["red","blue","yellow"];
   }
   SuperType.prototype.sayName=function () {
       alert(this.name);
   };
   
   function SubType(name,age) {
       //继承属性
       SuperType.call(this,name);
       this.age=age;
   }
   
   //继承方法
   SubType.prototype=new SuperType();
   SubType.prototype.constructor=SubType;
   SubType.prototype.sayAge=function () {
     alert(this.age);  
   };
   
   
   var instance=new SubType("wsp",22);
   instance.color.push("black");
   console.log(instance.color);//"red","blue","yellow","black"
   instance.sayAge();//22
   instance.sayName();//wsp

   var instance2=new SubType("thh",20);
   console.log(instance2.color);//"red","blue","yellow"
   instance2.sayAge();//20
   instance2.sayName();//thh
</script>

原型継承

実現

<script>
  function  object(o) {
      function F() {}
      F.prototype=o;
      return new F();
  }
  var Person={
      name:"wsp",
      friend:["thh","hhp","hhh"]
  }
  
  var anotherPerson=Object(Person);
  anotherPerson.name="Greg";
  anotherPerson.friend.push("Rob");

  var yetotherPerson=Object(Person);
  yetotherPerson.name="Linda";
  yetotherPerson.friend.push("Bob");
  
  console.log(Person.friend);//"thh","hhp","hhh","Rob","Bob"
</script>

自然:浅いコピーを実行するために子孫オブジェクトへのオブジェクトは、この継承は、他のオブジェクト(あなたが作成することもあると言うことができるというオブジェクト)の基礎として、物体の存在を必要とし、そのオブジェクトに渡され、必要に応じて、次にとして修正する。
この例を、人ベースオブジェクト、新しいオブジェクト、プロトタイプとして新たな対象者は、プロパティでプロトタイプが共有されて入ってくるオブジェクト戻ります。

後Object.create新しい()メソッドプロトタイプ仕様は、継承された
2つのパラメータを渡すことができ、第2のパラメータオプション

<script>
  
  var Person={
      name:"wsp",
      friend:["thh","hhp","hhh"]
  }
  
  //传递一个参数与object方法行为相同
  var anotherPerson=Object.create(Person);
  anotherPerson.name="Greg";
  anotherPerson.friend.push("Rob");

  var yetotherPerson=Object.create(Person);
  yetotherPerson.name="Linda";
  yetotherPerson.friend.push("Bob");

  console.log(Person.friend);//"thh","hhp","hhh","Rob","Bob"
</script>
<script>

  var Person={
      name:"wsp",
      friend:["thh","hhp","hhh"]
  }
  //传递二个参数会增加或覆盖同名属性
  var anotherPerson=Object.create(Person,{name:{value:"hhh"}});
  console.log(anotherPerson.friend);//"hhh"
</script>

寄生継承

<script>
  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:"wsp",
      friend:["thh","hhp","hhh"]
  }
  
  var anotherPerson=createAnother(person);
  anotherPerson.sayHi();//hi
</script>

自然:オブジェクトオブジェクトは、新しいオブジェクトの機能は、このモデルのために用意されてい戻す必要がない場合にのみ連続のプロセスをカプセル化するために使用する関数を作成し、何らかの方法で機能は、内のオブジェクトを強化します。

ブライアントはバスケットボールがある天国への準備ができて、良いを取ります

リリース元の4件の記事 ウォンの賞賛4 ビュー2892

おすすめ

転載: blog.csdn.net/qq_42193790/article/details/104093194