𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗼𝗿𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

การสร้างออบเจกต์ทีละอันนั้นช้า หากคุณต้องการนักเรียนสิบคนที่มี properties เหมือนกัน คุณจะเสียเวลาเขียนโค้ดเดิมซ้ำๆ

JavaScript แก้ปัญหานี้ด้วย Constructor Functions

ให้คิดว่า constructor คือพิมพ์เขียว พิมพ์เขียวของบ้านไม่ใช่ตัวบ้าน แต่คุณใช้มันเพื่อสร้างบ้านหลายๆ หลัง

หลักการทำงาน:

Constructor คือฟังก์ชันพิเศษ คุณใช้ keyword new เพื่อสร้างออบเจกต์จากมัน

ตัวอย่าง:

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");
const student2 = new Student("David", 22, "Madurai");

ทำไมต้องใช้สิ่งนี้?

  • ช่วยประหยัดเวลา
  • ป้องกันการเขียนโค้ดซ้ำซ้อน
  • สร้างโครงสร้างที่เป็นมาตรฐานให้กับข้อมูลของคุณ

บทบาทของ this:

ภายใน constructor คำว่า this จะอ้างถึงออบเจกต์ใหม่ที่คุณกำลังสร้างขึ้น

หากครูพูดว่า "ห้องเรียนของฉัน" คำว่า "ของฉัน" จะชี้ไปยังตัวครูคนนั้นโดยเฉพาะ ในโค้ด this.name จะชี้ไปยังชื่อของออบเจกต์เฉพาะที่คุณเพิ่งสร้างขึ้น

จะเกิดอะไรขึ้นเมื่อคุณใช้ new?

เมื่อคุณรัน const emp = new Employee("John", 50000) จะมี 4 ขั้นตอนเกิดขึ้น:

  1. JavaScript สร้างออบเจกต์ว่างขึ้นมา
  2. keyword this จะชี้ไปยังออบเจกต์ใหม่นั้น
  3. properties ต่างๆ จะถูกเพิ่มเข้าไปในออบเจกต์
  4. ออบเจกต์จะถูกส่งคืนกลับมาให้คุณ

การเพิ่มการทำงาน (Actions):

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

ตัวอย่าง:

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
    this.showDetails = function() {
        console.log(this.brand, this.ram);
    };
}

ตอนนี้ออบเจกต์ Laptop จะเก็บทั้งข้อมูลและฟังก์ชันสำหรับแสดงข้อมูลนั้น

แนวทางปฏิบัติที่ดีที่สุด (Best Practices):

  • ควรขึ้นต้นด้วยตัวพิมพ์ใหญ่เสมอสำหรับ constructor เช่น ใช้ Student แทนที่จะเป็น student เพื่อบอกให้นักพัฒนาคนอื่นทราบว่าต้องใช้ keyword new
  • ต้องใช้ keyword new เสมอ หากคุณลืม ฟังก์ชันจะทำงานเหมือนฟังก์ชันปกติและทำให้โค้ดของคุณผิดพลาด

การเปรียบเทียบ:

Object Literals:

  • เหมาะสำหรับออบเจกต์เพียงหนึ่งเดียว
  • ง่ายและรวดเร็ว
  • ไม่มีพิมพ์เขียว

Constructor Functions:

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

Source: https://www.w3schools.com/js/js_object_constructors.asp Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor Full post: https://dev.to/annapoo/constructor-in-javascript-4nbm