JavaScript Class อธิบายพร้อมตัวอย่างโค้ด

Video ใน YouTube อธิบายแนวคิดของ class และ object เป็นภาษาไทย

ที่มา : https://youtu.be/CC4mX2fOHtI

ตัวอย่างโค้ด

class Human {
  constructor() {
    this.gender = "M"
  }

  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    super()
    this.name = 'A'
  }

  printName() {
    console.log(this.name)
  }
}

const p = new Person()
p.printName()
p.printGender()

ผลลัพธ์

"A" 
"M"

อธิบายโค้ด

extends คือการสืบทอด สามารถใช้ตัวแปรหรือฟังก์ชันจากคลาสที่เราต้องการสืบทอด
ในตัวอย่างโค้ด คลาส Person สืบทอดมาจาก คลาส Human

ดังนั้น object ที่ถูกสร้างขึ้นด้วยคลาส Person จะสามารถเรียกใช้ตัวแปรหรือฟังก์ชันที่มาจากคลาส Human ได้ด้วย

const p = new Person() เป็นการสร้าง object ชื่อ p จากคลาสที่ชื่อ Person

และถ้าต้องการเปลี่ยนแปลงค่าบางอย่างก็สามารถทำได้เช่นกัน
ตัวอย่างเช่น ต้องการเปลี่ยน Gender จาก M เป็น F สามารถเขียนได้ดังนี้

//ในคลาส Person
...
  constructor() {
    super()
    this.name = 'A'
    this.gender = 'F'
  }
...

ใน JavaScript ES7 จะสามารถทำให้กระชับได้โดย
ไม่จำเป็นต้องใส่ constructor
ใส่ตัวแปร หรือ Property ได้เลย
ไม่จำเป็นต้องเรียกใช้ super()
เปลี่ยนให้เป็น Arrow Function

ทบทวน Arrow Function ใน JavaScript คืออะไร ใช้ยังไง

hambalee ・ Jun 21 '20

#javascript #es6 #thai

จะได้โค้ดที่สั้นขึ้นดังนี้

class Human {
  gender = "M" //ไม่ต้องใส่ this 

  printGender = () => {
    console.log(this.gender) //ยังมี this อยู่
  }
}

class Person extends Human {
  name = 'A'

  printName = () => {
    console.log(this.name)
  }
}

const p = new Person()
p.printName()
p.printGender()