JavaScript prototipu ķēdes atklāšana: mantojuma modeļi un objektu izveide

JavaScript, pēc būtības, ir dinamiska un daudzpusīga valoda, kas jau gadu desmitiem nodrošina tīmekļa darbību. Lai gan daudzi izstrādātāji ir pazīstami ar tās funkcionālajiem aspektiem un moderno sintaksi, kas ieviesta ECMAScript 6 (ES6) un vēlāk, sapratne par tās zemākajiem mehānismiem ir būtiska, lai patiešām apgūtu valodu. Viens no fundamentālākajiem, bet bieži vien nepietiekami saprastajiem jēdzieniem ir prototipu ķēde. Šis ieraksts demistificēs prototipu ķēdi, aplūkojot, kā tā atvieglo objektu izveidi un nodrošina dažādus mantojuma modeļus, sniedzot globālu perspektīvu izstrādātājiem visā pasaulē.

Pamats: objekti un rekvizīti JavaScript

Pirms iedziļināties prototipu ķēdē, aplūkosim pamata izpratni par to, kā JavaScript darbojas objekti. JavaScriptā gandrīz viss ir objekts. Objekti ir atslēgu-vērtību pāru kolekcijas, kur atslēgas ir rekvizītu nosaukumi (parasti virknes vai simboli), un vērtības var būt jebkurš datu tips, ieskaitot citus objektus, funkcijas vai primāros vērtījumus.

Apsveriet vienkāršu objektu:

            const person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person.name); // Output: Alice
person.greet();        // Output: Hello, my name is Alice.

            

              
                Copy
              
            
          

Kad jūs piekļūstat objekta rekvizītam, piemēram, person.name, JavaScript vispirms meklē šo rekvizītu tieši pašā objektā. Ja tas to neatrod, tas neapstājas. Šeit notiek prototipu ķēdes darbība.

Kas ir prototips?

Katram JavaScript objektam ir iekšējs rekvizīts, ko bieži dēvē par [[Prototype]], kas norāda uz citu objektu. Šis cits objekts tiek saukts par sākotnējā objekta prototipu. Kad jūs mēģināt piekļūt rekvizītam objektā, un šis rekvizīts nav tieši atrodams pašā objektā, JavaScript meklē to objekta prototipā. Ja tas tur netiek atrasts, tas meklē prototipa prototipā un tā tālāk, veidojot ķēdi.

Šī ķēde turpinās, līdz JavaScript atrod rekvizītu vai sasniedz ķēdes beigas, kas parasti ir Object.prototype, kura [[Prototype]] ir null. Šis mehānisms ir pazīstams kā prototipiskais mantojums.

Prototipa piekļuve

Lai gan [[Prototype]] ir iekšējs slots, ir divi galvenie veidi, kā mijiedarboties ar objekta prototipu:

• Object.getPrototypeOf(obj): Šī ir standarta un ieteicamā metode objekta prototipa iegūšanai.
• obj.__proto__: Šis ir novecojis, bet plaši atbalstīts nestandarta rekvizīts, kas arī atgriež prototipu. Parasti ir ieteicams izmantot Object.getPrototypeOf() labākai saderībai un standartu ievērošanai.

const person = {
  name: "Alice"
};

const personPrototype = Object.getPrototypeOf(person);
console.log(personPrototype === Object.prototype); // Output: true

// Izmantojot novecojušo __proto__
console.log(person.__proto__ === Object.prototype); // Output: true

Prototipu ķēde darbībā

Prototipu ķēde būtībā ir objektu saistīto saraksts. Kad jūs mēģināt piekļūt rekvizītam (iegūt, iestatīt vai dzēst), JavaScript iziet cauri šai ķēdei:

1. JavaScript pārbauda, vai rekvizīts pastāv tieši pašā objektā.
2. Ja tas netiek atrasts, tā pārbauda objekta prototipu (obj.[[Prototype]]).
3. Ja joprojām netiek atrasts, tā pārbauda prototipa prototipu un tā tālāk.
4. Tas turpinās, līdz rekvizīts tiek atrasts vai ķēde beidzas pie objekta, kura prototips ir null (parasti Object.prototype).

Ilustrēsim ar piemēru. Iedomājieties, ka mums ir pamata `Animal` konstruktora funkcija, un pēc tam `Dog` konstruktora funkcija, kas manto no `Animal`.

// Konstruktora funkcija Animal
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

// Konstruktora funkcija Dog
function Dog(name, breed) {
  Animal.call(this, name); // Izsauc vecāku konstruktoru
  this.breed = breed;
}

// Prototipu ķēdes iestatīšana: Dog.prototype manto no Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Labo konstruktora rekvizītu

Dog.prototype.bark = function() {
  console.log(`Woof! My name is ${this.name} and I'm a ${this.breed}.`);
};

const myDog = new Dog("Buddy", "Golden Retriever");

console.log(myDog.name);     // Output: Buddy (atrasts myDog)
myDog.speak();    // Output: Buddy makes a sound. (atrasts Dog.prototype caur Animal.prototype)
myDog.bark();     // Output: Woof! My name is Buddy and I'm a Golden Retriever. (atrasts Dog.prototype)

console.log(Object.getPrototypeOf(myDog) === Dog.prototype); // Output: true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // Output: true
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // Output: true
console.log(Object.getPrototypeOf(Object.prototype) === null); // Output: true

Šajā piemērā:

• myDog ir tieši rekvizīti name un breed.
• Kad tiek izsaukts myDog.speak(), JavaScript meklē speak uz myDog. Tas netiek atrasts.
• Pēc tam tā meklē Object.getPrototypeOf(myDog), kas ir Dog.prototype. speak tur netiek atrasts.
• Pēc tam tā meklē Object.getPrototypeOf(Dog.prototype), kas ir Animal.prototype. Šeit speak tiek atrasts! Funkcija tiek izpildīta, un this funkcijas speak iekšienē attiecas uz myDog.

Objektu izveides modeļi

Prototipu ķēde ir nenodalāmi saistīta ar to, kā tiek izveidoti objekti JavaScript. Vēsturiski, pirms ES6 klasēm, tika izmantoti vairāki modeļi, lai panāktu objektu izveidi un mantojumu:

1. Konstruktora funkcijas

Kā redzams iepriekš minētajos Animal un Dog piemēros, konstruktora funkcijas ir tradicionāls veids, kā izveidot objektus. Kad jūs izmantojat atslēgvārdu new kopā ar funkciju, JavaScript veic vairākas darbības:

1. Tiek izveidots jauns tukšs objekts.
2. Šis jaunais objekts tiek piesaistīts konstruktora funkcijas prototype rekvizītam (t.i., newObj.[[Prototype]] = Constructor.prototype).
3. Konstruktora funkcija tiek izsaukta ar jauno objektu, kas ir piesaistīts ar this.
4. Ja konstruktora funkcija tieši neatgriež objektu, jaunizveidotais objekts (this) tiek neobligāti atgriezts.

Šis modelis ir jaudīgs, lai izveidotu vairākus objektu instances ar kopīgām metodēm, kas definētas konstruktora prototipā.

2. Rūpnīcas funkcijas

Rūpnīcas funkcijas ir vienkārši funkcijas, kas atgriež objektu. Tās neizmanto atslēgvārdu new un neobligāti nepiesaista prototipu tāpat kā konstruktora funkcijas. Tomēr tās joprojām var izmantot prototipus, tieši iestatot atgrieztā objekta prototipu.

function createPerson(name, age) {
  const person = Object.create(personFactory.prototype);
  person.name = name;
  person.age = age;
  return person;
}

personFactory.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const john = createPerson("John", 25);
john.greet(); // Output: Hello, I'm John

Object.create() ir galvenā metode šeit. Tā izveido jaunu objektu, izmantojot esošu objektu kā jaunizveidotā objekta prototipu. Tas nodrošina tiešu kontroli pār prototipu ķēdi.

3. Object.create()

Kā norādīts iepriekš, Object.create(proto, [propertiesObject]) ir fundamentāls rīks objektu izveidei ar norādītu prototipu. Tas ļauj pilnībā apiet konstruktora funkcijas un tieši iestatīt objekta prototipu.

const personPrototype = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// Izveido jaunu objektu 'bob' ar 'personPrototype' kā tā prototipu
const bob = Object.create(personPrototype);
bob.name = "Bob";
bob.greet(); // Output: Hello, my name is Bob

// Varat pat nodot rekvizītus kā otro argumentu
const charles = Object.create(personPrototype, {
  name: { value: "Charles", writable: true, enumerable: true, configurable: true }
});
charles.greet(); // Output: Hello, my name is Charles

Šī metode ir ārkārtīgi jaudīga, lai izveidotu objektus ar iepriekš definētiem prototipiem, nodrošinot elastīgas mantojuma struktūras.

ES6 Klases: Sintaktiskais cukurs

Ar ES6 parādīšanos JavaScript ieviesa class sintaksi. Ir svarīgi saprast, ka klases JavaScriptā galvenokārt ir sintaktiskais cukurs virs esošā prototipiskā mantojuma mehānisma. Tās nodrošina tīrāku, pazīstamāku sintaksi izstrādātājiem, kas nāk no klases balstītām objektorientētajām valodām.

// Izmantojot ES6 klases sintaksi
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class DogES6 extends AnimalES6 {
  constructor(name, breed) {
    super(name); // Izsauc vecāku klases konstruktoru
    this.breed = breed;
  }

  bark() {
    console.log(`Woof! My name is ${this.name} and I'm a ${this.breed}.`);
  }
}

const myDogES6 = new DogES6("Rex", "German Shepherd");
myDogES6.speak(); // Output: Rex makes a sound.
myDogES6.bark();  // Output: Woof! My name is Rex and I'm a German Shepherd.

// Aiz tā visa joprojām tiek izmantoti prototipi:
console.log(Object.getPrototypeOf(myDogES6) === DogES6.prototype); // Output: true
console.log(Object.getPrototypeOf(DogES6.prototype) === AnimalES6.prototype); // Output: true

Kad jūs definējat klasi, JavaScript būtībā izveido konstruktora funkciju un automātiski iestata prototipu ķēdi:

• constructor metode definē objekta instances rekvizītus.
• Metodes, kas definētas klases ķermenī (piemēram, speak un bark), tiek automātiski novietotas uz ar šo klasi saistītās konstruktora funkcijas prototype rekvizīta.
• extends atslēgvārds iestata mantojuma attiecības, piesaistot bērnu klases prototipu vecāku klases prototipam.

Kāpēc prototipu ķēde ir svarīga globāli

Prototipu ķēdes izpratne nav tikai akadēmisks vingrinājums; tai ir dziļas sekas, izstrādājot izturīgas, efektīvas un viegli uzturējamas JavaScript lietojumprogrammas, īpaši globālā kontekstā:

• Veiktspējas optimizācija: Definējot metodes prototipā, nevis uz katras atsevišķas objekta instances, jūs ietaupāt atmiņu. Visas instances koplieto vienas un tās pašas metodes funkcijas, nodrošinot efektīvāku atmiņas izmantošanu, kas ir kritiski svarīgi lietojumprogrammām, kas tiek izmantotas plašā ierīču klāstā un dažādos tīkla apstākļos visā pasaulē.
• Koda atkārtota izmantošana: Prototipu ķēde ir JavaScript galvenais mehānisms koda atkārtotai izmantošanai. Mantojums ļauj veidot sarežģītas objektu hierarhijas, paplašinot funkcionalitāti bez koda dublēšanas. Tas ir nenovērtējami lielām, izplatītām komandām, kas strādā pie starptautiskiem projektiem.
• Dziļāka atkļūdošana: Kad rodas kļūdas, prototipu ķēdes izsekošana var palīdzēt noteikt negaidītas uzvedības avotu. Izpratne par to, kā tiek meklēti rekvizīti, ir galvenais, lai novērstu problēmas, kas saistītas ar mantojumu, tvērumu un this piesaisti.
• Struktūras un bibliotēkas: Daudzas populāras JavaScript struktūras un bibliotēkas (piemēram, agrākas versijas React, Angular, Vue.js) lielā mērā paļaujas uz prototipu ķēdi vai mijiedarbojas ar to. Stabils prototipu pamats palīdz jums saprast to iekšējo darbību un efektīvāk tos izmantot.
• Valodu savietojamība: JavaScript elastība ar prototipiem atvieglo integrāciju ar citām sistēmām vai valodām, īpaši vidēs, piemēram, Node.js, kur JavaScript mijiedarbojas ar dabīgiem moduļiem.
• Konceptuālais skaidrums: Lai gan ES6 klases abstrahē dažas sarežģītības, pamata izpratne par prototipiem ļauj saprast, kas notiek aizkulisēs. Tas padziļina jūsu izpratni un ļauj jums pārliecinošāk tikt galā ar reti sastopamiem gadījumiem un uzlabotiem scenārijiem, neatkarīgi no jūsu ģeogrāfiskās atrašanās vietas vai vēlamās izstrādes vides.

Biežas kļūdas un labākās prakses

Lai gan jaudīga, prototipu ķēde var radīt arī neskaidrības, ja tā netiek rūpīgi apstrādāta. Šeit ir dažas biežas kļūdas un labākās prakses:

Kļūda 1: Iebūvēto prototipu modifikācija

Parasti slikta ideja ir pievienot vai modificēt metodes iebūvēto objektu prototipos, piemēram, Array.prototype vai Object.prototype. Tas var radīt nosaukumu konfliktus un neparedzamu uzvedību, īpaši lielos projektos vai izmantojot trešās puses bibliotēkas, kas varētu paļauties uz sākotnējo šo prototipu uzvedību.

Labākā prakse: Izmantojiet savas konstruktora funkcijas, rūpnīcas funkcijas vai ES6 klases. Ja jums ir nepieciešams paplašināt funkcionalitāti, apsveriet utilitāro funkciju izveidi vai moduļu izmantošanu.

Kļūda 2: Nepareizs konstruktora rekvizīts

Manuāli iestatot mantojumu (piemēram, Dog.prototype = Object.create(Animal.prototype)), jaunā prototipa (Dog.prototype) constructor rekvizīts norādīs uz sākotnējo konstruktoru (Animal). Tas var radīt problēmas ar `instanceof` pārbaudēm un introspekciju.

Labākā prakse: Vienmēr tieši atiestatiet constructor rekvizītu pēc mantojuma iestatīšanas:

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Kļūda 3: this konteksta nesaprašana

this uzvedība prototipu metožu iekšienē ir kritiski svarīga. this vienmēr attiecas uz objektu, uz kura metode tiek izsaukta, nevis uz vietu, kur metode ir definēta. Tas ir pamats tam, kā metodes darbojas visā prototipu ķēdē.

Labākā prakse: Esiet apzinīgi par to, kā tiek izsauktas metodes. Izmantojiet `.call()`, `.apply()` vai `.bind()`, ja jums ir nepieciešams tieši iestatīt this kontekstu, īpaši, ja metodes tiek nodotas kā atzvanīšanas funkcijas.

Kļūda 4: Nesapratne ar citu valodu klasēm

Izstrādātāji, kuri ir pieraduši pie klasiskā mantojuma (kā Java vai C++), var atrast JavaScript prototipisko mantojuma modeli sākotnēji pretēju intuīcijai. Atcerieties, ka ES6 klases ir fasāde; pamatā esošais mehānisms joprojām ir prototipi.

Labākā prakse: Aptveriet JavaScript prototipisko dabu. Koncentrējieties uz izpratni, kā objekti deleģē rekvizītu meklēšanu caur saviem prototipiem.

Pamati: Papildu jēdzieni

instanceof operators

instanceof operators pārbauda, vai objekta prototipu ķēde satur konkrēta konstruktora prototype rekvizītu. Tas ir jaudīgs rīks tipu pārbaudei prototipiskā sistēmā.

console.log(myDog instanceof Dog);      // Output: true
console.log(myDog instanceof Animal);   // Output: true
console.log(myDog instanceof Object);   // Output: true
console.log(myDog instanceof Array);    // Output: false

isPrototypeOf() metode

Object.prototype.isPrototypeOf() metode pārbauda, vai objekts parādās kaut kur citas objekta prototipu ķēdē.

console.log(Dog.prototype.isPrototypeOf(myDog));    // Output: true
console.log(Animal.prototype.isPrototypeOf(myDog)); // Output: true
console.log(Object.prototype.isPrototypeOf(myDog)); // Output: true

Rekvizītu ēnojums

Objekta rekvizīts tiek teikts, ka tas ēno prototipa rekvizītu, ja tam ir tāds pats nosaukums. Kad jūs piekļūstat rekvizītam, tiek iegūts viens uz paša objekta, un prototipa viens tiek ignorēts (līdz objekta rekvizīts tiek dzēsts). Tas attiecas gan uz datu rekvizītiem, gan uz metodēm.

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello from Person: ${this.name}`);
  }
}

class Employee extends Person {
  constructor(name, id) {
    super(name);
    this.id = id;
  }

  // Ēno Person greet metodi
  greet() {
    console.log(`Hello from Employee: ${this.name}, ID: ${this.id}`);
  }
}

const emp = new Employee("Jane", "E123");
emp.greet(); // Output: Hello from Employee: Jane, ID: E123

// Lai izsauktu vecāka greet metodi, mums būtu nepieciešams super.greet()

Secinājumi

JavaScript prototipu ķēde ir pamata jēdziens, kas nodrošina to, kā tiek veidoti objekti, kā tiek piekļūts rekvizītiem un kā tiek panākts mantojums. Lai gan mūsdienu sintakse, piemēram, ES6 klases, vienkāršo tās lietošanu, dziļa izpratne par prototipiem ir būtiska jebkuram nopietnam JavaScript izstrādātājam. Apgūstot šo jēdzienu, jūs iegūstat spēju rakstīt efektīvāku, atkārtoti izmantojamu un viegli uzturējamu kodu, kas ir kritiski svarīgi efektīvai sadarbībai globālos projektos. Neatkarīgi no tā, vai izstrādājat starptautiskai korporācijai vai mazam starta uzņēmumam ar starptautisku lietotāju bāzi, stabils JavaScript prototipiskā mantojuma pamats kalpos kā jaudīgs instruments jūsu izstrādes arsenālā.

Turpiniet izpētīt, turpiniet mācīties un veiksmīgu kodēšanu!