คลาส JavaScript
ECMAScript 2015 หรือที่เรียกว่า ES6 ได้แนะนำคลาส JavaScript
คลาส JavaScript เป็นเทมเพลตสำหรับออบเจกต์ JavaScript
JavaScript Class Syntax
ใช้คีย์เวิร์ดclass
เพื่อสร้างคลาส
เพิ่มเมธอดชื่อconstructor()
:
ไวยากรณ์
class ClassName {
constructor() { ... }
}
ตัวอย่าง
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
ตัวอย่างข้างต้นสร้างคลาสชื่อ "รถยนต์"
คลาสมีคุณสมบัติเริ่มต้นสองประการ: "ชื่อ" และ "ปี"
คลาส JavaScript ไม่ใช่วัตถุ
เป็นเทมเพลตสำหรับวัตถุ JavaScript
การใช้คลาส
เมื่อคุณมีคลาส คุณสามารถใช้คลาสเพื่อสร้างออบเจกต์:
ตัวอย่าง
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
ตัวอย่างข้างต้นใช้คลาส Carเพื่อสร้าง อ อบเจ็กต์ Car สอง รายการ
เมธอด Constructor จะถูกเรียกโดยอัตโนมัติเมื่อมีการสร้างอ็อบเจกต์ใหม่
วิธีการสร้าง
วิธี Constructor เป็นวิธีพิเศษ:
- ต้องมีชื่อตรงว่า "Constructor"
- มันถูกดำเนินการโดยอัตโนมัติเมื่อมีการสร้างวัตถุใหม่
- ใช้เพื่อเริ่มต้นคุณสมบัติของอ็อบเจ็กต์
หากคุณไม่ได้กำหนดวิธีการสร้าง JavaScript จะเพิ่มวิธีการสร้างที่ว่างเปล่า
วิธีการเรียน
เมธอดของคลาสถูกสร้างขึ้นด้วยไวยากรณ์เดียวกันกับเมธอดของอ็อบเจ็กต์
ใช้คีย์เวิร์ดclass
เพื่อสร้างคลาส
เพิ่มconstructor()
วิธีการเสมอ
จากนั้นเพิ่มวิธีการต่างๆ
ไวยากรณ์
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
สร้างเมธอด Class ชื่อ "age" ซึ่งจะคืนค่า Car 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.";
รองรับเบราว์เซอร์
ตารางต่อไปนี้กำหนดเบราว์เซอร์รุ่นแรกที่รองรับ Classes ใน JavaScript อย่างเต็มรูปแบบ:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
"ใช้อย่างเข้มงวด"
ไวยากรณ์ในคลาสต้องเขียนใน "โหมดเข้มงวด"
คุณจะได้รับข้อผิดพลาดหากคุณไม่ปฏิบัติตามกฎ "โหมดเข้มงวด"
ตัวอย่าง
ใน "โหมดเข้มงวด" คุณจะได้รับข้อผิดพลาดหากคุณใช้ตัวแปรโดยไม่ประกาศ:
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() - this.year;
}
}
เรียนรู้เพิ่มเติมเกี่ยวกับ "โหมด เข้มงวด" ใน: JS Strict Mode