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中的類和對象的注意點等。
如想了解更多,請掃描二維碼:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章