JS创建类与类的继承

//1.类里面函数不用加function，函数之间不用加逗号
  class Person1{
      constructor(uname,age){
          this.uname = uname;
          this.age = age;
      }
      sing(){
          console.log(this.uname+'我爱singing！');
      }
  }
  var hmy = new Person1('张学友',22);
  console.log(hmy);
  hmy.sing();

    //    2.类的继承
   class Parents{
    constructor(){

    }
    money(){
        console.log('100');
    }
   }

   class children extends Parents{

   }
   var son = new children();
   son.money();

//3super调用父类构造函数
class father{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2 = num2;
    }
    sum(){
        console.log(this.num1+this.num2)
    }
}
class Son extends father{
    constructor(num1,num2){
        super(num1,num2);
    }
}
var son = new Son(1,2);//变量son和类不能同名
son.sum();
console.log('---------------')

//4.使用super调用父类普通函数
//在继承当中它会采取就近原则，首先查找子类有无该函数，无则向上查找！
class father1{
    say(){
        return '胡绵源！'
        console.log('88')
    }
}
class Son1 extends father1{
    say(){
      
    console.log(super.say()+'666')
    super.say()
        
    }
    
}
var son1 = new Son1();

son1.say(); 

//5.子类继承父类，并且扩展方法
console.log('---------------------')
class father3{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    sum(){
        console.log('the sum is:'+(this.x+this.y))
    }
}
 class Son3 extends father3{
     constructor(x,y){
         super(x,y);//super必须要在子类的this之前使用
         this.x = x;
         this.y = y;
     }
     //扩展减法功能
     sub(){
        console.log('the sub is:'+(this.x - this.y));
        console.log(this)
     }
 }
 var son3 = new Son3(5,3); 
 son3.sub();
 son3.sum();
 var f3 = new father3(5,1)
 f3.sum();

-------------------------------------------------------------------------------------------------------------------------------------------

<!--
方式1: 原型链继承
  1. 套路
    1. 定义父类型构造函数
    2. 给父类型的原型添加方法
    3. 定义子类型的构造函数
    4. 创建父类型的对象赋值给子类型的原型
    5. 将子类型原型的构造属性设置为子类型
    6. 给子类型原型添加方法
    7. 创建子类型的对象: 可以调用父类型的方法
  2. 关键
    1. 子类型的原型为父类型的一个实例对象
-->
<script type="text/javascript">

  function Supper() { //父类型
    this.superProp = 'The super prop'
  }
  //原型的数据所有的实例对象都可见
  Supper.prototype.showSupperProp = function () {
    console.log(this.superProp)
  }

  function Sub() { //子类型
    this.subProp = 'The sub prop'
  }

  // 子类的原型为父类的实例
  Sub.prototype = new Supper()
  // 修正Sub.prototype.constructor为Sub本身
  Sub.prototype.constructor = Sub

  Sub.prototype.showSubProp = function () {
    console.log(this.subProp)
  }

  // 创建子类型的实例
  var sub = new Sub()
  // 调用父类型的方法
  sub.showSubProp()
  // 调用子类型的方法
  sub.showSupperProp()

<!--
方式2: 借用构造函数继承(假的)
1. 套路:
  1. 定义父类型构造函数
  2. 定义子类型构造函数
  3. 在子类型构造函数中调用父类型构造
2. 关键:
  1. 在子类型构造函数中用call()调用父类型构造函数
-->
<script type="text/javascript">

  function Person(name, age) {
    this.name = name
    this.age = age
  }

  function Student(name, age, price) {
    Person.call(this, name, age)   // this.Person(name, age)
    this.price = price
  }

  var s = new Student('Tom', 20, 12000)
  console.log(s.name, s.age, s.price)

<!--
方式3: 原型链+借用构造函数的组合继承
1. 利用原型链实现对父类型对象的方法继承
2. 利用call()借用父类型构建函数初始化相同属性
-->
<script type="text/javascript">

  function Person(name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }

  function Student(name, age, price) {
    Person.call(this, name, age) //得到父类型的属性
    this.price = price
  }
  Student.prototype = new Person()  //得到父类型的方法
  Student.prototype.constructor = Student//构造函数重新指回自己
  Student.prototype.setPrice = function (price) {
    this.price = price
  }

  var s = new Student('Tom', 12, 10000)
  s.setPrice(11000)
  s.setName('Bob')
  console.log(s)
  console.log(s.constructor)