Getter and Setter ในภาษา JavaScript

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

• Getter and Setter คืออะไร
• การใช้งาน Getter and Setter
• Read only property

Getter and Setter คืออะไร

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

Getter และ Setter เป็นสมาชิกที่ประกาศภายในคลาสเหมือนกับ Property และเมธอด นี่เป็นรูปแบบของการประกาศ Getter และ Setter เมธอดในภาษา JavaScript

class MyClass {
    #privateProp;

    set prop(value) {
        this.#field = value;
    }

    get prop() {
        return this.#field;
    } 
}

Getter และ Setter เมธอดจะประกาศในคลาสเพื่อใช้สำหรับเข้าถึง Property ที่ม่ีระดับการเข้าถึงเป็นแบบ Private โดย Property ประเภทนี้จะมีเครื่องหมาย # ที่หน้าชื่อของมันด้วยเสมอ Getter เมธอดจะใช้คำสั่ง get ที่หน้าชื่อของเมธอด ส่วน Setter เมธอดจะใช้คำสั่ง set ที่หน้าชื่อของเมธอด โดยที่ prop เป็นการตั้งชื่อให้กับ Getter และ Setter เพื่อนำไปใช้งาน

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

การใช้งาน Getter and Setter

การใช้งาน Getter และ Setter เมธอดจะเหมือนกับการใช้งาน Property ปกติที่เราคุ้นเคย แต่สิ่งที่แตกต่างคือ เราสามารถทำอะไรบางอย่างกับข้อมูลก่อนที่มันจะถูกส่งกลับ (Get) และจัดเก็บ (Set) ได้ ต่อไปเรามาสร้างคลาสของรถยนต์สำหรับเก็บข้อมูลเกี่ยวกับรถยนต์ เพื่อแสดงตัวอย่างการใช้งาน Getter และ Setter เมธอด

class Car {
    #year;

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

    set year(value) {
        if (typeof value === 'number') {
            this.#year = value;
        } else if (value instanceof Date) {
            this.#year = value.getFullYear();
        } else {
            throw new TypeError("Year must be number or date");
        }
    }

    get year() {
        return this.#year;
    }
}

let myCar = new Car("Tesla Model 3", "Red");
myCar.year = 2017;

console.log(myCar);
console.log(`${myCar.model} was released in ${myCar.year}.`);

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

Car { model: 'Tesla Model 3', color: 'Red' }
Tesla Model 3 was released in 2017.

ในตัวอย่างนี้ เราได้สร้างคลาส Car ที่ประกอบไปด้วยสาม Property ได้แก่ model สำหรับเก็บชื่อรุ่นของรถยนต์ color สำหรับเก็บสีของรถยนต์ และสุดท้าย #year สำหรับเก็บปีที่รถยนต์เปิดตัว โดย Property นี้มีระดับการเข้าถึงเป็นแบบ Private เนื่องจากชื่อของมันเริ่มต้นด้วยตัวอักษร #

และเนื่องจาก Property #year มีระดับการเข้าถึงแบบแบบ Private นั่นทำให้มันไม่สามารถเข้าถึงได้จากภายนอกคลาสผ่านตัวแปรอออบเจ็คได้ ดังนั้นในการเข้าถึง Property นี้คือเราจะมาสร้าง Getter และ Setter เมธอดสำหรับเข้าถึงค่าของมันแทน

set year(value) {
    if (typeof value === 'number') {
        this.#year = value;
    } else if (value instanceof Date) {
        this.#year = value.getFullYear();
    } else {
        throw new TypeError("Year must be number or date");
    }
}

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

get year() {
    return this.#year;
}

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

let myCar = new Car("Tesla Model 3", "Red");
myCar.year = 2017;

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

console.log(myCar);
console.log(`${myCar.model} was released in ${myCar.year}`);

และเช่นเดียวกัน การอ่านค่าจาก myCar.year จะหมายถึงการเรียกใช้งาน Getter เมธอดโดยอัตโนมัติ ซึ่งการใช้งานของมันจะเหมือนกับการอ่านค่าจาก Property ปกติ กล่าวโดยสรุปก็คือ Getter และ Setter เป็นเมธอดที่มีการใช้งานเหมือนกับ Property และสามารถเขียนคำสั่งเพิ่มเติมเพื่อจัดการกับข้อมูลก่อนการดำเนินการทั้งสองได้

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

Read only property

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

class Person {
    firstName;
    lastName;
    favorite;

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

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

let me = new Person("Matteo", "Cristo");
me.favorite = "Guitar";

console.log(`${me.fullName} likes ${me.favorite}.`);

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

Matteo Cristo likes Guitar.

ในตัวอย่างนี้ เราได้สร้างคลาส Person ที่ประกอบไปด้วยสาม Property คือ firstName และ lastName สำหรับเก็บชื่อและนามสกุล และ favorite สำหรับเก็บที่ชอบทำตามลำดับ โดย Property เหล่านี่เป็นการประกาศในรูปแบบปกติดังนั้นมันสามารถอ่านและเขียนได้ และเราประกาศหนึ่ง Getter เมธอดที่มีชื่อว่า fullName สำหรับรับเอาชื่อเต็มโดยการรวมชื่อและนามสกุลเข้าด้วยกัน

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

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

// Ignored by the program
me.fullName = "some name";

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

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