1. 程式人生 > >ES6之Class類知識點總結(十三)

ES6之Class類知識點總結(十三)

好的文章就要分享出來,讓更多的小夥伴看到、嗯、繼續推薦阮一峰大神的ES6文章,真的很棒,關於Class類的知識,想要了解的更清楚的建議到大神的官網走一走http://es6.ruanyifeng.com/#docs/class-extends

我們知道ES5及之前是沒有類的概念的,生成例項的方法是通過建構函式,ES6引入了類的概念,通過class關鍵字,可以定義類

   class Person{
       constructor(name,job){
           this.name = name;
           this.job = job;
       }
       sayJob(){
           console.log(`${this.name} is a ${this.job}`);
       }
   }
   var person = new Person("leo","boss");
   person.sayJob();//leo is a boss

嗯、分析一下上面的小例子

constructor方法就是構造方法,this關鍵字代表例項物件(此處就是person),該類中除了構造方法,還定義了一個sayJob方法。嗯、有兩個注意點:

  • 定義類的方法的時候,前面不需要加function關鍵字
  • 方法之間不需要用逗號分隔(加了反而會報錯)

使用類的時候,也是直接對類使用new命令,跟建構函式的用法完全一致。類的所有方法都是定義在類的prototype屬性上面,在類的例項上面呼叫方法,其實就是呼叫原型上的方法。

由於類的方法都是定義在prototype物件上面,所以類的新方法可以新增在prototype物件上面。Object.assign方法可以很方便地一次向類新增多個方法。

   class Person{
       constructor(name,job){
           this.name = name;
           this.job = job;
       }
       sayJob(){
           console.log(`${this.name} is a ${this.job}`);
       }
   }
   Object.assign(Person.prototype,{toLike(){console.log(`${this.name} like running`)},toDo(){return this.job;}});
   var person = new Person("leo","boss");
   person.sayJob();//leo is a teacher
   person.toLike();//leo like running
   console.log(person.toDo());//boss

還是針對上面的例子,看下面的程式碼

    console.log(typeof Person);//function
    console.log(Person === Person.prototype.constructor);//true

從結果中可以得出結論:類的資料型別就是函式,類本身就指向建構函式

注意:類的內部定義的所有方法,都是不可以列舉的,與ES5一樣,類的所有例項共享一個原型物件

類不存在變數提升

new fn(); // ReferenceError
class fn{}

fn類使用在前,定義在後面,會報錯,因為類不存在變數提升

this指向問題

類的方法內部,如果含有this,它預設指向類的例項,但是必須非常小心,一旦單獨使用該方法,很可能會報錯

解決辦法:

  • 在構造方法中繫結this
  • 使用箭頭函式(箭頭函式,函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件)
  • 使用Proxy,獲取方法的時候,自動繫結this。

Class繼承

class可以通過extends關鍵字實現繼承,子類通過extends關鍵字,可以繼承父類的所有方法和屬性,子類必須在constructor方法中呼叫super方法,它表示父類的建構函式,用來新建父類的this物件。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其加工,如果不呼叫super方法,子類就得不到this物件

注意:父類的靜態方法也會被子類繼承

   class Person{
       constructor(name,job){
           this.name = name;
           this.job = job;
           this.sayJob = this.sayJob.bind(this);
       }
       sayJob(){
           return `${this.name} is a ${this.job}`;
       }
   }
   class Son extends Person{
       constructor(name,job,city){
           super(name,job,city);
           this.city = city;
       }
       sayJob(){
           return console.log(super.sayJob()+ ` living in ${this.city}`);
       }

   }
   var son = new Son("leo","boss","beijing");
   son.sayJob();//leo is a boss living in beijing

注意:在子類的建構函式中,只有呼叫super之後,才可以使用this關鍵字,否則會報錯。這是因為子類例項的構建,是基於對父類例項加工,只有super方法才能返回父類例項

判斷一個類是否繼承了另一個類的方法:Object.getPrototypeOf()(該方法可以從子類上獲取父類)

  console.log(Object.getPrototypeOf(Son)===Person);//true