Static Methods and Properties

Static Methods and Properties ใน JavaScript

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับการใช้งาน class syntax ใน JavaScript ซึ่งเป็น syntax sugar ที่ช่วยให้การเขียน Object-Oriented Programming (OOP) ง่ายขึ้น ในบทนี้ เราจะมาเจาะลึกถึง static methods และ properties ซึ่งเป็นคุณสมบัติที่สำคัญในการออกแบบ class ให้มีประสิทธิภาพมากยิ่งขึ้น

Static คืออะไร?

static หมายถึง "เป็นของ class โดยตรง" ไม่ใช่ "เป็นของ instance ของ class" นั่นหมายความว่า static methods และ properties จะถูกเรียกใช้ผ่านทาง class เอง ไม่ใช่ผ่านทาง object ที่สร้างจาก class นั้น

Static Keyword

เราใช้ keyword static นำหน้า methods หรือ properties ที่เราต้องการให้เป็น static

การใช้งาน Static Methods

Static methods คือ methods ที่เป็นของ class โดยตรง ไม่จำเป็นต้องสร้าง instance ของ class ก่อนถึงจะเรียกใช้ได้ มักใช้สำหรับ utility functions หรือ functions ที่ทำงานโดยไม่จำเป็นต้องเข้าถึงข้อมูลเฉพาะของ instance

class MathHelper {
  static add(x, y) {
    return x + y;
  }

  static subtract(x, y) {
    return x - y;
  }
}

// เรียกใช้ static method ผ่านทาง class
const sum = MathHelper.add(5, 3);
console.log(sum); // Output: 8

const difference = MathHelper.subtract(10, 4);
console.log(difference); // Output: 6

// พยายามเรียกใช้ static method ผ่าน instance จะเกิด error
// const helper = new MathHelper();
// helper.add(5, 3); // Error: helper.add is not a function

กรณีใช้งานจริง: สร้าง helper functions ที่เกี่ยวข้องกับ class แต่ไม่จำเป็นต้องเข้าถึงข้อมูลภายใน instance

class StringValidator {
  static isValidEmail(email) {
    // Regular expression สำหรับตรวจสอบ email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  static isValidPhoneNumber(phoneNumber) {
    // Regular expression สำหรับตรวจสอบเบอร์โทรศัพท์
    const phoneRegex = /^\d{10}$/; // สมมติว่าเบอร์โทรศัพท์ต้องมี 10 หลัก
    return phoneRegex.test(phoneNumber);
  }
}

console.log(StringValidator.isValidEmail("test@example.com")); // Output: true
console.log(StringValidator.isValidEmail("invalid-email")); // Output: false
console.log(StringValidator.isValidPhoneNumber("0812345678")); // Output: true
console.log(StringValidator.isValidPhoneNumber("123")); // Output: false

ข้อผิดพลาดที่พบบ่อย: พยายามเข้าถึง this ภายใน static method เนื่องจาก this ใน static method จะอ้างอิงถึง class เอง ไม่ใช่ instance

class MyClass {
  constructor(name) {
    this.name = name;
  }

  static myStaticMethod() {
    // console.log(this.name); // Error: Cannot read properties of undefined (reading 'name')
    console.log(this); // Output: class MyClass { ... }
  }
}

MyClass.myStaticMethod();

หากต้องการเข้าถึงข้อมูล instance จาก static method จะต้องส่ง instance เข้าไปเป็น parameter

class MyClass {
  constructor(name) {
    this.name = name;
  }

  static myStaticMethod(instance) {
    console.log(instance.name); // เข้าถึงข้อมูล instance ผ่าน parameter
  }
}

const myInstance = new MyClass("John");
MyClass.myStaticMethod(myInstance); // Output: John

การใช้งาน Static Properties

Static properties คือ properties ที่เป็นของ class โดยตรง ไม่ใช่ของ instance มักใช้สำหรับเก็บค่าคงที่ (constants) หรือข้อมูลที่เกี่ยวข้องกับ class โดยรวม

class Circle {
  static PI = 3.14159; // Static property เก็บค่า PI

  constructor(radius) {
    this.radius = radius;
  }

  calculateArea() {
    return Circle.PI * this.radius * this.radius;
  }
}

const myCircle = new Circle(5);
console.log(myCircle.calculateArea()); // Output: 78.53975

console.log(Circle.PI); // เข้าถึง static property ผ่านทาง class

กรณีใช้งานจริง: กำหนดค่าคงที่ที่ใช้ร่วมกันใน class

class APIConfig {
  static BASE_URL = "https://api.example.com";
  static API_KEY = "YOUR_API_KEY";

  static getEndpoint(endpoint) {
    return `${APIConfig.BASE_URL}/${endpoint}?apiKey=${APIConfig.API_KEY}`;
  }
}

const userEndpoint = APIConfig.getEndpoint("users");
console.log(userEndpoint); // Output: https://api.example.com/users?apiKey=YOUR_API_KEY

ข้อผิดพลาดที่พบบ่อย: พยายามเข้าถึง static property ผ่าน instance โดยตรง

class MyClass {
  static myStaticProperty = "Hello";
}

const myInstance = new MyClass();
// console.log(myInstance.myStaticProperty); // Error: undefined
console.log(MyClass.myStaticProperty); // ถูกต้อง

สรุป

static methods และ properties เป็นเครื่องมือที่มีประโยชน์ในการออกแบบ class ใน JavaScript ช่วยให้เราสร้าง utility functions, เก็บค่าคงที่, และจัดการข้อมูลที่เกี่ยวข้องกับ class โดยรวมได้อย่างมีประสิทธิภาพ การเข้าใจหลักการใช้งาน static จะช่วยให้โค้ดของเราเป็นระเบียบและง่ายต่อการบำรุงรักษามากยิ่งขึ้น

บทต่อไป

ในบทต่อไป เราจะเรียนรู้เกี่ยวกับ Getter และ Setter methods ซึ่งเป็น methods พิเศษที่ช่วยให้เราควบคุมการเข้าถึง properties ของ object ได้อย่างละเอียด