U ovom ćete tutorijalu uz primjere naučiti o prototipovima u JavaScript-u.
Prije nego što naučite prototipove, provjerite ove upute:
- JavaScript objekti
- Funkcija konstruktora JavaScript-a
Kao što znate, objekt možete stvoriti u JavaScript-u pomoću funkcije konstruktora objekta. Na primjer,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
U gornjem primjeru function Person()je funkcija konstruktora objekta. Stvorili smo dva objekta person1i person2od njega.
JavaScript prototip
U JavaScript-u svaka funkcija i objekt imaju svojstvo koje se prema zadanim postavkama naziva prototip. Na primjer,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
U gornjem primjeru pokušavamo pristupiti svojstvu prototipa Personfunkcije konstruktora.
Budući da svojstvo prototipa trenutno nema vrijednost, prikazuje prazan objekt (…).
Nasljeđivanje prototipa
U JavaScriptu se prototip može koristiti za dodavanje svojstava i metoda u funkciju konstruktora. A objekti nasljeđuju svojstva i metode iz prototipa. Na primjer,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Izlaz
(rod: "muško") muško muško
U gore navedenom programu dodali smo novo svojstvo genderu Personfunkciju konstruktora koristeći:
Person.prototype.gender = 'male';
Zatim objekt person1i person2nasljeđuje svojstvo genderiz svojstva prototipa Personfunkcije konstruktora.
Dakle, oba objekta mogu person1i person2mogu pristupiti rodnom svojstvu.
Napomena: Sintaksa za dodavanje svojstva u funkciju konstruktora objekta je:
objectConstructorName.prototype.key = 'value';
Prototip se koristi za pružanje dodatnih svojstava svim objektima stvorenim iz funkcije konstruktora.
Dodajte metode u funkciju konstruktora pomoću prototipa
Također možete dodati nove metode u funkciju konstruktora pomoću prototipa. Na primjer,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
U gornjem programu, nova metoda greetdodana je u Personfunkciju konstruktora pomoću prototipa.
Promjena prototipa
Ako se promijeni vrijednost prototipa, tada će svi novi objekti imati promijenjenu vrijednost svojstva. Svi prethodno stvoreni objekti imat će prethodnu vrijednost. Na primjer,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Napomena : Ne biste trebali mijenjati prototipove standardnih JavaScript ugrađenih objekata poput nizova, nizova itd. Smatra se lošom praksom.
Lanciranje prototipa JavaScript-a
Ako objekt pokuša pristupiti istom svojstvu koje je u funkciji konstruktora i prototipu objekta, objekt preuzima svojstvo iz funkcije konstruktora. Na primjer,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
U gore navedenom programu, ime svojstva deklarirano je u funkciji konstruktora, a također i u svojstvu prototipa funkcije konstruktora.
Kada se program izvrši, person1.nameu funkciji konstruktora pregledava postoji li neko svojstvo s imenom name. Budući da konstruktorska funkcija ima svojstvo imena s vrijednošću 'John', objekt uzima vrijednost iz tog svojstva.
Kada se program izvrši, person1.ageu funkciji konstruktora pregledava postoji li neko svojstvo s imenom age. Budući da konstruktorska funkcija nema agesvojstvo, program pregledava prototipni objekt konstruktorske funkcije i objekt nasljeđuje svojstvo od prototipskog objekta (ako je dostupan).
Napomena : Također možete pristupiti prototipu svojstva funkcije konstruktora iz objekta.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
U gornjem primjeru personobjekt se koristi za pristup svojstvu prototipa pomoću __proto__. Međutim, __proto__zastario je i trebali biste ga izbjegavati upotrebljavati.
