บทช่วย สอนตอบโต้

หน้าแรก แนะนำตัว ตอบสนอง เริ่มต้น ตอบสนอง ES6 React Render HTML ตอบโต้ JSX ส่วนประกอบปฏิกิริยา คลาสตอบโต้ ตอบสนองอุปกรณ์ประกอบฉาก ปฏิกิริยาเหตุการณ์ เงื่อนไขการตอบสนอง รายการตอบโต้ แบบฟอร์มตอบโต้ ตอบสนองเราเตอร์ บันทึกโต้ตอบ ตอบสนอง CSS จัดแต่งทรงผม ตอบสนอง Sass จัดแต่งทรงผม

ตะขอตอบสนอง

ตะขอคืออะไร? ใช้สถานะ ใช้เอฟเฟกต์ ใช้บริบท ใช้Ref ใช้ลด ใช้โทรกลับ ใช้บันทึก ตะขอแบบกำหนดเอง

แบบฝึกหัดตอบโต้

ตอบคำถาม แบบฝึกหัดตอบโต้ ใบรับรองปฏิกิริยา

ตอบสนองคลาส ES6


ชั้นเรียน

ES6 แนะนำคลาส

คลาสเป็นประเภทของฟังก์ชัน แต่แทนที่จะใช้คีย์เวิร์ด functionเพื่อเริ่มต้น เราใช้คีย์เวิร์ด classและคุณสมบัติถูกกำหนดไว้ใน constructor()เมธอด

ตัวอย่าง

ตัวสร้างคลาสอย่างง่าย:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

สังเกตกรณีของชื่อชั้น เราเริ่มชื่อ "รถ" ด้วยอักษรตัวพิมพ์ใหญ่ นี่เป็นแบบแผนการตั้งชื่อมาตรฐานสำหรับคลาส

ตอนนี้คุณสามารถสร้างวัตถุโดยใช้คลาสรถ:

ตัวอย่าง

สร้างวัตถุที่เรียกว่า "mycar" ตามคลาสรถ:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

หมายเหตุ:ฟังก์ชันคอนสตรัคเตอร์ถูกเรียกโดยอัตโนมัติเมื่ออ็อบเจกต์ถูกเตรียมใช้งาน


w3schools CERTIFIED . 2022

ได้รับการรับรอง!

ทำโมดูล React ทำแบบฝึกหัด ทำข้อสอบ และได้รับการรับรองจาก w3schools!!

$95 ลงทะเบียน

วิธีการในชั้นเรียน

คุณสามารถเพิ่มวิธีการของคุณเองในชั้นเรียน:

ตัวอย่าง

สร้างวิธีการชื่อ "ปัจจุบัน":

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

ดังที่คุณเห็นในตัวอย่างข้างต้น คุณเรียกเมธอดโดยอ้างถึงชื่อเมธอดของอ็อบเจ็กต์ตามด้วยวงเล็บ (พารามิเตอร์จะอยู่ภายในวงเล็บ)


การสืบทอดคลาส

หากต้องการสร้างการสืบทอดคลาส ให้ใช้extends คีย์เวิร์ด

คลาสที่สร้างด้วยการสืบทอดคลาสจะสืบทอดวิธีการทั้งหมดจากคลาสอื่น:

ตัวอย่าง

สร้างคลาสชื่อ "รุ่น" ซึ่งจะสืบทอดเมธอดจากคลาส "รถยนต์":

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

วิธี การsuper()นี้อ้างถึงคลาสพาเรนต์

การเรียกsuper()เมธอดในเมธอด Constructor เราเรียกเมธอด Constructor ของพาเรนต์ และเข้าถึงคุณสมบัติและเมธอดของพาเรนต์

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคลาส โปรดดูส่วนคลาส JavaScript ของเรา