JavaScript Class

ECMAScript 2015 หรือ ES6 ได้เพิ่มคลาสเข้าไปใน JavaScript

คลาสเป็นรูปแบบของวัตถุ JavaScript

คลาส JavaScript

สัญลักษณ์

ใช้คำสั่งเพื่อ class สร้างคลาส

เป็นที่สำคัญที่คุณจะต้องเพิ่ม constructor() วิธี:

สัญลักษณ์

class ClassName {
  constructor() { ... }
}

ตัวอย่าง

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

ตัวอย่างด้านบนสร้างคลาสชื่อ "Car"。

คลาสนี้มีคุณสมบัติเริ่มต้นสอง: "name" และ "year"。

JavaScript Classไม่ใช่วัตถุ

มันเป็นรูปแบบของวัตถุ JavaScriptรูปแบบ。

ใช้คลาส

ถ้าคุณมีคลาส คุณสามารถใช้คลาสนี้เพื่อสร้างวัตถุ:

ตัวอย่าง

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

ทดสอบด้วยตัวเอง

ตัวอย่างด้านบนใช้ คลาส Carสร้างแล้วสอง วัตถุ Car。

วิธีวางแบบตัวจะทำงานโดยอัตโนมัติเมื่อสร้างวัตถุใหม่

วิธีวางแบบตัว

วิธีวางแบบตัวเป็นวิธีพิเศษ:

  • มันต้องมีชื่อที่เหมือนกันที่ชื่อ "constructor"
  • ทำงานโดยอัตโนมัติเมื่อสร้างวัตถุใหม่
  • ใช้สำหรับกำหนดคุณสมบัติของวัตถุ
  • ถ้าไม่มีการกำหนดวิธีวางแบบตัวก่อนที่จะเริ่มการสร้างคลาส โจรสลัดจะเพิ่มวิธีวางแบบตัวว่างเปล่าเข้าไป

วิธีคลาส

การสร้างวิธีคลาส

สัญลักษณ์

เหมือนกับวิธีของวัตถุ

ใช้คำสั่งเพื่อ class สร้างคลาส

เป็นที่สำคัญที่คุณจะต้องเพิ่ม constructor() วิธี

หลังจากนั้น คุณสามารถเพิ่มเนื้อหาในหน่วยงานอื่นๆ มากๆ

สัญลักษณ์

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

สร้างวิธีคลาสชื่อ "age" ที่กลับมาให้วันที่อายุของรถ:

ตัวอย่าง

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

ทดสอบด้วยตัวเอง

คุณสามารถส่งค่าที่มีอยู่ในคำสั่งของหน่วยงานเช่นนี้:

ตัวอย่าง

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";

ทดสอบด้วยตัวเอง

การสนับสนุนเบราเซอร์

ตารางด้านล่างนี้บอกเล่าถึงเวอร์ชั่นเบราเซอร์ที่สนับสนุน JavaScript ชั้นเต็ม

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
มีนาคม 2016 กรกฎาคม 2015 มีนาคม 2016 ตุลาคม 2015 มีนาคม 2016

ในตอนท้ายของตัวอย่างนี้ คุณจะเรียนรู้เกี่ยวกับ JavaScript ชั้น