ES6--class基本使用

類定義

　　ES6完整學習阮老師的ECMAScript6入門。

　　技術通常水平有限，有什麼錯的地方，望你們指正。

　　之前咱們使用ES5標準定義一個構造函數的過程以下：

  function Person(name,age){
      this.name = name;
      this.age = age;
  }
  Person.prototype.say = function(){
      console.log("你好，我是"+this.name)
  }
  Person.prototype.show = function(){
      console.log("年齡"+this.age+"一名小學生！");
  }

　　一般首字母大寫的函數咱們稱爲構造函數(並非一種語法約束，只是一種約定俗成的規律)，屬性寫在方法裏面，函數寫在原型上面，這樣實例化(new操做)出來的對象既有屬性也有方法。

　　ES6爲了更明朗構造函數這個概念了多了一個class語法，它會幫咱們完成上面的一系列操做，咱們能夠把它看作是構造函數的變身，一般咱們稱爲類。JS中的類同函數同樣也有兩種聲明方式：

　　類聲明：

  class Person{
  }

　　類表達式：

var Person = class {
}

　　如今咱們利用類來對開始的構造函數進行變形：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("你好，我是"+this.name);
      }
      show(){
          console.log("年齡"+this.age+"一名小學生！");
      }
  }

　　咱們實例化一個Person的對象，是能夠正常使用的：

  var me = new Person("zt",23);
  me.say();
  me.show();

　　原來的構造函數如今變成了一個類，constructor就是構造函數對參數進行初始化的變形，say和show就是構造函數原型上面的函數。

　　類就是對有一樣特徵的事物的一個統稱，在JS的類裏面只能包括函數，不能包含別的，若是咱們須要給類添加一個屬性只能經過get/set存取器方法來實現：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      get message()
      {
          return "name:"+this.name+",age:"+this.age
      }
  }
  var me = new Person("zt",23);
  console.log(me.message);

　　constructor函數在類裏面最多隻能有一個，它的主要職能就是初始化屬性，在執行new操做時先經由constructor函數將參數設置爲對象的屬性，若是不須要存在初始化屬性那麼constructor能夠省略。

函數修飾

　　類裏面定義的函數能夠被修飾符修飾最多見的就是static。

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("由類調用");
      }
  }
  Person.say();

　　一旦一個函數被static修飾，那麼這個函數就屬於類了，能夠直接由類名來調用Person.say()。而普通函數是不能直接由類進行調用的，普通函數只能由實例化的對象來調用，被static修飾的函數是不能被實例化的對象調用的只能經過類直接來進行調用，這種函數等價於咱們之前直接利用Person.fn = function(){}定義工具函數同樣。

類繼承

　　一個類能夠繼承一個類，被繼承的類咱們通常稱爲父類，另外一個稱爲子類，經過extends來實現：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      static say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
  }

　　新建立的Student類是子類，Person類是父類，子類會擁有父類裏面的全部函數(constructor和其餘函數)，子類繼承來的函數都是能夠直接使用的：

  var stu = new Student("zt",23)
  stu.say();

　　子類裏面沒有聲明任何函數，仍然能夠調用say，say就是經過繼承得來的。

　　子類能夠定義本身的特有的函數，若是和父類函數同名那麼就父類的函數就不會生效而是使用子類自身的函數（就是ES5原型鏈查找的套路）：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是"+this.name);
      }
  }
  class Student extends Person{
      say(){
          console.log("我是子類的say函數！")
      }
      fn(){
          console.log("我是子類函數fn")
      }
  }
  var stu = new Student("asaszt",23)
  stu.say();//我是子類的say函數！
  stu.fn();//我是子類函數fn

在子類中使用super

　　子類會繼承父類的constructor函數來初始化自身的屬性，一樣也能夠添加自身特有的屬性，可是必須使用super來完成這個操做：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
  }
  var stu = new Student("zt",23,"男")
  console.log(stu.sex);//男

　　在子類中使用constructor來初始化屬性，首先使用super來對可繼承的屬性進行初始化，而後在經過this添加自身特有的屬性，this只有在調用super()以後纔會存在。

　　super一樣能夠調用父類的非靜態函數（此時咱們能夠把super看作是一個父類實例化出來的一個對象）：

  class Person{
      constructor(name,age){
          this.name = name;
          this.age = age;
      }
      say(){
          console.log("我是父類的say函數");
      }
  }
  class Student extends Person{
      constructor(name,age,sex){
          super(name,age);
          this.sex = sex;
      }
      say(){
          super.say();
          console.log("我是子類的say函數");
      }

  }
  var stu = new Student("zt",23)
  stu.say();//我是父類的say函數 我是子類的say函數