Otkrivanje prototipnog lanca JavaScripta: obrasci nasljeđivanja i stvaranje objekata

JavaScript je, u svojoj srži, dinamičan i svestran jezik koji pokreće web desetljećima. Dok su mnogi programeri upoznati s njegovim funkcionalnim aspektima i modernom sintaksom uvedenom u ECMAScript 6 (ES6) i novijim verzijama, razumijevanje njegovih osnovnih mehanizama ključno je za istinsko ovladavanje jezikom. Jedan od najtemeljnijih, a opet često neshvaćenih koncepata je prototipni lanac. Ovaj će post demistificirati prototipni lanac, istražujući kako on olakšava stvaranje objekata i omogućuje različite obrasce nasljeđivanja, pružajući globalnu perspektivu za programere diljem svijeta.

Temelj: objekti i svojstva u JavaScriptu

Prije nego što zaronimo u prototipni lanac, uspostavimo temeljno razumijevanje kako objekti funkcioniraju u JavaScriptu. U JavaScriptu je gotovo sve objekt. Objekti su zbirke parova ključ-vrijednost, gdje su ključevi nazivi svojstava (obično nizovi ili Symboli), a vrijednosti mogu biti bilo koji tip podataka, uključujući druge objekte, funkcije ili primitivne vrijednosti.

Razmotrite jednostavan objekt:

            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
              
            
          

Kada pristupite svojstvu objekta, poput person.name, JavaScript prvo traži to svojstvo izravno na samom objektu. Ako ga ne pronađe, ne staje tu. Ovdje na scenu stupa prototipni lanac.

Što je prototip?

Svaki JavaScript objekt ima interni ​​svojstvo, često nazivano [[Prototype]], koje pokazuje na drugi objekt. Taj drugi objekt naziva se prototip izvornog objekta. Kada pokušate pristupiti svojstvu na objektu, a to svojstvo nije pronađeno izravno na objektu, JavaScript ga traži na prototipu objekta. Ako ga tamo ne pronađe, traži ga na prototipu prototipa, i tako dalje, tvoreći lanac.

Ovaj lanac se nastavlja dok JavaScript ne pronađe svojstvo ili ne dođe do kraja lanca, koji je obično Object.prototype, čiji je [[Prototype]] null. Ovaj mehanizam poznat je kao prototipsko nasljeđivanje.

Pristupanje prototipu

Iako je [[Prototype]] unutarnji utor, postoje dva primarna načina za interakciju s prototipom objekta:

• Object.getPrototypeOf(obj): Ovo je standardni i preporučeni način za dobivanje prototipa objekta.
• obj.__proto__: Ovo je zastarjelo, ali široko podržano nestandardno svojstvo koje također vraća prototip. Općenito se savjetuje korištenje Object.getPrototypeOf() za bolju kompatibilnost i pridržavanje standarda.

const person = {
  name: "Alice"
};

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

// Korištenje zastarjelog __proto__
console.log(person.__proto__ === Object.prototype); // Output: true

Prototipni lanac na djelu

Prototipni lanac je u suštini povezani popis objekata. Kada pokušate pristupiti svojstvu (dobiti, postaviti ili izbrisati), JavaScript prelazi ovaj lanac:

1. JavaScript provjerava postoji li svojstvo izravno na samom objektu.
2. Ako nije pronađeno, provjerava prototip objekta (obj.[[Prototype]]).
3. Ako još uvijek nije pronađeno, provjerava prototip prototipa, i tako dalje.
4. Ovo se nastavlja dok se svojstvo ne pronađe ili lanac ne završi na objektu čiji je prototip null (obično Object.prototype).

Ilustrirajmo primjerom. Zamislimo da imamo baznu konstruktorsku funkciju `Animal` i zatim konstruktorsku funkciju `Dog` koja nasljeđuje od `Animal`.

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

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

// Konstruktorska funkcija za Dog
function Dog(name, breed) {
  Animal.call(this, name); // Poziva roditeljsku konstruktorsku funkciju
  this.breed = breed;
}

// Postavljanje prototipnog lanca: Dog.prototype nasljeđuje od Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Ispravlja svojstvo konstruktora

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 (pronađeno na myDog)
myDog.speak();    // Output: Buddy makes a sound. (pronađeno na Dog.prototype putem Animal.prototype)
myDog.bark();     // Output: Woof! My name is Buddy and I'm a Golden Retriever. (pronađeno na 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

U ovom primjeru:

• myDog ima izravna svojstva name i breed.
• Kada se pozove myDog.speak(), JavaScript traži speak na myDog. Nije pronađen.
• Zatim gleda Object.getPrototypeOf(myDog), što je Dog.prototype. speak se tamo ne nalazi.
• Zatim gleda Object.getPrototypeOf(Dog.prototype), što je Animal.prototype. Ovdje se speak pronalazi! Funkcija se izvršava, a this unutar speak odnosi se na myDog.

Obrasci stvaranja objekata

Prototipni lanac je intrinzično povezan s načinom na koji se objekti stvaraju u JavaScriptu. Povijesno, prije ES6 klasa, korišteno je nekoliko obrazaca za postizanje stvaranja objekata i nasljeđivanja:

1. Konstruktorske funkcije

Kao što je prikazano u gornjim primjerima Animal i Dog, konstruktorske funkcije su tradicionalan način stvaranja objekata. Kada koristite ključnu riječ new s funkcijom, JavaScript obavlja nekoliko radnji:

1. Stvara se novi prazan objekt.
2. Ovaj novi objekt povezan je sa svojstvom prototype konstruktorske funkcije (tj. newObj.[[Prototype]] = Constructor.prototype).
3. Konstruktorska funkcija se poziva s novim objektom vezanim za this.
4. Ako konstruktorska funkcija eksplicitno ne vrati objekt, implicitno se vraća novostvoreni objekt (this).

Ovaj obrazac je moćan za stvaranje više instanci objekata sa zajedničkim metodama definiranim na prototipu konstruktora.

2. Tvorničke funkcije

Tvorničke funkcije su jednostavno funkcije koje vraćaju objekt. Ne koriste ključnu riječ new i ne povezuju se automatski s prototipom na isti način kao konstruktorske funkcije. Međutim, i dalje mogu iskoristiti prototipe eksplicitnim postavljanjem prototipa vraćenog objekta.

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() je ključna metoda ovdje. Ona stvara novi objekt, koristeći postojeći objekt kao prototip novostvorenog objekta. Ovo omogućuje eksplicitnu kontrolu nad prototipnim lancem.

3. Object.create()

Kao što je nagoviješteno iznad, Object.create(proto, [propertiesObject]) je temeljan alat za stvaranje objekata s određenim prototipom. Omogućuje vam da potpuno zaobiđete konstruktorske funkcije i izravno postavite prototip objekta.

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

// Stvara novi objekt 'bob' s 'personPrototype' kao njegovim prototipom
const bob = Object.create(personPrototype);
bob.name = "Bob";
bob.greet(); // Output: Hello, my name is Bob

// Svojstva možete čak prosljeđivati kao drugi argument
const charles = Object.create(personPrototype, {
  name: { value: "Charles", writable: true, enumerable: true, configurable: true }
});
charles.greet(); // Output: Hello, my name is Charles

Ova metoda je izuzetno moćna za stvaranje objekata s unaprijed definiranim prototipima, omogućavajući fleksibilne strukture nasljeđivanja.

ES6 Klase: sintaktička povlastica

S pojavom ES6, JavaScript je uveo sintaksu class. Važno je razumjeti da su klase u JavaScriptu prvenstveno sintaktička povlastica nad postojećim mehanizmom prototipskog nasljeđivanja. Pružaju čišću, poznatiju sintaksu za programere koji dolaze iz objektno-orijentiranih jezika temeljenih na klasama.

// Korištenje sintakse ES6 klase
class AnimalES6 {
  constructor(name) {
    this.name = name;
  }

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

class DogES6 extends AnimalES6 {
  constructor(name, breed) {
    super(name); // Poziva roditeljsku klasu konstruktora
    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.

// U pozadini, ovo još uvijek koristi prototipe:
console.log(Object.getPrototypeOf(myDogES6) === DogES6.prototype); // Output: true
console.log(Object.getPrototypeOf(DogES6.prototype) === AnimalES6.prototype); // Output: true

Kada definirate klasu, JavaScript u osnovi stvara konstruktorsku funkciju i automatski postavlja prototipni lanac:

• Metoda constructor definira svojstva instance objekta.
• Metode definirane unutar tijela klase (poput speak i bark) automatski se postavljaju na svojstvo prototype konstruktorske funkcije povezane s tom klasom.
• Ključna riječ extends postavlja odnos nasljeđivanja, povezujući prototip dječje klase s prototipom roditeljske klase.

Zašto je prototipni lanac važan globalno

Razumijevanje prototipnog lanca nije samo akademska vježba; ima duboke implikacije za razvoj robusnih, učinkovitih i održivih JavaScript aplikacija, posebno u globalnom kontekstu:

• Optimizacija performansi: Definiranjem metoda na prototipu umjesto na svakoj pojedinačnoj instanci objekta, štedite memoriju. Sve instance dijele iste funkcije metoda, što dovodi do učinkovitije upotrebe memorije, što je ključno za aplikacije implementirane na širokom rasponu uređaja i mrežnih uvjeta diljem svijeta.
• Ponovna upotreba koda: Prototipni lanac je primarni mehanizam JavaScripta za ponovnu upotrebu koda. Nasljeđivanje vam omogućuje izgradnju složenih hijerarhija objekata, proširujući funkcionalnost bez dupliciranja koda. Ovo je neprocjenjivo za velike, distribuirane timove koji rade na međunarodnim projektima.
• Duboko otklanjanje pogrešaka: Kada se pojave pogreške, praćenje prototipnog lanca može pomoći u pronalaženju izvora neočekivanog ponašanja. Razumijevanje kako se svojstva traže ključno je za otklanjanje problema povezanih s nasljeđivanjem, opsegom i vezanjem this.
• Okviri i knjižnice: Mnogi popularni JavaScript okviri i knjižnice (npr. starije verzije React, Angular, Vue.js) uvelike se oslanjaju na prototipni lanac ili komuniciraju s njim. Duboko poznavanje prototipa pomaže vam razumjeti njihov unutarnji rad i učinkovitije ih koristiti.
• Interoperabilnost jezika: Fleksibilnost JavaScripta s prototipima olakšava integraciju s drugim sustavima ili jezicima, posebno u okruženjima poput Node.js gdje se JavaScript povezuje s izvornim modulima.
• Konceptualna jasnoća: Iako ES6 klase apstrahiraju neke složenosti, temeljno razumijevanje prototipa omogućuje vam da shvatite što se događa ispod haube. Ovo produbljuje vaše razumijevanje i omogućuje vam da se pouzdanije nosite s rubnim slučajevima i naprednim scenarijima, bez obzira na vašu zemljopisnu lokaciju ili preferirano razvojno okruženje.

Uobičajene zamke i najbolje prakse

Iako moćan, prototipni lanac također može dovesti do zabune ako se ne njime ne upravlja pažljivo. Evo nekih uobičajenih zamki i najboljih praksi:

Zamka 1: Modificiranje ugrađenih prototipa

Općenito je loša ideja dodavati ili mijenjati metode na ugrađenim prototipovima objekata poput Array.prototype ili Object.prototype. Ovo može dovesti do sukoba imena i nepredvidivog ponašanja, posebno u velikim projektima ili pri korištenju knjižnica trećih strana koje se mogu oslanjati na izvorni rad tih prototipa.

Najbolja praksa: Koristite vlastite konstruktorske funkcije, tvorničke funkcije ili ES6 klase. Ako trebate proširiti funkcionalnost, razmislite o stvaranju pomoćnih funkcija ili korištenju modula.

Zamka 2: Netočan svojstvo konstruktora

Pri ručnom postavljanju nasljeđivanja (npr. Dog.prototype = Object.create(Animal.prototype)), svojstvo constructor novog prototipa (Dog.prototype) pokazivat će na izvorni konstruktor (Animal). Ovo može uzrokovati probleme s provjerama `instanceof` i introspekcijom.

Najbolja praksa: Uvijek eksplicitno resetirajte svojstvo constructor nakon postavljanja nasljeđivanja:

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

Zamka 3: Razumijevanje konteksta `this`

Ponašanje this unutar metoda prototipa je ključno. this se uvijek odnosi na objekt na kojem se metoda poziva, a ne tamo gdje je metoda definirana. Ovo je temeljno za način na koji metode funkcioniraju diljem prototipnog lanca.

Najbolja praksa: Budite svjesni načina na koji se metode pozivaju. Koristite `.call()`, `.apply()`, ili `.bind()` ako trebate eksplicitno postaviti kontekst `this`, posebno kada metode prosljeđujete kao povratne pozive.

Zamka 4: Zbunjenost s klasama u drugim jezicima

Programeri naviknuti na klasično nasljeđivanje (kao u Javi ili C++) mogu smatrati model prototipskog nasljeđivanja JavaScripta u početku kontraintuitivnim. Zapamtite da su ES6 klase fasada; temeljni mehanizam su još uvijek prototipi.

Najbolja praksa: Prihvatite prototipsku prirodu JavaScripta. Usredotočite se na razumijevanje kako objekti delegiraju pretraživanje svojstava putem svojih prototipa.

Napredne teme

Operator `instanceof`

Operator instanceof provjerava sadrži li prototipni lanac objekta svojstvo prototype određenog konstruktora. To je moćan alat za provjeru tipa u prototipskom sustavu.

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

Metoda `isPrototypeOf()`

Metoda Object.prototype.isPrototypeOf() provjerava pojavljuje li se objekt bilo gdje u prototipnom lancu drugog objekta.

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

Svojstva koja se «zasjenjuju» (Shadowing)

Kaže se da svojstvo na objektu zasjenjuje svojstvo na njegovom prototipu ako ima isto ime. Kada pristupite svojstvu, dohvaća se ono na samom objektu, a ono na prototipu se zanemaruje (dok se svojstvo objekta ne izbriše). Ovo se odnosi i na svojstva podataka i na metode.

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;
  }

  // Zasjenjivanje metode greet iz Person
  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

// Za pozivanje roditeljske metode greet, trebali bismo koristiti super.greet()

Zaključak

Prototipni lanac JavaScripta temeljni je koncept koji podržava kako se objekti stvaraju, kako se svojstva pristupaju i kako se postiže nasljeđivanje. Dok moderna sintaksa poput ES6 klasa pojednostavljuje njegovu upotrebu, duboko razumijevanje prototipa je neophodno za svakog ozbiljnog JavaScript programera. Ovladavanjem ovim konceptom stječete sposobnost pisanja učinkovitijeg, ponovno iskoristivog i lakšeg za održavanje koda, što je ključno za učinkovitu suradnju na globalnim projektima. Bez obzira razvijate li za multinacionalnu korporaciju ili mali startup s međunarodnom bazom korisnika, čvrsto poznavanje prototipskog nasljeđivanja JavaScripta poslužit će kao moćan alat u vašem razvojnom arsenalu.

Nastavite istraživati, nastavite učiti i sretno kodiranje!