Madame Lelica

Bevezetés

JavaScript egy prototípus-alapú nyelv, és minden objektum JavaScript van egy rejtett belső tulajdonság az úgynevezett ] hogy lehet használni, hogy kiterjeszti objektum tulajdonságait és módszereit. További részletek a prototípusok megértésében prototípusok öröklés JavaScript bemutató.

egészen a közelmúltig a szorgalmas Fejlesztők konstruktor funkciókat használtak egy objektumorientált tervezési minta utánzására a JavaScriptben., A nyelv specifikáció ECMAScript 2015, gyakran nevezik ES6, bevezetett osztályok a JavaScript nyelvet. A JavaScript osztályok valójában nem kínálnak további funkciókat, és gyakran úgy írják le, hogy “szintaktikai cukrot” biztosítanak a prototípusok és az öröklés felett, mivel tisztább és elegánsabb szintaxist kínálnak. Mivel más programozási nyelvek osztályokat használnak, a JavaScript osztályszintaxisa egyszerűbbé teszi a fejlesztők számára a nyelvek közötti mozgást.

osztályok funkciók

a JavaScript osztály egy típusú függvény., Az osztályokat a class kulcsszóval kell megadni. A függvény kifejezés szintaxisát használjuk egy függvény inicializálására, az osztály kifejezés szintaxisát pedig egy osztály inicializálására.

// Initializing a function with a function expressionconst x = function() {}

// Initializing a class with a class expressionconst y = class {}

elérhetjük egy objektum ]Object.getPrototypeOf() metódusát. Használjuk ezt az általunk létrehozott üres funkció tesztelésére.

Object.getPrototypeOf(x);

Output
ƒ () { }

ezt a módszert az éppen létrehozott osztályban is használhatjuk.,

Object.getPrototypeOf(y);

Output
ƒ () { }

a function és class mindkettő visszaad egy függvényt ]. A prototípusok esetén bármely függvény konstruktorpéldány lehet a new kulcsszó használatával.

Output
x {}constructor: ƒ ()

Ez az osztályokra is vonatkozik.

Output
y {}constructor: class

ezek a prototípus konstruktor példák egyébként üresek, de láthatjuk, hogy a szintaxis alatt mindkét módszer ugyanazt a végeredményt éri el.,

egy osztály meghatározása

a prototípusok és az öröklés oktatóanyagban létrehoztunk egy példát a karakter létrehozása körül egy szöveg alapú szerepjáték játékban. Folytassuk ezt a példát itt, hogy frissítsük a szintaxist a funkciókról az osztályokra.

A kivitelező a funkciót elindítva a paraméterek száma, ami rendelni, mint tulajdonságai this, utalva a funkció is. Az azonosító első betűjét konvencióval nagyítanák ki.

// Initializing a constructor functionfunction Hero(name, level) { this.name = name; this.level = level;}

amikor lefordítjuk ezt az osztály szintaxisára, az alábbiakban látható, azt látjuk, hogy nagyon hasonlóan van felépítve.

// Initializing a class definitionclass Hero { constructor(name, level) { this.name = name; this.level = level; }}

tudjuk, hogy a konstruktor függvény objektum tervrajznak minősül az inicializáló első betűjének (amely opcionális) nagybetűjével, valamint a szintaxis megismerésével. Aclass kulcsszó egyszerűbben közli funkciónk célját.,

az inicializálás szintaxisának egyetlen különbsége a class kulcsszó használata a function helyett, valamint a tulajdonságok hozzárendelése a constructor() módszerhez.

Meghatározó Módszerek

A közös gyakorlat a kivitelező funkciók hozzárendelése módszerek közvetlenül a prototype ahelyett, hogy az inicializálás, mint a greet() módszert.

osztályokkal ez a szintaxis egyszerűsödik, a módszer pedig közvetlenül hozzáadható az osztályhoz., Az ES6-ban bevezetett módszerdefiníció gyorsírásával a módszer meghatározása még tömörebb folyamat.

vessünk egy pillantást ezekre a tulajdonságokra és módszerekre. A Hero új példányát a new kulcsszóval hozzuk létre, majd hozzárendelünk néhány értéket.

const hero1 = new Hero('Varg', 1);

Ha további információkat nyomtatunk ki az új objektumunkról a console.log(hero1) segítségével, további részleteket láthatunk arról, hogy mi történik az osztály inicializálásával.,

Output
Hero {name: "Varg", level: 1}__proto__: ▶ constructor: class Hero ▶ greet: ƒ greet()

a kimenetben láthatjuk, hogy a constructor() és greet() a __proto__ vagy ] of hero1, és nem közvetlenül a hero1 objektum módszereként. Bár ez egyértelmű, ha így konstruktor funkciók, ez nem nyilvánvaló létrehozása közben osztályok. Az osztályok lehetővé teszik az egyszerűbb és tömörebb szintaxist, de feláldoznak némi tisztaságot a folyamatban.,

egy osztály kiterjesztése

a konstruktor függvények és osztályok előnyös tulajdonsága, hogy a szülő alapján új objektum tervrajzokká bővíthetők. Ez megakadályozza a hasonló objektumok kódjának ismétlését, de további vagy konkrétabb funkciókra van szükség.

új konstruktor függvények hozhatók létre a szülő segítségével call() módszer., Az alábbi példában létrehozunk egy speciális karakterosztályt, melynek neve Mage, és hozzárendeljük a Herotulajdonságait a call() használatával, valamint egy további tulajdonság hozzáadásával.

Ezen a ponton létrehozhatunk egy új példányt a Mage ugyanazokkal a tulajdonságokkal, mint a Hero, valamint egy újat, amelyet hozzáadtunk.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

Küldés hero2 a konzolra, láthatjuk, hogy létrehoztunk egy új Mage alapján ki a konstruktor.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: ▶ constructor: ƒ Mage(name, level, spell)

az ES6 osztályokkal a super kulcsszót a call helyett használják a szülő funkciók eléréséhez. Aextends értéket használjuk a szülőosztályra való hivatkozáshoz.

most már létrehozhat egy új Mage példány azonos módon.,

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

nyomtatni fogjuk a hero2 – ot a konzolra, és megtekintjük a kimenetet.

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}__proto__: Hero ▶ constructor: class Mage

a kimenet közel pontosan ugyanaz, kivéve, hogy az osztályszerkezetben a ] kapcsolódik a szülőhöz, ebben az esetben Hero.

Az alábbiakban a konstruktorfüggvény és az osztály teljes inicializálási folyamatának egymás melletti összehasonlítása, módszerek hozzáadása, öröklése.

bár a szintaxis egészen más, a mögöttes eredmény közel azonos mindkét módszer között. Az osztályok tömörebb módszert adnak az objektum tervrajzok létrehozására, a konstruktor funkciók pedig pontosabban leírják, mi történik a motorháztető alatt.

következtetés

ebben a bemutatóban megismertük a JavaScript konstruktor függvények és az ES6 osztályok közötti hasonlóságokat és különbségeket. Mind az osztályok, mind a konstruktorok objektumorientált öröklési modellt utánoznak a JavaScriptre, amely prototípus alapú öröklési nyelv.,

a prototípus öröklés megértése elengedhetetlen ahhoz, hogy hatékony JavaScript fejlesztő legyen. Az osztályok ismerete rendkívül hasznos, mivel a népszerű JavaScript könyvtárak, mint például a React, gyakran használják a class szintaxist.