ES6中class類的示例分析

這篇文章主要介紹了ES6中class類的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

class 類

通過class可以定義類，新的class寫法只是讓對象原型的寫法更加清晰，更像面向對象編程的語法而已。

• 1 class　　聲明類

• 2 constructor　　定義構造函數初始化

• 3 extends　　繼承父類

• 4 super　　調用父級構造方法

• 5 static　　定義靜態方法和屬性

• 6 父類方法可以重寫

es5通過 構造函數實例化 對象的方法

    // 人
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    // 這個height這種添加方式是屬于函數對象的，不屬于實例對象，這樣的屬性稱之為靜態成員
    People.height = '180';
    People.prototype.height1 = '100';
    // 添加方法
    People.prototype.play = function(){
      console.log('打籃球');
    }
    let zn = new People('zhangning', '男');
    zn.play();// 輸出 打籃球
    console.log(zn);
    console.log(zn.height);// 輸出 undefined 
    console.log(zn.height1);// 輸出 100，必須通過prototype添加才能添加到實例對象上

通過class實現

    class People{
      // 靜態屬性 static，對于static 標注的方法屬于類，不屬于實例對象
      static height = '100';
      static change(){
        console.log('我可以改變世界');
      }
      // 構造方法 名字不能更改（在使用new People的時候會自動執行實例對象上的constructor方法）       
      constructor(name, sex){
        this.name = name;
        this.sex = sex;
      }
      // 添加方法必須使用該語法，不能使用es5的完整形式（play: function(){} 這種形式不支持，必須使用play()形式）
      // 成員屬性
      play(){
        console.log('打籃球');
      }
    }
    let zn = new People('zhangning', '男');
    console.log(zn);
    console.log(zn.height);// undefined  static 標注的方法屬于類，不屬于實例對象
    console.log(People.height);// 100

使用es5構造函數實現繼承

    // 舉例 chinese 繼承 People 屬性
    function People(name, sex) {
      this.name = name;
      this.sex = sex;
    }
    People.prototype.play = function(){
      console.log('打LOL');
    }
    function Student(name, sex, like, height){
      // 通過call方法，改變this值，this指向chinese中的this，也就是chinese的一個實例對象
      People.call(this, name, sex);
      this.like = like;
      this.height = height;
    }
    // 設置子集構造函數原型
    Student.prototype = new People;// 這樣就會有父級的一個方法
    Student.prototype.constructor = Student;// 做一個校正，沒有這行代碼也無所謂
    // 聲明子類方法
    Student.prototype.photo = function(){
      console.log('去拍照');
    }
    // 實例化
    const zn = new Student('zhangning', '男', '打籃球', '187');
    console.log(zn)

使用es6 class 類 實現繼承 及 父類方法的重寫

    // 聲明父類
    class People{
      // 父類構造方法
      constructor(name, sex) {
        this.name = name;
        this.sex = sex;
      }
      // 父類成員屬性
      play(){
        console.log('打LOL');
      }
    }
    // 聲明子類 使用extends 繼承父類
    class Student extends People {
      // 構造方法
      constructor(name, sex, like, height){
        super(name, sex);// super 就是父類的constructor構造函數，這樣調用
        this.like = like;
        this.height = height;
      }
      photo(){
        console.log('去拍照');
      }
      // 對父類中的play方法進行重寫，子類是不能去調用父類的同名方法的，


      play(){
        // super(); 不允許，在普通的成員方法里面是不能出現super()去調用父類的同名方法的，會報錯，只能完全重寫
        console.log('我會打LOL，還會打籃球');
      }
    }
    const zn = new Student('zhangning', '男', '打籃球', '187');
    console.log(zn)

class 中 getter 和 setter 設置

    class People{
      get like(){
        return '打籃球';
      }
      set like(newVal){
        // 通過傳過來的newVal值，進行操作，改變 like
        console.log('改變like值');
      }
    }
    let p = new People();
    console.log(p.like)// 輸出 打籃球
    p.like = 'LOL';// 然后通過 set like 進行操作

感謝你能夠認真閱讀完這篇文章，希望小編分享的“ES6中class類的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!