PHP大牛成长之路：类的继承（原生+ES6)

1、类的继承(子类不重写父类方法)

1.1、js原生类的继承

      //父类
      function Father(name, email, age) {
        this.name = name;
        this.email = email;
        this.age = age;
      }
      //父类添加公共/原型方法
      Father.prototype.getUser = function () {
        return `我是${this.name},今年${this.age}岁，邮箱是：${this.email}`;
      };
      function Son(name, email, age) {
        Father.call(this, name, email, age);
      }
      // 更新当前子类的原型对象,这样才能实现真正意义上继承
      Son.prototype = Object.create(Father.prototype);
      // 手工补上constructor
      Son.prototype.constructor = Son;
      // 实例化子类：
      const son = new Son("peter", "peter@php.cn", 18);
      // 使用子类访问getUser方法
      console.log(son.getUser());
      // 输出：我是peter,今年18岁，邮箱是：peter@php.cn

1.2、ES6类的继承

      //父类
      class Father {
        //构造方法
        constructor(name, email, age) {
          this.name = name;
          this.email = email;
          this.age = age;
        }
        // 原型方法
        getUser() {
          return `我是${this.name},今年${this.age}岁，邮箱是：${this.email}`;
        }
      }
      //子类
      class Son extends Father {}
      // 实例化子类：
      const son = new Son("peter", "peter@php.cn", 18);
      // 使用子类访问getUser方法
      console.log(son.getUser());
      // 输出：我是peter,今年18岁，邮箱是：peter@php.cn

2、类的继承(子类重写父类方法)

2.1、js原生类的继承

      //父类
      function Father(name, email, age) {
        this.name = name;
        this.email = email;
        this.age = age;
      }
      //父类添加公共/原型方法
      Father.prototype.getUser = function () {
        return `我是${this.name},今年${this.age}岁，邮箱是：${this.email}`;
      };
      //子类
      function Son(name, email, age, lecturer) {
        Father.call(this, name, email, age);
        this.lecturer = lecturer;
      }
      // 更新当前子类的原型对象,这样才能实现真正意义上继承
      Son.prototype = Object.create(Father.prototype);
      // 手工补上constructor
      Son.prototype.constructor = Son;
      // 子类中重写父类的原型方法
      Son.prototype.getUser = function () {
        // return `我是${this.name},今年${this.age}岁，邮箱是：${this.email},职业: ${this.lecturer}`;
        // .concat()连接多个字符串
        return Father.prototype.getUser
          .call(this)
          .concat(`,职业: ${this.lecturer}`);
      };
      // 实例化子类：
      const son = new Son("peter", "peter@php.cn", 18, "讲师");
      // 使用子类访问getUser方法
      console.log(son.getUser());
      // 输出：我是peter,今年18岁，邮箱是：peter@php.cn,职业: 讲师

2.2、ES6类的继承

      //父类
      class Father {
        //构造方法
        constructor(name, email, age) {
          this.name = name;
          this.email = email;
          this.age = age;
        }
        // 原型方法
        getUser() {
          return `我是${this.name},今年${this.age}岁，邮箱是：${this.email}`;
        }
      }
      //子类
      class Son extends Father {
        constructor(name, email, age, lecturer) {
          // 调用父类的构造方法
          // super()必须是第一条,否则不能正确的生成子类的this
          super(name, email, age);
          this.lecturer = lecturer;
        }
        // 子类中重写父类的原型方法
        getUser() {
          // return `我是${this.name},今年${this.age}岁，邮箱是：${this.email},职业: ${this.lecturer}`;
          // .concat()连接多个字符串
          return super.getUser().concat(`,职业: ${this.lecturer}`);
        }
      }
      // 实例化子类：
      const son = new Son("peter", "peter@php.cn", 18,"讲师");
      // 使用子类访问getUser方法
      console.log(son.getUser());
      // 输出：我是peter,今年18岁，邮箱是：peter@php.cn,职业: 讲师

总结：

• 个人理解：类的继承不论是原生还是ES6写法，都是通过prototype属性将this指针指向父类的原型方法,也就是调用方法时当本类找不到会逐级向上查找，也就是所谓的原型链(不知道理解是否正确？)