JavsScript inheritance

Prototype inheritance chain

The basic concept prototype chain : popular to say that a child objects prototype object in turn points to its own prototype object, and this in turn points to its prototype object prototype object, until the object

Prototypal inheritance to achieve:

<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>

Essence : rewriting the prototype object, it is equal to the prototype object instance of another type, change it to a new prototype.

console.log(instance);

A clearer understanding of the prototype chain

here instance pointing SubType prototype, prototype and SubType point SuperType prototype, prototype SuperType point Object, getSuperValue () in SuperType.prototype, whereas getSubValue () in SubType.prototype, that is SuperType in.

Note : When implementing inherited through the prototype chain, can not create a prototype method uses literal, that is, not by literal entered, add prototype method, it will rewrite the prototype chain.

<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>

Disadvantage :
inheritance chain prototype, the initialization of a common examples are the same property, rarely used

<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>

Borrowing Constructor

Realization :

<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>

Essence : inside subtype constructor calls super type constructor, or apply change this parent class by a call
that is popular performed on the new SubType objects Supertype () for all objects initialization code defined in the function, so SubType of each instance has its own color copy attributes.

You can pass parameters

<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>

Drawback : methods are called in the constructor function can not be reused, so it is rarely used alone.

A combination of inheritance

The prototype inheritance chain and to a borrowing constructors compositions. The most common mode of inheritance

Realization :

<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>

Prototypal inheritance

Realization :

<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>

Nature : object into the descendant objects to perform a shallow copy, this inheritance requires the existence of an object as a basis for another object (an object that you can also be said to be created), and then passed to the object, and then as needed amend.
this example, Person is the base object, the incoming object returns a new object, the new object Person as a prototype, the prototype in the property is shared.

Later the Object.create new () method prototype specification inherited,
can pass two parameters, the second parameter optional

<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>

Parasitic inheritance

<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>

Nature : Create a function only used to encapsulate the process of succession, the function in some way enhance the objects inside, where the object object is not necessary to return any new object functions are available for this model.

Bryant take a good, ready to heaven there are basketball