ES6(9) Class，继承

一，使用class创建对象

• class是关键字，后面紧跟类名，类名首字母大写，采取的是大驼峰命名法则。类名之后是{}。
• 在{}中，不能直接写语句，只能写方法，方法不需要使用关键字
• 方法和方法之间没有逗号。不是键值对。

ES5中的构造器与原型

<script>
    function NBAPlayer(name, age, height) {
        // 把属性扔到构造器中,实例属性
        this.name = name;
        this.age = age;
        this.height = height;
    }
    // 把方法扔到原型上面，公有属性
    NBAPlayer.prototype.say = function () {
        console.log(`我是${this.name},今年${this.age},我的身高是${this.height}`)
        // 我是wangcai,今年30,我的身高是188
    }
    NBAPlayer.prototype.jump = function () {
        console.log("jump...")  //jump...
    }
    let p = new NBAPlayer("wangcai", 30, 188)
    p.say()
    p.jump()
</script>

上面的代码不像主流的面向对象的写法，下面用Class来改写：

<script>
    class NBAPlayer{   // 这种写法还是ES5中的构造器与原型的语法糖
        // 构造方法  当对象创建后会自动调用
        constructor(name, age, height){
            this.name = name
            this.age = age
            this.height = height
        }
        say(){
            console.log(`我是${this.name},今年${this.age},我的身高是${this.height}`)
            // 我是wangcai,今年30,我的身高是188
        }
        jump(){
            console.log("jump...")   //jump...
        }
    }
    let p = new NBAPlayer("wangcai", 30, 188);
    p.say()
    p.jump()
</script>

二，使用extends实现继承

• 使用extends关键字来实现继承
• constructor 是一种用于创建和初始化class创建的对象的特殊方法
• 在子类中的构造器constructor中，必须显式调用父类的super方法，如果不调用，则this不可用.
• 在一个类中只能有一个名为 “constructor” 的特殊方法。 如果一个类中出现多次构造函数 ，(constructor)方法将会抛出一个 SyntaxError 错误。
• 如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

ES5

<script>
    function NBAPlayer(name, age, height) {
        //属性在构造器内*(实例属性)
        this.name=name;
        this.age=age;
        this.height=height;
    }
    //方法(公有属性)
    NBAPlayer.prototype.say = function () {
        console.log(`我是${this.name},今年${this.age},我的身高是${this.height}`)
        // 我是CURRY,今年32,我的身高是191
    }
    NBAPlayer.prototype.jump = function () {
        console.log(...jump)
    }
    //继承实例属性
    function MVP(name, age, height, year) {
        NBAPlayer.call(this, name, age, height)
        this.year = year;
    }


    //继承方法一（浅拷贝）
    MVP.prototype = NBAPlayer.prototype;
    MVP.prototype.constructor = MVP

    //继承方法二
    for (let i in NBAPlayer.prototype) {
        MVP.prototype = NBAPlayer.prototype;
    }
    MVP.prototype.constructor = MVP
    //子类的自身方法
    MVP.prototype.showMVP = function(){
        console.log(`我是${this.name},我是${this.year}年的MVP`)
        // 我是CURRY,我是2013年的MVP
    }
var a=new MVP("CURRY",32,191,2013)
a.say()
a.showMVP()
</script>

ES6

<script>
  class NBAPlayer {
    constructor(name, age, height) {
      this.name = name;
      this.age = age;
      this.height = height;
    }
    say() {
      console.log(`我是${this.name},今年${this.age},我的身高是${this.height}`);
    //   我是longer,今年99,我的身高是120   我是chener,今年30,我的身高是181
    }
    jump() {
      console.log("...jump");   //...jump   ...jump
    }
  }
  var p = new NBAPlayer("longer", 99, 120);
  p.jump();
  p.say();
  class MVP extends NBAPlayer {
    constructor(name, age, height, year) {
      super(name, age, height);
      this.year = year;
    }
    showMVP() {
      console.log(`我是${this.name},我是${this.year}的MVP`);
    //   我是chener,我是2001的MVP
    }
  }
  let mvp = new MVP("chener", 30, 181, 2001);
  mvp.showMVP();
  mvp.say();
  mvp.jump();
</script>

三，类的静态方法 static
静态方法和静态属性 只能类来调用 实例不能调用
直接通过类名来访问的方法就是静态方法。如：Math.abs();这里的abs()是静态方法。
Array.isArray();isArray()是静态方法.
静态方法和属性只能用类来调用，不能用实例调用（new出来的）

<script>
    class Animal {
        constructor(name) {
            this.name = name;
        }
        say() {
            console.log("say...")  //say...
        }
    }
    class Dog extends Animal {
    }
    let d = new Dog("wangcai1")   //wangcai1
    d.say();
    console.log(d.name)
</script>

<script>
    class Animal {
        constructor(name) {
            this.name = name;
        }
        say() {
            console.log("say...")  //say...
        }
    }
    class Dog extends Animal {
    }
    let d = new Dog()
    d.say();
</script>