JavaScript Prototypal Inheritance

Összefoglaló: ebben a bemutatóban megtanulod, hogyan működik a JavaScript prototípusos öröklés.

Bevezetés a JavaScript prototípusos öröklésbe

Ha dolgoztál már más objektumorientált programozási nyelvekkel, például a Javával vagy a C++-val, akkor már ismered az öröklés koncepcióját.

Ebben a programozási paradigmában az osztály egy tervrajz az objektumok létrehozásához. Ha azt szeretnénk, hogy egy új osztály újra felhasználja egy meglévő osztály funkcionalitását, létrehozhatunk egy új osztályt, amely kiterjeszti a meglévő osztályt. Ezt nevezzük klasszikus öröklésnek.

A JavaScript nem használ klasszikus öröklést. Ehelyett prototípusos öröklést használ.

A prototípusos öröklésben egy objektum tulajdonságokat “örököl” egy másik objektumtól a prototípuskapcsolaton keresztül.

JavaScript prototípusos öröklés és __proto__

Vegyünk egy példát, hogy érthetőbbé tegyük a fogalmat.

A következőkben egy person objektumot definiálunk:

Code language: JavaScript (javascript)

A person objektumnak két tulajdonsága van:

• name amely egy string értéket tartalmaz.
• greet amely egy értéket tartalmaz, amely történetesen egy függvény. A greet a person objektum metódusaként ismert.

A JavaScript alapértelmezés szerint egy Object() függvényt és egy prototípus objektumot biztosít, amely a Object() függvény prototype tulajdonságán keresztül érhető el:

Ha egy objektum meghatározásához az objektum literál szintaxist használjuk, az objektum a Object példánya. Ezért a person instanceof Object kifejezés true:

Code language: JavaScript (javascript)

Kimenet:

Code language: JavaScript (javascript)

A person objektum a ] kötésen keresztül a Object.prototype objektumhoz is kapcsolódik.

Más szóval a person objektumon keresztül a Object.prototype objektum bármely tulajdonságához hozzáférhetünk. Például:

Code language: JavaScript (javascript)

Kimenet:

Code language: JavaScript (javascript)

A az alapértelmezett konverzió egy objektumból stringgé.

Az person objektumon a toString() metódus hívásakor a JavaScript nem találja meg. Ezért a JavaScript követi a prototípusláncot, és a Object.prototype objektumon keresi a metódust. A JavaScript megtalálja a toString() metódust a Object.prototype objektumon, és végrehajtja.

A person objektum prototípusának eléréséhez használhatjuk a __proto__ tulajdonságát:

Code language: JavaScript (javascript)

Kimenet:

Code language: JavaScript (javascript)

A következőkben egy másik, teacher nevű objektumot definiálunk. A teacher objektum rendelkezik a teach() metódussal:

Code language: JavaScript (javascript)

Ha azt szeretnénk, hogy a teacher objektum hozzáférjen a person objektum összes tulajdonságához, akkor a teacher objektum prototípusát a person objektumra állíthatjuk:

Code language: JavaScript (javascript)

Figyeljen arra, hogy a __proto__-t soha ne használja a gyártási kódban. Ez csak tanulási és megértési célokat szolgál.

Most a teacher objektum a person objektum name tulajdonságához és greet() metódusához férhet hozzá a prototípusláncon keresztül:

Code language: JavaScript (javascript)

Kimenet:

Code language: JavaScript (javascript)

Mikor a greet() metódust hívjuk a teacher objektumon, a JavaScript először a teacher objektumon találja meg.

Mivel a JavaScript nem találja a metódust a teacher objektumon, követi a prototípusláncot, és a person objektumon keresi a metódust. Ezúttal a JavaScript megtalálja a metódust a person objektumon, és végrehajtja a greet() metódust.

A JavaScriptben azt mondjuk, hogy a teacher objektum örökli a person objektum tulajdonságait. Ez pedig a prototípusos öröklés.

A prototípusos öröklés megvalósításának szabványos módja az ES5-ben

Az ES5 szabványos módot biztosított a prototípusos örökléssel való munkához a Object.create() metódus használatával.

Megjegyezzük, hogy most már az újabb ES6 class és extends kulcsszavakat kell használni az öröklés megvalósításához. Ez sokkal egyszerűbb.

A Object.create() módszer létrehoz egy új objektumot, és egy meglévő objektumot használ az új objektum prototípusaként:

Code language: JavaScript (javascript)

A Object.create() módszer két argumentumot fogad el:

• Az első argumentum (proto) az új objektum prototípusaként használt objektum.
• A második argumentum (propertiesObject), ha megadjuk, egy opcionális objektum, amely az új objektum további tulajdonságait határozza meg.

Tegyük fel, hogy van egy person objektum:

Code language: JavaScript (javascript)

A következőkben létrehozunk egy üres teacher objektumot a person objektum __proto__-ével:

Code language: JavaScript (javascript)

Ezután definiálhatjuk a teacher objektum tulajdonságait:

Code language: JavaScript (javascript)

Vagy mindezeket a lépéseket egyetlen utasításban is elvégezhetjük a következőképpen:

Code language: JavaScript (javascript)

Az ES5 bevezette a Object.getPrototypeOf() metódust is, amely visszaadja egy objektum prototípusát. Például:

Code language: JavaScript (javascript)

Kimenet:

Code language: JavaScript (javascript)

Summary

• Az öröklés lehetővé teszi, hogy egy objektum egy másik objektum tulajdonságait és módszereit használja.
• A JavaScript prototípusos öröklést használ, amelyet a prototípusok összekapcsolásával érünk el.

.