คลาสและออบเจ็ค ในภาษา JavaScript

ในบทนี้ เป็นเนื้อหาเกี่ยวกับคลาสในภาษา JavaScript คลาสนั้นเป็นคุณสมบัติใหม่ที่ถูกเพิ่มเข้ามาใน ECMAScript 2015 (ES6) คุณจะได้เรียนรู้วิธีการประกาศและใช้งานคลาสเพื่อนำมาสร้างออบเจ็คในการเขียนโปรแกรม นี่เป็นเนื้อหาในบทนี้

• คลาสคืออะไร
• การประกาศคลาส
• การสร้างออบเจ็ค
• คอนสตรัคเตอร์
• คำสั่ง this ภายในคลาส

คลาสคืออะไร

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

อย่างที่คุณได้เรียนรู้ไปแล้วในบทประเภทข้อมูล ข้อมูลทุกประเภทในภาษา JavaScript นั้นเป็นออบเจ็คที่สร้างมาจากคลาส เช่น ตัวเลขเป็นออบเจ็คจากคลาส Number หรือข้อความเป็นออบเจ็คของคลาส String ซึ่งคลาสเหล่านี้เป็นคลาสที่มากับภาษา JavaScript และในบทนี้เราจะมาสร้างคลาสของเราเอง

การสร้างคลาสเป็นสิ่งที่สำคัญในการเขียนโปรแกรมเชิงวัตถุ (OOP) เนื่องจากมันสามารถนำไปสร้างออบเจ็คเป็นจำนวนมากได้ ซึ่งนี่เป็นแนวคิดของการนำโค้ดกลับมาใช้ใหม่

การประกาศและใช้งานคลาส

ในการใช้งานคลาสเราจำเป็นต้องประกาศมันขึ้นมาก่อน นี่เป็นรูปแบบของการประกาศคลาสในภาษา JavaScript

class NameOfClass {
    // Property and method definitions
}

ในการประกาศคลาสจะใช้คำสั่ง class ตามด้วยชื่อของคลาส NameOfClass การกำหนดชื่อคลาสนั้นมักจะขึ้นต้นด้วยตัวพิมพ์ใหญ่ในรูปแบบของ PascalCase ในวงเล็บ {...} เป็นการกำหนดสมาชิกของคลาส โดยทั่วไปแล้วคลาสจะมีสมาชิกสองประเภทดังนี้

• Property: เป็นตัวแปรที่ใช้เก็บข้อมูลของออบเจ็ค มันเป็นสิ่งที่ใช้อธิบายคุณสมบัติของออบเจ็ค
• เมธอด: เป็นการสร้างฟังก์ชันภายในคลาสเพื่อทำงานหรือจัดการกับ Property ของออบเจ็คนั้นๆ

ต่อไปมาดูตัวอย่างการสร้างคลาสในภาษา JavaScript มันเป็นคลาสที่มีสอง Property และสองเมธอดสำหรับเก็บข้อมูลเกี่ยวกับบุคคล

class Person {

    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }  
}

ในตัวอย่าง เราได้สร้างคลาสที่มีชื่อว่า Person คลาสนี้มีสองเมธอดคือ constructor และเมธอด getFullName สำหรับรับเอาชื่อในรูปแบบเต็ม

constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

constructor นั้นเป็นเมธอดพิเศษที่จะถูกเรียกใช้งานเมื่ออบเจ็คถูกสร้าง โดยทั่วไปแล้วคอนสตรัคเตอร์มักใช้สำหรับกำหนดค่าเริ่มต้นให้กับออบเจ็ค ในกรณีนี้เป็นการกำหนดสอง Property firstName และ lastName สำหรับเก็บชื่อและนามสกุล และการอ้างถึงค่าของ Property และเมธอดภายในคลาสจะต้องทำผ่านออบเจ็ค this เสมอ

getFullName() {
    return this.firstName + " " + this.lastName;
}

เมธอดที่สอง getFullName นั้นเป็นเมธอดที่ใช้สำหรับรับเอาชื่อเต็มโดยเชื่อมต่อชื่อและนามสกุลเข้าด้วยกัน ในความเป็นจริงแล้วเมธอดก็คือฟังก์ชันในภาษา JavaScript แต่เมื่อมันถูกประกาศภายในคลาสเราเรียกมันว่าเมธอด และไม่ต้องใช้คำสั่ง function ในการประกาศ

การสร้างออบเจ็ค

ในตัวอย่างก่อนหน้าเราได้สร้างคลาส Person สำหรับเก็บข้อมูลของบุคคล ในการนำคลาสไปใช้งาน เราจะต้องนำมันไปสร้างออบเจ็ค ในตัวอย่างนี้เราจะนำคลาส Person ที่สร้างไปแล้วก่อนหน้ามาสร้างออบเจ็ค นี่เป็นตัวอย่าง

class Person {

    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName() {
        return this.firstName + " " + this.lastName;
    }  
}

let p1 = new Person("Matteo", "Marcus");
let p2 = new Person("Brett", "Burden");

console.log("Name:", p1.firstName);
console.log("Full name:", p1.getFullName());

console.log("Name:", p2.firstName);
console.log("Full name:", p2.getFullName());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Name: Matteo
Full name: Matteo Marcus
Name: Brett
Full name: Brett Burden

ในตัวอย่างเป็นการนำคลาส Person มาสร้างเป็นออบเจ็คเพื่อใช้งาน

let p1 = new Person("Matteo", "Marcus");
let p2 = new Person("Brett", "Burden");

ในการสร้างออบเจ็คจากคลาสจะใช้คำสั่ง new ตามด้วยชื่อของคลาส Person ตามด้วยสองพารามิเตอร์คือชื่อและนามสกุล นี่เป็นค่าที่จะถูกส่งเข้าไปยัง constructor ของคลาส

ในตอนนี้ออบเจ็ค p1 และ p2 เป็นออบเจ็คที่สร้างจากคลาส Person นั่นหมายความโครงสร้างภายในของมันเหมือนกันคือมี Property firstName และ lastName และเมธอด getFullName ที่เราสามารถเข้าถึงและใช้งานได้

console.log("Name:", p1.firstName);
console.log("Full name:", p1.getFullName());

console.log("Name:", p2.firstName);
console.log("Full name:", p2.getFullName());

เราสามารถเข้าถึง Property หรือเรียกใช้งานเมธอดของออบเจ็คได้โดยการใช้เครื่องหมายจุด (.) ตามด้วยชื่อ Property หรือเมธอดที่ต้องการ จะเห็นว่าออบเจ็คแต่ละออบเจ็คจะมีข้อมูลแยกออกจากกัน เมื่อเราเรียกใช้งานเมธอด getFullName บนออบเจ็คค่าที่ได้จะเป็นค่าของ Property จากแต่ละออบเจ็ค

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

ในตัวอย่างถัดมาจะเป็นการสร้างคลาสสำหรับรูปสี่เหลี่ยมที่เก็บข้อมูลความยาวและความสูงของรูปสี่เหลี่ยม และมีสองเมธอดสำหรับหาพื้นที่และวาดรูปสี่เหลี่ยมออกทางหน้าจอ นี่โค้ดของโปรแกรม

class Rectangle {

    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }

    draw() {
        for (let i = 0; i < this.height; i++) {
            console.log("#".repeat(this.width));
        }
    }
}

let rect1 = new Rectangle(3, 3);
let rect2 = new Rectangle(5, 4);

console.log("Area of rect1:", rect1.getArea());
rect1.draw();

console.log("Area of rect2:", rect2.getArea());
rect2.draw();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Area of rect1: 9
###
###
###
Area of rect2: 20
#####
#####
#####
#####

ในตัวอย่างนี้ เราได้สร้างคลาส Rectangle ซึ่งเป็นคลาสของรูปสี่เหลี่ยม คลาสนี้มีสอง Property คือ width และ height สำหรับเก็บความยาวและความสูงของรูปสี่เหลี่ยมตามลำดับ และมีสองเมธอด เมธอด getArea สำหรับรับเอาพื้นที่ของรูปสี่เหลี่ยม และเมธอด draw สำหรับวาดรูปสี่เหลี่ยม

let rect1 = new Rectangle(3, 3);
let rect2 = new Rectangle(5, 4);

จากนั้นเราได้สร้างสองออบเจ็คจากคลาส Rectangle และเรียกใช้งานเมธอดเพื่อแสดงพื้นที่และวาดรูปสี่เหลี่ยมออกทางหน้าจอ

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

คอนสตรัคเตอร์

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

class Circle {

    constructor(r) {
        this.radius = r;
        console.log("Circle with radius of %d was created", r);
    }

    getArea() {
        return Math.PI * this.radius * this.radius;
    }

    getCircumference() {
        return 2 * Math.PI * this.radius;
    }

    getColor() {
        return this.color;
    }
}

let circle = new Circle(5);

console.log("Area:", circle.getArea());
console.log("Circumference:", circle.getCircumference());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Circle with radius of 5 was created
Area: 78.53981633974483
Circumference: 31.41592653589793

ในตัวอย่าง เราได้สร้างคลาส Circle ซึ่งเป็นคลาสของวงกลม และคลาสนี้มีคอนสตรัคเตอร์สำหรับกำหนดรัศมีของวงกลม และแสดงข้อความว่าวงกลมถูกสร้างในตอนที่เราสร้างออบเจ็ค และนี่เป็นหน้าที่หลักๆ ของการใช้งานคอนสตรัคเตอร์

อย่างไรก็ตาม เมื่อเราสร้างคลาสมันอาจมีหรือไม่มีคอนสตรัคเตอร์ก็ได้ ถ้าหากเราไม่ได้กำหนดคอนสตรัคเตอร์ให้กับคลาส ภาษา JavaScript จะสร้างคอนสตรัคเตอร์ที่ว่างเปล่าให้อัติโนมัติในตอนที่โปรแกรมทำงาน นี่เป็นตัวอย่างการของคลาสที่ไม่มีคอนสตรัคเตอร์

class Song {

    setData(name, artist, year) {
        this.name = name;
        this.artist = artist;
        this.year = year;
    }

    play() {
        console.log("%s is playing...", this.name);
    }

    stop() {
        console.log("%s has stopped", this.name);
    }

    info() {
        console.log("%s by %s (%d)",
            this.name, this.artist, this.year);
    }
}

let song1 = new Song();
song1.setData("Eve", "Gai Barone", 2014);

let song2 = new Song();
song2.name = "Antimatter";
song2.artist = "Activa";
song2.year = "2014";

song1.info();
song1.play();
song1.stop();

song2.info();
song2.play();
song2.stop();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Eve by Gai Barone (2014)
Eve is playing...
Eve has stopped
Antimatter by Activa (2014)
Antimatter is playing...
Antimatter has stopped

ในตัวอย่าง เราได้ประกาศคลาส Song ในคลาสนี้เราไม่ได้ประกาศคอนสตรัคเตอร์เนื่องจากเราไม่ต้องการใช้มัน โดยทั่วไปแล้วคอนสตรัคเตอร์มักใช้กำหนดค่าเริ่มต้นให้กับออบเจ็ค แต่ในกรณีนี้เราต้องการกำหนดค่าให้กับออบเจ็คด้วยเมธอดที่สร้างขึ้นมาแทน

let song1 = new Song();
song1.setData("Eve", "Gai Barone", 2014);

จากนั้นเป็นการนำคลาส Song มาสร้างออบเจ็คของเพลง และเนื่องจากคลาสของเราไม่มีคอนสตรัคเตอร์ดังนั้นในตอนสร้างออบเจ็ค จึงไม่มีการส่งค่าพารามิเตอร์ไปยังคอนสตรัคเตอร์ แต่ในการกำหนด Property ให้กับออบเจ็คเราใช้เมธอด setData แทน

setData(name, artist, year) {
    this.name = name;
    this.artist = artist;
    this.year = year;
}

เมธอด setData ทำหน้าที่เป็นเหมือนคอนสตรัคเตอร์สำหรับกำหนดให้กับออบเจ็ค แต่ในกรณีนี้เรากำหนดค่าให้กับออบเจ็คหลังจากที่มันถูกสร้างไปแล้ว

let song2 = new Song();
song2.name = "Antimatter";
song2.artist = "Activa";
song2.year = "2014";

จากนั้นเราได้สร้างอีกออบเจ็คในออบเจ็คนี้ เรากำหนดค่า Property จากตัวแปรออบเจ็คโดยตรง โดยไม่ได้ใช้เมธอด setData เหมือนกับออบเจ็คก่อนหน้า นี่เป็นสิ่งที่สามารถทำได้ในภาษา JavaScript เราสามารถเข้าถึง Property ของออบเจ็คสำหรับการอ่านและเขียนข้อมูลได้เหมือนกับการเข้าถึงเมธอด แค่คิดเหมือนกับว่ามันเป็นตัวแปรที่อยู่ภายในออบเจ็ค

เมื่อไรก็ตามที่เราไม่ได้กำหนดคอนสตรัคเตอร์ให้กับคลาส ภาษา JavaScript จะสร้างมันให้อัติโนมัติในตอนที่โปรแกรมคอมไพล์ และนี่เป็นคอนสตรัคเตอร์ที่ภาษา JavaScript สร้างให้เราในเบื้องหลัง ซึ่งเราไม่สามารถมองเห็นได้

constructor() {
}

มันเป็นคอนสตรัคเตอร์ที่ว่างเปล่าไม่มีคำสั่งสำหรับทำงาน และไม่มีการรับค่าพารามิเตอร์ใดๆ ดังนั้นในตอนสร้างออบเจ็ค นั่นเป็นเหตุผลว่าทำไมเราสร้างออบเจ็คด้วยการใช้คอนสตรัคเตอร์แบบไม่มีอาร์กิวเมนต์ได้ เช่นในคำสั่ง

let song1 = new Song();

คำสั่ง this ภายในคลาส

คำสั่ง this นั้นเป็นออบเจ็คที่อ้างถึงออบเจ็คปัจจุบันที่คลาสกำลังทำงานอยู่ที่เรียกว่า Context มันเป็นคำสั่งที่ใช้ภายในคลาส ในการเข้าถึงค่า Property หรือเรียกใช้งานเมธอดภายในคลาสเดียวกัน เราจะต้องเรียกผ่านออบเจ็ค this เสมอ นี่เป็นตัวอย่างที่ง่ายที่สุดที่อธิบายว่า this ทำงานอย่างไรในภาษา JavaScript

class Sum {

    constructor(a, b) {
        this.a = a;
        this.b = b;
    }

    getResult() {
        return this.a + this.b;
    }
}

let s1 = new Sum(2, 3);
console.log("2 + 3 = %d", s1.getResult());

let s2 = new Sum(10, 20);
console.log("10 + 20 = %d", s2.getResult());

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

2 + 3 = 5
10 + 20 = 30

เราได้สร้างคลาส Sum คลาสนี้เป็นคลาสสำหรับหาผมรวมของตัวเลขสองตัวจาก Property ของมัน

constructor(a, b) {
    this.a = a;
    this.b = b;
}

ในคลาสมีคอนสตรัคเตอร์สำหรับกำหนดค่าเริ่มให้กับออบเจ็คเพื่อกำหนด Property ให้กับออบเจ็ค เราใส่คำสั่ง this ก่อนชื่อของ Property ที่ต้องการเข้าถึง ในกรณีนี้ this.a นั้นเป็น Property ของคลาสในขณะที่ a เพียงอย่างเดียวนั้นเป็นพารามิเตอร์หรือตัวแปรของเมธอด

getResult() {
    return this.a + this.b;
}

เมธอด getResult เป็นเมธอดสำหรับหาผลรวมจาก Property ที่ถูกกำหนดในตอนสร้างออบเจ็ค และเราได้เข้าถึงค่า Property ด้วยออบเจ็ค this เหมือนกับที่คุณเห็น ออบเจ็คนี้เป็นออบเจ็คที่อ้างถึงออบเจ็คปัจจุบันที่โปรแกรมทำงานอยู่

console.log("2 + 3 = %d", s1.getResult());
...
console.log("10 + 20 = %d", s2.getResult());

นั่นหมายความว่าเมื่อเราเรียกใช้เมธอดด้วยคำสั่ง s1.getResult() ค่า this จะหมายถึงออบเจ็ค s1 และเมื่อเรียกใช้เมธอดด้วยคำสั่ง s2.getResult() ค่า this จะหมายถึงออบเจ็ค s2 นั่นจึงทำให้แต่ละออบเจ็คแบ่งแยกค่า Property ออกจากกันได้ถึงแม้ว่าใช้โค้ดจากคลาสเดียวกันนั่นเอง

คำสั่ง this นั้นใช้ภายในคลาสเท่านั้น เมื่ออยู่ภายนอกคลาสเราสามารถเข้าถึง Property หรือเมธอดโดยตัวแปรออบเจ็คเหล่านั้นได้เลย ยกตัวอย่างเช่น

let s1 = new Sum();

s1.a = 2;
s1.b = 3;

เนื่องจากภายนอกคลาสเราทราบว่าออบเจ็คไหนที่เราต้องการทำงานด้วย ดังนั้นการทำงานจะผ่านตัวแปรของออบเจ็คแทน

ตัวอย่างคลาส Car

ในตัวอย่างที่ผ่านมาคุณได้ทำความเข้าใจพื้นฐานเกี่ยวกับคลาสในภาษา JavaScript ไปแล้ว สำหรับตัวอย่างสุดท้ายในบทนี้เราจะมาสร้างคลาส Car สำหรับจำลองการทำงานของรถยนต์ ซึ่งเป็นตัวอย่างที่รวมทุกอย่างที่คุณได้เรียนรู้มาเข้าด้วยกัน

นี่เป็นคลาสสำหรับรถยนต์ของเรา มันประกอบไปด้วย Property และเมธอดเป็นจำนวนมาก ซึ่งแต่ละค่านั้นมีความสำคัญในหน้าที่ของมัน

class Car {

    constructor(model, color) {
        this.model = model;
        this.color = color;
        this.fuel = 0;
        this.speed = 0;
    }

    start() {
        console.log("Car engine has started");
        this.consumeFuel(1);
    }

    stop() {
        console.log("Car engine has stopped");
        this.speed = 0;
    }

    fillFuel(amount) {
        this.fuel += amount;
        console.log("Fuel level increased by %d%%", amount);
    }

    consumeFuel(amount) {
        if (this.fuel <= 0) {
            console.log("Fuel is out");
        }
        this.fuel -= amount;
    }

    accelerate(speed) {
        if (speed > this.speed) {
            console.log("Accelarating speed up to %d mph", speed);
            this.consumeFuel(speed * 0.1);
        } else {
            console.log("Decelerating speed down to %d mph", speed);
            this.consumeFuel(0);
        }

        this.speed = speed;
    }

    getConsole() {
        console.log("Console Status");
        console.log("- Model: %s (%s)", this.model, this.color);
        console.log("- Current speed: %d mph", this.speed);
        console.log("- Fuel level: %d%%", this.fuel);
    }
}

let car = new Car("Nissan", "Blue");
car.fillFuel(100);

car.start();
car.accelerate(50);
car.getConsole();

car.accelerate(30);
car.stop();
car.getConsole();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Fuel level increased by 100%
Car engine has started
Accelerating speed up to 50 mph
Console Status
- Model: Nissan (Blue)
- Current speed: 50 mph
- Fuel level: 94%
Decelerating speed down to 30 mph
Car engine has stopped
Console Status
- Model: Nissan (Blue)
- Current speed: 0 mph
- Fuel level: 94%

ในตัวอย่างนี้เราได้สร้างคลาส Car ซึ่งเป็นคลาสสำหรับรถยนต์ คลาสนี้มี Property และเมธอดเป็นจำนวนมากเพื่อจำลองการทำงานของรถยนต์

constructor(model, color) {
    this.model = model;
    this.color = color;
    this.fuel = 0;
    this.speed = 0;
}

คอนสตรัคเตอร์รับสองพารามิเตอร์สำหรับกำหนดชื่อ model และสี color ของรถยนต์ จะเห็นว่าภายในคอนสตรัคเตอร์นั้นไม่จำเป็นต้องกำหนดทุกอย่างผ่านพารามิเตอร์ เราสามารถกำหนดค่าเริ่มต้นสำหรับบาง Property ได้ที่นี่ ในกรณีนี้ เรากำหนดให้ระดับเชื่อเพลิงและความเร็วของรถเป็น 0 ในตอนที่ออบเจ็คถูกสร้าง

start() {
    console.log("Car engine has started");
    this.consumeFuel(1);
}

stop() {
    console.log("Car engine has stopped");
    this.speed = 0;
}

เมธอด start ใช้สำหรับสตาร์ทรถยนต์ และเมธอด stop ใช้สำหรับหยุดรถยนต์ ภายในเมธอด start นั้นจะเห็นว่ามันได้มีการเรียกใช้งานเมธอด consumeFuel ด้วยเนื่องจากการสตาร์ทรถยนต์จะต้องใช้พลังงาน จะเห็นว่าไม่ว่าจะเป็นการเข้าถึงค่า Property หรือเรียกใช้งานเมธอด เราจำเป็นต้องทำผ่านออบเจ็ค this เสมอ

fillFuel(amount) {
    this.fuel += amount;
    console.log("Fuel level increased by %d%%", amount);
}

consumeFuel(amount) {
    if (this.fuel <= 0) {
        console.log("Fuel is out");
    }
    this.fuel -= amount;
}

เมธอด fillFuel ใช้สำหรับเติมน้ำมันเข้ามาในถัง และเมธอด consumeFuel เป็นเมธอดที่จำลองการใช้งานเชื้อเพลิงที่จะถูกเรียกใช้โดยเมธอดอื่นๆ กล่าวคือ เมธอดนี้เป็นเมธอดสำหรับใช้ภายในคลาสที่จะถูกเรียกใช้โดยเมธอดอื่นๆ ที่ต้องการใช้เชื้อเพลิง เช่น การสตาร์ทเครื่อง หรือการเร่งเครื่องยนต์ เป็นต้น

accelerate(speed) {
    if (speed > this.speed) {
        console.log("Accelarating speed up to %d mph", speed);
        this.consumeFuel(speed * 0.1);
    } else {
        console.log("Decelerating speed down to %d mph", speed);
        this.consumeFuel(0);
    }

    this.speed = speed;
}

เมธอด accelerate ทำหน้าที่เป็นเหมือนคันเร่งและเบรกของรถ เราสามารถใช้มันเพื่อเพิ่มความเร็วของรถไปยังค่าที่กำหนดได้ สำหรับการเพิ่มความเร็วนั้นจะใช้เชื่อเพลิง 10% จากค่าความเร็ว ส่วนการลดความเร็วนั้นไม่ใช้เชื้อเพลิง

getConsole() {
    console.log("Console Status");
    console.log("- Model: %s (%s)", this.model, this.color);
    console.log("- Current speed: %d mph", this.speed);
    console.log("- Fuel level: %d%%", this.fuel);
}

และสุดท้ายเมธอด getConsole เป็นการแสดงข้อมูลการทำงานปัจจุบันของรถยนต์ คุณสามารถจินตนาการได้ว่าเมธอดนี้เป็นเหมือนแผงหน้าปัดรถยนต์ที่คอยบอกสถานะการทำงานต่างๆ ให้เราทราบในขณะที่เรากำลังขับรถหรืออยู่ในรถ

let car = new Car("Nissan", "Blue");
car.fillFuel(100);

car.start();
car.accelerate(50);
car.getConsole();

car.accelerate(30);
car.stop();
car.getConsole();

เมื่อเราสร้างคลาสเสร็จสิ้น เราได้นำมันมาสร้างออบเจ็คและจำลองการทำงานของรถยนต์ด้วยเมธอดต่างๆ ที่เราจัดเตรียมขึ้น

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับคลาสในภาษา JavaScript เราได้พูดถึงการสร้างคลาสด้วยคำสั่ง class และการนำคลาสไปสร้างเป็นออบเจ็คเพื่อใช้งาน คุณได้รู้กับกับคอนสรัคเตอร์ซึ่งเป็นเมธอดที่จะถูกเรียกใช้งานเมื่ออบเจ็คถูกสร้าง และได้เข้าใจเกี่ยวกับการใช้งานคำสั่ง this ภายในคลาส

นี่เป็นเนื้อหาพื้นฐานเกี่ยวกับคลาสในภาษา JavaScript ซึ่งคลาสนั้นยังมีคุณสมบัติอื่นๆ ที่น่าสนใจอีกมากซึ่งคุณจะได้เรียนในบทต่อไปของบทเรียนนี้