ES6學習筆記（二）：教你玩轉類的繼承和類的對象

繼承

程式中的繼承： 子類可以繼承父類的一些屬性和方法

class Father { //父類
  constructor () {
    }
    money () {
    console.log(100)
  }
}
class Son extends Father {  //子類繼承父類
}
let son = new Son()
son.money() // 100
son.

super關鍵字

super關鍵字用於訪問和調用對象父類上的函數，可以通過調用父類的構造函數，也可以調用父類的普通函數

class Father { //父類
  constructor (x, y) {
    this.x = x
    this.y = y
    }
    money () {
    console.log(100)
  }
  sum () {
    console.log(this.x + this.y)
  }
}
class Son extends Father {  //子類繼承父類
    constructor (x, y) {
        super(x, y) //調用了父類中的構造函數
  }
}
let son = new Son(1,2)
son.sum() // 3
son.

繼承的特點：

1. 繼承中，如果實例化子類輸出一個方法，先看子類有沒有這個方法，如果有就先執行子類，（就近原則）
2. 繼承中，如果子類裡面沒有，就去查找父類有沒有這個方法，如果有，就執行父類的這個方法
3. 在子類中，可以用super調用父類元素的方法

class Father {
    say() {
    return '我是父元素'
  }
  sing() {
    return '父元素唱一首歌'
  }
    
}
class Son extends Father {
    say() {
    console.log('我是子元素')
  }
  sing() {
    console.log(super.sing())
  }
}
var son = new Son()
son.say() //我是子元素
son.sing() //

子元素可以繼承父元素的方法的同時，子元素也可以擴展自己的其他方法，子類在構造函數中用super調用父類的構造方法時候，必須放在子類的this之前調用

class Father {
    constructor(x, y) {
    this.x = x
    this.y = y
  }
  sum() {
    console.log(this.x + this.y)
  }
}

class Son extends Father {
    constructor(x,y) {
     //利用super 調用父類的構造函數
    super(x,y)
    this.x = x
    this.y = y
  }
  subtract() {
    console.log(this.x - this.y)
  }
}
let son = new Son(5,3)
son.subtract() // 2
son.sum() //8

ES6中的類和對象的4個註意點：

1. 在ES6中類沒有變數提升，所以必須先定義類，才能通過類實例化對象
2. 類裡面的共有屬性和方法一定要加this使用
3. 類裡面的this指向問題

4. constructor裡面的this指向實例對象，方法裡面的this向這個方法的調用者
   

   總結

   這篇文章主要分享了，關於類的繼承、繼承需要的用到的extends,super、ES6中的類和對象的註意點等。
   如想瞭解更多，請掃描二維碼：