JavaScript 面向对象 （2）

• JS 如何继承？
  <b>借用构造函数继承</b> ：

        function SuperType(name){
            this.name = name;
        }
  
        function SubType(){  
            //从超类中继承并传递参数
            SuperType.call(this, "Nicholas");
            
            //实例属性
            this.age = 29;
        }
  
        var instance = new SubType();
        alert(instance.name);    //"Nicholas";
        alert(instance.age);     //29
  

<b>组合继承</b> ：

       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   

<b>原型式继承</b> ：object 制造一次浅复制， ECMAscript5 可以造成同样效果 Object.create() ,小心引用类型的值始终都会共享相应的值；

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

<b>寄生组合式继承</b> ：通过借用构造函数来继承属性，通过原型链的混成形式继承方法。实际上是使用寄生式继承来继承超类型的原型，在把结果指定给子类型的原型；

      function object(o){
          function F(){}
          F.prototype = o;
          return new F();
      }
  
      function inheritPrototype(subType, superType){
          var prototype = object(superType.prototype);   //创建 object，其prototype是超类
          prototype.constructor = subType;               //增强 object，弥补重写prototype的constructor丢失
          subType.prototype = prototype;                 //指定 object
      }
                              
      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;
      }

      inheritPrototype(SubType, 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

<b>ES6 Class 的继承</b> ： 先创造父类的实例对象 this ，再用子类的构造函数修改 this

  class Point{
      constructor(x,y){
        this.x = x
        this.y = y
      }
      toString(){
        return "(" + this.x + "," + this.y +")"
      }
  }
class ColorPoint extends Point {
    constructor( x , y , color ) {
        super(x,y)  // 调用超类 constructor 
        this.color = color
    }
    toString(){
        return this.color + ' ' + super.toString(); // 调用超类 toStirng 方法
    }
}

• JS 如何多态？
  多态，意味着就算不知道变量所引用的对象类型是什么，还是能对它进行操作，而它也会根据对象（或类）类型的不同而表现出不同的行为；
  <b>原型链上子类重写方法不会覆盖父类方法，但是将不会使用父类方法</b>

function Point(x,y){
    this.x = x
    this.y = y
}
Point.prototype.toString = function(){
    alert("(" + this.x + "," + this.y +")")
}
var instancePoint = new Point(2,3)
instancePoint.toString = function(){
    alert( this.x + this.y )
}  
instancePoint.toString();  //5

<b>JS 没有重载，后写的函数会覆盖先写的函数。但可以用参数类型检测来构建函数，但 JS 本身是没有重载的。</b>

总结：

屏幕快照 2017-03-27 下午4.48.20.png 屏幕快照 2017-03-27 下午5.17.26.png