สำรวจการเขียนโปรแกรมเชิงวัตถุใน JavaScript

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

คลาสใน JavaScript

ใน JavaScript คลาสถูกกำหนดโดยใช้คีย์เวิร์ดคลาส คลาสคือพิมพ์เขียวสำหรับสร้างออบเจกต์ที่มีคุณสมบัติและเมธอด นี่คือตัวอย่างคลาสอย่างง่ายใน JavaScript:

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return `The name of the animal is ${this.name} and the age is ${this.age}`;
  }
}

การสร้างวัตถุ/อินสแตนซ์จากคลาส

const firstAnimal = new Animal("Lion", 7);
console.log(firstAnimal); //Animal {name: "Lion", age: 7}
console.log(firstAnimal.getInfo()); //The name of the animal is Lion and the age is 7

การสืบทอดใน JavaScript

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

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
  bark() {
    return "Woof";
  }
}
class Cat extends Animal {
  constructor(name, age, weight) {
    super(name, age);
    this.weight = weight;
  }
}

const myDog = new Dog("Snowy", 2, "Fox Terrier");
console.log(myDog.getInfo()); //The name of the animal is Snowy and the age is 2
console.log(myDog.breed); //Fox Terrier
console.log(myDog.bark()); //Woof

const myCat = new Cat("Bob", 5, "3kg");
console.log(myCat.getInfo()); //The name of the animal is Bob and the age is 5
console.log(myCat.weight); //3kg

การห่อหุ้มใน JavaScript

Encapsulation เป็นแนวคิดในการเขียนโปรแกรมเชิงวัตถุที่ช่วยให้เราสามารถเก็บรายละเอียดภายในของวัตถุที่ซ่อนอยู่จากโลกภายนอก และเปิดเผยอินเทอร์เฟซสาธารณะสำหรับการโต้ตอบกับวัตถุเท่านั้น

class Animal {
  constructor(name, age) {
    let _type = 'unknown'; // private variable declared with let
    this.name = name;
    this.age = age;
    this.getType = () => _type; // method to get the private variable
    this.setType = (type) => { _type = type }; // method to set the private variable
  }
  
  getInfo() {
    return `The name of the animal is ${this.name} and the age is ${this.age}`;
  }
}

const myAnimal = new Animal("Lion", 7);
console.log(myAnimal.getInfo());
console.log(myAnimal.getType()); // accessing the private variable
myAnimal.setType('mammal'); // modifying the private variable
console.log(myAnimal.getType()); // accessing the modified private variable

รออะไร? แล้วเราจะจำกัดการแก้ไขตัวแปรส่วนตัวได้อย่างไร?

การใช้#ไวยากรณ์เพื่อสร้างฟิลด์ส่วนตัวเป็นวิธีการใหม่ที่นำมาใช้ใน ECMAScript 2019 วิธีนี้ให้การห่อหุ้มที่มีประสิทธิภาพมากกว่าการใช้letและช่วยให้มั่นใจว่าคุณสมบัติส่วนตัวสามารถเข้าถึงได้และแก้ไขจากภายในคลาสที่กำหนดไว้เท่านั้น อย่างไรก็ตาม ไวยากรณ์นี้ยังไม่ได้รับการรองรับอย่างแพร่หลายในเบราว์เซอร์และสภาพแวดล้อม JavaScript ทั้งหมด ดังนั้นจึงอาจไม่ใช่ตัวเลือกที่ดีที่สุดหากคุณต้องการสนับสนุนแพลตฟอร์มที่หลากหลาย แต่ยังคง…

class Animal {
  #_type;

  constructor(name, age, type) {
    this.name = name;
    this.age = age;
    this.#_type = type;
  }

  getInfo() {
    return `The name of the animal is ${this.name} and the age is ${this.age}. The animal type is ${this.#_type}`;
  }
}

const firstAnimal = new Animal("Lion", 7, "Wild");
console.log(firstAnimal.getInfo()); // "The name of the animal is Lion and the age is 7. The animal type is Wild"

const secondAnimal = new Animal("Rex", 2, "Domestic");
console.log(secondAnimal.getInfo()); // "The name of the animal is Rex and the age is 2. The animal type is Domestic"
console.log(secondAnimal.#_type); // SyntaxError: Private field '#_type' must be declared in an enclosing class

เมื่อเราพยายามเข้าถึงsecondAnimal.#_typeจากภายนอกคลาส เราจะได้รับ a SyntaxErrorเพราะฟิลด์ส่วนตัวต้องเข้าถึงจากภายในคลาสที่กำหนดไว้

ความหลากหลายใน JavaScript

ความแตกต่างใน JavaScript หมายถึงความสามารถของวัตถุต่าง ๆ ในการตอบสนองต่อข้อความเดียวกันหรือการเรียกเมธอดด้วยวิธีที่แตกต่างกัน สิ่งนี้ทำให้มีความยืดหยุ่นมากขึ้นในการออกแบบโค้ด เนื่องจากออบเจกต์ที่แตกต่างกันสามารถใช้แทนกันได้ตราบเท่าที่ใช้เมธอดเดียวกัน

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return `The name of the animal is ${this.name} and the age is ${this.age}`;
  }
}

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);
    this.breed = breed;
  }
  bark() {
    return "Woof";
  }
}

class Cat extends Animal {
  constructor(name, age, weight) {
    super(name, age);
    this.weight = weight;
  }
}

const myDog = new Dog("Snowy", 2, "Fox Terrier");
const myCat = new Cat("Bob", 5, "3kg");

console.log(myDog.getInfo());
console.log(myDog.bark());
console.log(myCat.getInfo());

นอกจากนี้ เรายังสามารถเรียกใช้bark()เมธอดบนmyDogออบเจกต์ ซึ่งเป็นเฉพาะคลาสDogและไม่มีอยู่ในคลาสAnimalหรือ Catนี่เป็นอีกตัวอย่างหนึ่งของความหลากหลาย เนื่องจากDogคลาสตอบสนองต่อข้อความหรือเมธอดเดียวกันในลักษณะที่แตกต่างจากคลาสCatหรือAnimal

สิ่งที่เป็นนามธรรมใน JavaScript

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

class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return `The name of the animal is ${this.name} and the age is ${this.age}`;
  }
}

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

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

ในบทความนี้ เราได้สำรวจพื้นฐานของ OOP ใน JavaScript พร้อมตัวอย่าง เราได้เห็นวิธีการกำหนดคลาส สร้างวัตถุจากคลาส และแนวคิดหลักของ OOP เช่น Inheritance, Encapsulation, Polymorphism และ Abstraction แม้ว่า JavaScript จะไม่ใช่ภาษา OOP แท้ แต่ก็รองรับแนวคิด OOP มากมายที่สามารถใช้ในการจัดระเบียบและจัดโครงสร้างโค้ด