Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript prototípusait.
Mielőtt megtanulja a prototípusokat, ellenőrizze ezeket az oktatóanyagokat:
- JavaScript objektumok
- JavaScript konstruktor funkció
Mint tudják, objektumkészítő függvény segítségével létrehozhat egy objektumot a JavaScript-ben. Például,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
A fenti példában function Person()egy objektum konstruktor függvény. Két tárgyat hoztunk létre person1és person2abból.
JavaScript prototípus
A JavaScript-ben minden függvény és objektum alapértelmezés szerint rendelkezik prototípus nevű tulajdonsággal. Például,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
A fenti példában megpróbálunk hozzáférni egy Personkonstruktor függvény prototípus tulajdonságához .
Mivel a prototípus tulajdonságnak jelenleg nincs értéke, üres objektumot mutat (…).
Prototípus öröklés
A JavaScript-ben prototípus használható tulajdonságok és módszerek hozzáadásához a konstruktor függvényéhez. Az objektumok pedig a tulajdonságokat és módszereket egy prototípustól öröklik. Például,
// 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);
Kimenet
(nem: "férfi") férfi férfi
A fenti programban új tulajdonságot adtunk hozzá gendera Personkonstruktor függvényhez:
Person.prototype.gender = 'male';
Ezután objektiválja person1és person2örökölje a tulajdonságot gendera Personkonstruktor funkció prototípus tulajdonságából .
Ezért mindkét objektum person1és person2hozzáférhet a gender tulajdonsághoz.
Megjegyzés: A tulajdonság hozzáadása egy objektum-készítő függvényhez a következő:
objectConstructorName.prototype.key = 'value';
A prototípust arra használják, hogy további tulajdonságokat biztosítson a konstruktor függvényből létrehozott összes objektum számára.
Metódusok hozzáadása a konstruktor funkcióhoz prototípus használatával
Új módszereket is hozzáadhat egy konstruktor függvényhez prototípus segítségével. Például,
// 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
A fenti programban egy új módszert greetadunk a Personkonstruktor funkcióhoz prototípus felhasználásával.
Prototípus módosítása
Ha egy prototípus értéket megváltoztatnak, akkor az összes új objektum megváltoztatja a tulajdonság értékét. Az összes korábban létrehozott objektumnak meg lesz az előző értéke. Például,
// 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
Megjegyzés : Nem szabad módosítania a szokásos JavaScript beépített objektumok, például karaktersorozatok, tömbök stb. Prototípusait. Ez rossz gyakorlatnak számít.
JavaScript prototípus láncolás
Ha egy objektum megpróbálja elérni ugyanazt a tulajdonságot, amely a konstruktor függvényben van, és a prototípus objektumot, akkor az objektum elveszi a tulajdonságot a konstruktor függvénytől. Például,
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
A fenti programban egy tulajdonság nevet deklarálunk a konstruktor függvényben és a konstruktor függvény prototípus tulajdonságában is.
Amikor a program végrehajtódik, person1.namekeresse meg a konstruktor funkciót, hogy van-e megnevezett tulajdonság name. Mivel a konstruktor függvény a név tulajdonsággal rendelkezik értékkel 'John', az objektum értéket vesz fel attól a tulajdonságtól.
Amikor a program végrehajtódik, person1.agekeresse meg a konstruktor funkciót, hogy van-e megnevezett tulajdonság age. Mivel a konstruktor függvénynek nincs agetulajdonsága, a program megvizsgálja a konstruktor függvény prototípus objektumát, és az objektum örököl tulajdonságot a prototípus objektumtól (ha rendelkezésre áll).
Megjegyzés : A konstruktor függvény prototípus tulajdonságát objektumból is elérheti.
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 )
A fenti példában egy personobjektumot használunk a prototípus tulajdonság eléréséhez __proto__. Ugyanakkor __proto__elavult, ezért kerülje a használatát.
