คลาส (Class) คือพิมพ์เขียวในการสร้างวัตถุ (Objects) โดยภายในคลาสสามารถประกอบไปด้วยเมธอด (Method) และคุณสมบัติ (Properties) ซึ่งคลาส 1 คลาสสามารถสร้าง Object ได้อีกมากมาย
ในการสร้างคลาสใช้คีย์เวิร์ด class และใช้เมธอด constructor เป็นเมธอดเริ่มต้นของคลาส
- constructor คือเมธอดเริ่มต้นของคลาส มีชื่อที่แน่นอนคือ “constructor”
- ดำเนินการโดยอัตโนมัติเมื่อมีการสร้างวัตถุใหม่
- ใช้ในการเริ่มต้นคุณสมบัติของคลาส
ไวยากรณ์ของ class
class ClassName {
constructor() { ... }
}
การสร้างคลาส Fruits
class Fruits{
constructor(name,color){
this.name = name;
this.color = color;
}
}
การสร้างวัตถุชื่อ banana จากคลาส Fruits
banana = new Fruits("banana","yellow");
ตัวอย่างที่ 1 การสร้างและใช้งานคลาส พื้นฐาน
<html>
<body>
<h2>ผลไม้</h2>
<p id="showdata"></p>
<script>
class Fruits{
constructor(name,color,price){
this.name = name;
this.color = color;
this.price = price;
}
}
banana = new Fruits("banana","yellow",50);
document.getElementById("showdata").innerHTML = "ชื่อผลไม้ : " + banana.name + " " + "<br>สืผลไม้ : " + banana.color + "<br>ราคาขาย : " + banana.price;
</script>
</body>
</html>
ตัวอย่างที่ 2 สร้างเมธอดลดราคาขายผลไม้ชื่อ saleFruit() ต่อเนื่องจากตัวอย่างที่ 1
<html>
<body>
<h2>ผลไม้</h2>
<p id="showdata"></p>
<script>
class Fruits{
constructor(name,color,price){
this.name = name;
this.color = color;
this.price = price;
}
saleFruit(saleprice){
return this.price - saleprice ;
}
}
banana = new Fruits("banana","yellow",50);
document.getElementById("showdata").innerHTML = "ชื่อผลไม้ : " + banana.name + " " + "<br>สืผลไม้ : " + banana.color + "<br>ราคาขาย : " + banana.price + " บาท<br>ลดราคาเหลือเพียง : " + banana.saleFruit(20) + " บาท";
</script>
</body>
</html>