Classes

คลาส (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>

 

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: