Mga Klase sa JavaScript

Ipinapaliwanag ng artikulong ito ang mga klase sa JavaScript.

YouTube Video

Mga Klase sa JavaScript

Sa JavaScript, ang isang class ay nagtataglay ng konsepto ng object-oriented programming at nagsisilbing blueprint para sa mga object. Sa pamamagitan ng mga klase, maaari mong maigsi ngunit malinaw na tukuyin ang mga properties at methods ng isang object, na nagpapahusay sa reusability at organisasyon ng code. Ang sintaks ng klase ay ipinakilala sa JavaScript kasama ng ES6.

Depinisyon ng Klase

Ang isang klase ay tinutukoy gamit ang keyword na class at karaniwang ina-activate sa pamamagitan ng isang method na tinatawag na constructor.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Tinutukoy natin ang isang class gamit ang class Person.
• Ang constructor ay isang espesyal na method na awtomatikong tinatawag kapag ang isang object ay nilikha.
• Ang keyword na this ay tumutukoy sa instance (object) ng klase sa loob ng klase.

Mga Katangian at Pamamaraan ng Klase

Ang isang klase ay maaaring magtukoy ng katangian (properties) at pamamaraan (methods). Ang mga katangian (properties) ay kumakatawan sa mga katangian ng isang object, at ang mga pamamaraan (methods) ay kumakatawan sa mga function nito.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

Sa halimbawang ito, isang Car na klase ang idineklara na may mga katangiang brand at model at isang pamamaraang drive.

Pagmamana ng Klase

Maaaring magmana ang mga klase mula sa ibang mga klase. Sa pamamagitan ng pagmamana, maaari kang gumawa ng bagong klase ayon sa umiiral na klase at magdagdag ng karagdagang functionality dito.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

Sa halimbawang ito, ang klase ng Dog ay nagmana mula sa klase ng Animal.

• Ang keyword na extends ay ginagamit upang magmana mula sa klase ng Animal.
• Sa constructor ng klase ng Dog, ginagamit ang super() upang tawagin ang constructor ng parent class. Pinapayagan ka nito na magmana ng proseso ng initialisasyon ng parent class.
• Sa loob ng namana na klase, maaari mong baguhin ang mga pamamaraan ng parent class. Sa halimbawang ito, sa halip na "Rex makes a noise", ang "Rex barks" ang ipinapakita.

Mga Static na Pamamaraan

Kapag nagtakda ka ng static na pamamaraan sa loob ng isang klase, ang pamamaraan ay nauugnay mismo sa klase. Pwedeng tawagin ang static na pamamaraan nang hindi kinakailangang gumawa ng instance.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

Sa halimbawang ito, ang klase na MathUtils ay may tinukoy na static na pamamaraan na add.

• Ang keyword na static ay ginagamit para itakda ang isang static na pamamaraan.
• Ang mga static na pamamaraan ay hindi kabilang sa mga instance ng klase at pwedeng tawagin nang direkta mula sa klase mismo.

Mga Getter at Setter

Sa pamamagitan ng pagtatakda ng getters at setters sa isang klase, maari mong ma-encapsulate ang pagkuha at pagtatakda ng mga katangian.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

Sa halimbawang ito, ang klase na Rectangle ay nagtatakda ng isang getter na area at isang setter na widthValue.

• Ang Getter (get) ay tinatawag kapag kinukuha ang halaga ng isang katangian.
• Ang Setter (set) ay tinatawag kapag itinakda ang halaga ng isang katangian.

Class Syntax Sugar

Sa JavaScript, ang syntax ng klase ay internally na ipinatutupad gamit ang constructor functions at prototypes. Ang syntax ng klase ay isang syntactic sugar para gawing mas maigsi ang paraan ng pagsusulat nito.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

Sa halimbawang ito, ang isang constructor function na Person ay tinukoy, at ang pamamaraan na greet ay tinukoy gamit ang prototype.

Paggamit ng this

Ang keyword na this sa loob ng isang klase ay tumutukoy sa instance ng klase na iyon. Gayunpaman, kapag ginagamit ang this sa mga pamamaraan ng klase, kailangang tandaan na ang kilos nito ay maaring magbago depende sa saklaw. Maaaring magkaroon ng mga problema lalo na kapag ang mga pamamaraan ay ginagamit bilang callback functions.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

Sa mga ganitong kaso, kapag ipinasa bilang callback sa setTimeout, maaring magbago ang tinutukoy ng this. Upang maiwasan ang problemang ito, inirerekomendang ayusin ang this gamit ang pamamaraan na bind o gumamit ng arrow functions.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Buod

• Ang mga klase ay ginagamit bilang mga blueprint para gumawa ng mga object, magtakda ng mga katangian at mga pamamaraan.
• Pwede mong gamitin ang inheritance upang palawakin ang isang klase gamit ang mga konsepto ng object-oriented.
• Ang mga static na pamamaraan ay kabilang sa klase mismo at maaaring gamitin nang hindi kinakailangang gumawa ng instance.
• Maari mong ma-encapsulate ang mga katangian gamit ang getters at setters.
• Ang class syntax ng JavaScript ay syntax sugar at sa loob nito ay gumagamit ng prototype-based inheritance.

Sa pamamagitan ng paggamit ng classes, maaari mong hawakan ang object-oriented programming nang mas natural, at mapabuti ang reusability at maintainability ng code.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video