继承（二）

1. 面试题热门问题
2. js基础重点
3. 面向对象编程
4. 主流框架使用广泛 reactjs、vuejs、angularjs、rxjs....

• 什么是js继承？

JavaScript继承是指一个对象通过从另一个对象（通常是父对象或基类）获取属性和方法的过程。在继承中，子类可以重写父类的方法，也可以增加新的方法和属性。这种方式可以使代码更加复用和灵活

• 接着上篇文章我们继续剩下的几种继承方式

4. 原型式继承

概念

通过创建一个新的对象并将其原型设置为要继承的对象，来实现继承

// 借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。
      function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
      }

      // 在object函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。
      // 本质上来说，object对传入其中的对象执行了一次浅复制

      var person = {
        name: 'Jiang',
        friends: ['Shelby', 'Court']
      };
      var anotherPerson = object(person);
      // 等同于上面自定义object函数拷贝一个对象一致  var anotherPerson = Object.create(person);
      console.log(anotherPerson.friends); // ['Shelby', 'Court']

      anotherPerson.friends.push('lilei');

      var anotherPerson2 = object(person);

      console.log('anotherPerson2.friends', anotherPerson2.friends); //['Shelby', 'Court', 'lilei']

      /**
       * 缺点： 1.子类实例不能向父类传参
               2.父类的所有引用属性会被所有子类共享
      */

5. 寄生式继承

概念： 在原型式继承的基础上，增强对象，返回构造函数

  function createAnother(o) {
    var clone = Object.create(o); // 创建一个新对象
    //在这个实例上扩展一些属性或者方法
    clone.sayHi = function () {
      // 添加方法
      console.log('hi');
    };
    return clone; // 返回这个对象
  }
  var person = {
    name: 'Jiang'
  };
  var anotherPeson = createAnother(person);
  anotherPeson.sayHi();
  /**
   * 缺点： 1.子类实例不能向父类传参
           2.父类的所有引用属性会被所有子类共享
  */

6. 寄生组合式继承

概念： 在寄生式和组合式继承基础优化

  function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
  }
  function GetPrototype(Father, Son) {
    var prototype = object(Father.prototype); // 创建对象，创建父类原型的一个副本
    prototype.constructor = Son; // 增强对象，弥补因重写原型而失去的默认的constructor 属性
    Son.prototype = prototype; // 指定对象，将新创建的对象赋值给子类的原型
  }
  function Father(name) {
    this.name = name;
    this.color = ['blue', 'pink', 'black'];
  }
  Father.prototype.getname = function () {
    return this.name;
  };
  function Son(name, age) {
    Father.call(this, name);
    this.age = age;
  }
  GetPrototype(Father, Son); // 这一句，替代了组合继承中的Son.prototype = new Father()
  Son.prototype.getage = function () {
    return this.age;
  };
  var son1 = new Son('小米', 18);
  var son2 = new Son();
  son1.color.push('green');
  console.log(son1.getname()); //小米
  console.log(son1.name); //小米
  console.log(son1.color); //['blue', 'pink', 'black', 'green']
  console.log(son2.color); // ['blue', 'pink', 'black']
  console.log(son1 instanceof Father); //true
  /**
   * 
   * 优点：1. 只调用一次父类构造函数
          2. 子类可以向父类传参
          3. 父类方法可以复用
          4. 父类的引用属性不会被共享
  */
  
  
  

  //简化一个demo Object.create来实现 寄生组合继承例子
  function SuperType(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
  }
  SuperType.prototype.sayName = function () {
    console.log(this.name);
  };
  function SubType(name, job) {
    // 继承属性
    SuperType.call(this, name);
    this.job = job;
  }
  // 继承 拷贝一份原型对象
  SubType.prototype = Object.create(SuperType.prototype);
  // 修复constructor
  SubType.prototype.constructor = SubType;
      // ES6 Object.setPrototypeOf(SubType.prototype, SuperType.prototype) 等同于 SubType.prototype.constructor = SubType;

7. ES6 class extends继承

ES6 语法糖结合寄生组合式继承一致

    class Parent {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        
        }
        
        say() {
            alert(this.name);
        
        }
        
        play() {
            console.log('basketball')
        }
    
    }
    
    class Son extends Parent {
    
        constructor(name, age, hobby){
            super(name, age);
            this.hobby = hobby;
        
        }
        
        shout() {
            alert('hi, friends!')
        }
        
        play() {
            super.play();
            
            console.log('~~~~~~~~~~i like pingpang ')
        
        }
    }
    
    const s = new Son('xiaoming', 20, 'football');
    
    s.say() //
    s.shout() //
    s.play(); // basketball ~~~~~~~~~~i like pingpang

TIP

最后欢迎大家留言交流