Karagdagang Mga Tampok ng Mga Klase sa JavaScript

Sa artikulong ito, ipapaliwanag namin ang karagdagang mga tampok ng mga klase sa JavaScript.

YouTube Video

Karagdagang Mga Tampok ng Mga Klase sa JavaScript

Pribadong Mga Katangian sa JavaScript

Sa JavaScript, ang pribadong mga katangian ay mga katangian na naa-access lamang sa loob ng object o klase. Ito ay nagbibigay-daan sa mas ligtas at matatag na disenyo ng code sa pamamagitan ng encapsulation, upang ang direktang pagbabago o pag-refer mula sa panlabas na code ay hindi posible.

Inilunsad sa ECMAScript 2020 (ES11) noong 2020, ang paggamit ng # (hash) upang tukuyin ang mga pribadong field sa loob ng isang klase ay inilunsad. Ito ay nagbibigay ng mas malinaw na paraan, na pumapalit sa tradisyonal na mga pribatong kombensyon ng JavaScript (tulad ng mga pangalan ng variable na nagsisimula sa underscore).

Mga Bentahe ng Pribadong Mga Katangian

Ang mga sumusunod ay ang mga benepisyo ng mga pribadong ari-arian.

• Encapsulation: Itinatago ang panloob na estado mula sa labas at pinapanatili ang pagkakapare-pareho ng datos.
• Seguridad: Pinipigilan ang mga katangian mula sa hindi sinasadyang pagbabago ng panlabas na code.
• Mas Pinahusay na Maintainability: Itinatago ang implementasyon ng mga object o klase at nililinaw ang interface na ipinapakita sa labas.

Paano Gamitin ang Pribadong Mga Katangian

Pagpapakahulugan ng Pribadong Mga Katangian sa Mga Klase

Ang mga pribadong field ay itinatakda gamit ang isang pangalan na nagsisimula sa #. Ang field na ito ay hindi maaaring direktang ma-access mula sa mga instance ng klase o mga subclass nito.

 1class Person {
 2    // Define private property
 3    #name;
 4
 5    constructor(name) {
 6        this.#name = name;
 7    }
 8
 9    // Method to access the private property
10    getName() {
11        return this.#name;
12    }
13
14    // Method to change the private property
15    setName(newName) {
16        this.#name = newName;
17    }
18}
19
20const john = new Person("John");
21console.log(john.getName()); // John
22
23// Cannot access private property directly
24console.log(john.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

Sa code sa itaas, ang #name ay isang pribadong katangian na hindi maaaring direktang ma-access mula sa labas ng klase na Person. Maaari mo lamang ma-access o mabago ang pangalan sa pamamagitan ng mga paraan na getName at setName.

Pagpapakahulugan ng Pribadong Mga Pamamaraan

Tulad ng mga pribadong katangian, ang mga pribadong pamamaraan ay itinatakda rin gamit ang isang pangalan na nagsisimula sa #. Ang mga pribadong pamamaraan ay maaari lamang tawagin mula sa loob ng klase.

 1class Counter {
 2    #count = 0;
 3
 4    increment() {
 5        this.#count++;
 6        this.#logCount(); // Calling private method
 7    }
 8
 9    // Private method
10    #logCount() {
11        console.log(`Current count: ${this.#count}`);
12    }
13}
14
15const counter = new Counter();
16counter.increment(); // Current count: 1
17
18// Cannot access private method directly
19counter.#logCount(); // SyntaxError: Private field '#logCount' must be declared in an enclosing class

Dito, ang #logCount ay tinukoy bilang isang pribadong pamamaraan at hindi maaaring ma-access mula sa labas ng klase. Ang pamamaraang ito ay ginagamit lamang sa loob ng klase.

Mga Bentahe at Pagsasaalang-alang ng Pribadong Mga Katangian

Kalamangan

• Dahil hindi ito direktang ma-access mula sa labas ng klase, naiiwasan ang hindi sinasadyang pagbabago o operasyon.
• Dahil ang mga bahagi na hindi nakikita mula sa labas ay maaaring maitago ng maayos, maingat mong mapapangasiwaan ang mga bahagi na ipinapakita mo bilang isang API.

Mga Tala

• Dahil ang mga private field ay ganap na nakatago mula sa labas ng klase, maaaring maging mahirap ang testing at debugging. Kaya't mahalagang magbigay ng API na maaaring masusing masubukan sa yugto ng disenyo.
• Ang mga private field ay kumikilos nang iba mula sa ibang bahagi ng JavaScript na may prototype-based na katangian dahil natatangi ito para sa bawat instance.

Tradisyunal na Pseudonymous na Pagpapatupad ng Mga Pribadong Ari-arian

Bago ang pagpapakilala ng mga private field gamit ang #, walang opisyal na syntax ang JavaScript para sa mga pribadong ari-arian. Kaya't sa nakaraan, ang mga pseudo-private na ari-arian ay ipinatupad sa mga sumusunod na paraan:.

Kumbensyon ng paggamit ng underscore

Kinaugalian ng mga developer na ipakita ang 'private' sa pamamagitan ng paglalagay ng underscore bilang prefix ng mga pangalan ng variable.

 1class Car {
 2    constructor(brand) {
 3        this._brand = brand; // Using an underscore to indicate private
 4    }
 5
 6    getBrand() {
 7        return this._brand;
 8    }
 9}
10
11const car = new Car("Toyota");
12console.log(car.getBrand()); // Toyota
13console.log(car._brand); // Toyota (Accessible from outside)

Ang pamamaraang ito ay isang 'kumbensyon' lamang, at sa praktika, ang mga ari-arian ay maaari pa ring ma-access mula sa labas.

Pagpapatupad ng mga pribadong ari-arian gamit ang closures

Posible ring makamit ang mga pribadong ari-arian gamit ang closures na may saklaw ng function.

 1function createPerson(name) {
 2    let _name = name; // Private variable within function scope
 3
 4    return {
 5        getName: function() {
 6            return _name;
 7        },
 8        setName: function(newName) {
 9            _name = newName;
10        }
11    };
12}
13
14const person = createPerson("Alice");
15console.log(person.getName()); // Alice
16person.setName("Bob");
17console.log(person.getName()); // Bob
18
19// Cannot access directly from outside
20console.log(person._name); // undefined

Sa pamamaraang ito, ang variable na _name ay nakakulong sa loob ng saklaw ng function at hindi maaaring direktang ma-access mula sa labas.

Buod

Ang mga pribadong ari-arian sa JavaScript ay napakahusay sa pagbibigay ng encapsulation sa disenyo ng klase at bagay, na tumutulong sa ligtas na pagprotekta ng data. Ang notasyon na # para sa mga private field na ipinakilala sa ES2020 ay nag-aalok ng mas malinaw at mas ligtas na paraan ng pamamahala ng privacy kumpara sa mga tradisyunal na kumbensyon at closures.

Optional Chaining sa JavaScript

Ang Optional Chaining ay isang napaka-kapaki-pakinabang na syntax sa JavaScript para sa pag-access sa mga ari-arian ng lubos na nakapaloob na mga bagay. Pinapabuti nito ang pagiging mababasa at pagpapanatili ng code sa pamamagitan ng pagpapahintulot ng ligtas na pag-access nang hindi kinakailangang tiyakin isa-isa ang pag-iral ng mga partikular na ari-arian.

Pangunahing syntax ng Optional Chaining

Maaaring gamitin ang Optional Chaining sa pamamagitan ng paglalagay ng ? bago ang tuldok (.) o ang bracket na notasyon na ginagamit para sa pag-access ng ari-arian. Ang notasyong ito ay nagbabalik ng undefined kapag ang isang dinaanang ari-arian ay null o undefined, na nagpapahintulot sa programa na magpatuloy sa ligtas na pagproseso nang hindi nagkakaroon ng error.

Halimbawa:

 1const user = {
 2    name: 'John',
 3    address: {
 4        street: '123 Main St',
 5        city: 'New York'
 6    }
 7};
 8
 9// Without using optional chaining
10const city = user && user.address && user.address.city;
11console.log(city);  // New York
12
13// Using optional chaining
14const cityWithOptionalChaining = user?.address?.city;
15console.log(cityWithOptionalChaining);  // New York

Sa halimbawang ito, ina-access natin ang address at ang ari-arian nitong city ng objektong user. Kung hindi gagamit ng optional chaining, kinakailangan mong magsagawa ng maraming pagsusuri sa pag-iral, ngunit gamit ang optional chaining, ligtas mong maa-access ang property gamit ang isang pahayag lamang.

Paggamit ng Optional Chaining sa mga array at mga function

Ang optional chaining ay naaangkop hindi lamang sa mga property ng object, kundi pati na rin sa mga elemento ng array at sa mga pagtawag ng function.

Halimbawa gamit ang mga array:

1const users = [{ name: 'Alice' }, { name: 'Bob' }];
2
3// Accessing the non-existent third element
4const thirdUser = users[2]?.name;
5console.log(thirdUser);  // undefined

Halimbawa gamit ang mga function:

 1const user = {
 2    greet: function() {
 3        return 'Hello!';
 4    }
 5};
 6
 7// Call the function only if greet exists
 8const greeting = user.greet?.();
 9console.log(greeting);  // Hello!
10
11// Return undefined if greet does not exist
12const nonExistentGreeting = user.nonExistentMethod?.();
13console.log(nonExistentGreeting);  // undefined

Pinagsasama ang Optional Chaining sa mga default na halaga

Kapag gumagamit ng optional chaining, karaniwan ang paggamit ng logical OR (||) o nullish coalescing operator (??) upang tumukoy ng default na halaga kung ang isang property ay wala.

Halimbawa:

 1const user = {
 2    name: 'John',
 3    address: {
 4        city: 'New York'
 5    }
 6};
 7
 8// Set a default value for a non-existent property
 9const state = user?.address?.state || 'Unknown';
10console.log(state);  // Unknown
11
12// Example using the nullish coalescing operator
13const zipCode = user?.address?.zipCode ?? '00000';
14console.log(zipCode);  // 00000

Ang || operator ay itinuturing ang false, 0, '', at iba pa bilang falsy, samantalang ang ?? operator ay ginagamit lamang ang default na halaga kung ang operand ay null o undefined.

Mga Benepisyo ng Optional Chaining

• Ligtas na pag-access sa nested objects: Sa pamamagitan ng optional chaining, hindi mo na kailangang magsagawa ng hayagang pagsusuri sa pag-iral, kaya nagiging mas maiksi ang code.
• Pag-iwas sa mga error: Maaari nitong maiwasan ang runtime errors kahit na ang isang property ay null o undefined.
• Pinahusay na readability at maintainability: Lalo na kapag nagtatrabaho sa maraming nested objects, lubos na pinapabuti ang readability ng code.

Pag-iingat sa Paggamit ng Optional Chaining

• Ang madalas na paggamit ng optional chaining ay maaaring senyales na masyadong kumplikado ang disenyo ng data structure. Dapat mong pagsikapan na magkaroon ng isang simpleng data model.
• Dahil ang ilang mas lumang browser at JavaScript engine ay hindi sumusuporta dito, maaaring kailanganin mong gumamit ng polyfills o transpilers.

Konklusyon

Ang optional chaining ay isang makapangyarihang tampok na nagpapadali ng ligtas na pag-access sa mga property at function ng nested objects sa JavaScript. Ito ay partikular na epektibo kapag ina-access ang malalalim na nested na istruktura ng data, nakakatulong sa pag-iwas sa error at pagpapahusay ng readability 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