Objektumorientált programozás JavaScript-ben-példákkal magyarázva

a JavaScript nem osztályalapú objektum-orientált nyelv. De még mindig van módja az objektumorientált programozás (OOP) használatának.

ebben az oktatóanyagban elmagyarázom az OOP-t, és megmutatom, hogyan kell használni.

a Wikipedia szerint az osztályalapú programozás

az objektumorientált programozás (OOP) stílusa, amelyben az öröklés az objektumok osztályainak meghatározásán keresztül történik, ahelyett, hogy az öröklés csak az objektumokon keresztül történne

az OOP legnépszerűbb modellje az osztályalapú.

de mint említettem, a JavaScript nem osztályozott alapú langauge-ez egy prototípus alapú langauge.

a Mozilla dokumentációja szerint:

a prototípus-alapú nyelvnek van egy prototípus-objektum fogalma, egy olyan objektum, amelyet sablonként használnak, amelyből egy új objektum kezdeti tulajdonságait megkaphatja.

vessen egy pillantást erre a kódra:

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

az objektumváltozónak names csak két tulajdonsága van – fname és lname . Egyáltalán nincs módszer.

tehát honnan származik a hasOwnProperty?

Nos, a Object prototípusból származik.

próbálja meg naplózni a változó tartalmát a konzolba:

console.log(names);

amikor kibontja az eredményeket a konzolban, ezt kapja:

figyeljük meg az utolsó tulajdonság – __proto__? Próbálja meg bővíteni:

a tulajdonságok halmazát a konstruktor. Mindezek a tulajdonságok a globális Object prototípusból származnak. Ha alaposan megnézed, észre fogod venni a rejtett hasOwnProperty .

más szavakkal, minden objektum hozzáfér a Object prototípusához. Nem rendelkeznek ezekkel a tulajdonságokkal, de hozzáférést kapnak a prototípus tulajdonságaihoz.

a _ _ proto _ _ tulajdonság

Ez a prototípusként használt objektumra mutat.

Ez a tulajdonság minden objektumon, amely hozzáférést biztosít a Object prototype tulajdonsághoz.

alapértelmezés szerint minden objektum rendelkezik ezzel a tulajdonsággal, amely aObject Protoype – re utal, kivéve, ha másként van konfigurálva (vagyis amikor az objektum__proto__ egy másik prototípusra mutat).

a __proto__ tulajdonság módosítása

Ez a tulajdonság módosítható úgy, hogy kifejezetten kijelenti, hogy egy másik prototípusra kell hivatkoznia. Ennek eléréséhez a következő módszereket használjuk:

objektum.create()

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

a konzolban ez lenne a következő:

figyeljük meg a __proto__ tulajdonság és a speak módszer?

Object.create a neki átadott argumentumot használja prototípusként.

új kulcsszó

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john‘s __proto__ a tulajdonság a DogObjectprototípusára irányul. De ne feledd, DogObjectprototípusa egy objektum (kulcs és érték pár), ezért van egy __proto__ tulajdonsága, amely a globális Object protoype-ra utal.

ezt a technikát prototípus LÁNCOLÁSNAK nevezik.

vegye figyelembe, hogy: anew kulcsszó megközelítés ugyanazt teszi, mint aObject.create(), de csak megkönnyíti, mivel bizonyos dolgokat automatikusan megtesz az Ön számára.

és így tovább…

a Javascript minden objektumának alapértelmezés szerint hozzáférése van aObjectprototípusához. Ha egy másik prototípus használatára van konfigurálva, mondjuk prototype2, akkor a prototype2 alapértelmezés szerint az objektum prototípusához is hozzáférhet, és így tovább.

Object + Function Combination

valószínűleg megzavarja az a tény, hogy DogObject egy függvény (function DogObject(){}), és tulajdonságai pont jelöléssel érhetők el. Ezt nevezzük függvényobjektum-kombinációnak.

amikor a függvényeket deklarálják, alapértelmezés szerint sok tulajdonságot kapnak hozzá. Ne feledje, hogy a funkciók a JavaScript adattípusokban is objektumok.

most, osztály

JavaScript bevezette aclass kulcsszó ECMAScript 2015. A JavaScript úgy tűnik, mint egy OOP nyelv. De ez csak szintatikus cukor a meglévő prototípus-technika felett. A háttérben folytatja prototípuskészítését, de a külső testet úgy néz ki, mint az OOP. Most megnézzük, hogyan lehetséges ez.

a következő példa a class általános használata JavaScript-ben:

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Ez az eredmény a konzolban:

a __proto__ a Animals prototípusra hivatkozik (ami viszont a Object prototípusra hivatkozik).

ebből láthatjuk, hogy a konstruktor meghatározza a főbb jellemzőket, míg a konstruktoron kívül minden (sing() és dance()) a bónusz funkciók (prototípusok).

a háttérben, a new kulcsszó megközelítés, a fenti fordításban:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

alosztály

Ez egy olyan funkció az OOP-ban, ahol egy osztály örökölt funkciókat egy szülő osztálytól, de olyan extra funkciókkal rendelkezik, amelyeket a szülő nem.

Az ötlet itt például az, hogy, tegyük fel, hogy Macskaosztályt szeretne létrehozni. Ahelyett, hogy az osztályt a semmiből hozná létre – a név, az életkor és a faj tulajdonságának újbóli megadása, ezeket a tulajdonságokat a szülőállatok osztályától örökölné.

Ez a macska osztály ezután extra tulajdonságokkal rendelkezik, mint például a bajusz színe.

nézzük meg, hogyan készülnek az alosztályok a classsegítségével.

itt szükségünk van egy szülőre, akitől az alosztály örököl. Vizsgálja meg a következő kódot:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

a fentiekkel a következő kimeneteket kapjuk:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

amikor a Clara tartalmát bejelenti a konzolon, a következőkkel rendelkezünk:

észre fogod venni, hogy a clara rendelkezik egy __proto__ tulajdonsággal, amely a konstruktorra hivatkozik Cats és hozzáférést kap a whiskers() módszer. Ennek a __proto__ tulajdonságnak van egy __proto__ tulajdonsága, amely a konstruktorra hivatkozik Animals ezáltal hozzáférést kap a sing() és dance()name és age olyan tulajdonságok, amelyek minden ebből létrehozott objektumon léteznek.

a Object.create módszer megközelítés, a fenti fordításban:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"

Object.setPrototypeOf egy olyan módszer, amely úgy két argumentum – az objektum (első argumentum) és a kívánt prototípus (második argumentum).

A fentiekből aAnimals függvény egy objektumot ad vissza, amelynek prototípusa aanimalConstructor. ACats függvény egy objektumot ad visszacatConstructor prototípusként. catConstructormásrészt a animalConstructor prototípusát kapja.

ezért a közönséges állatok csak a animalConstructor – hez férhetnek hozzá, de a macskák hozzáférhetnek a catConstructor és a animalConstructor – hez.

becsomagolás

a JavaScript kihasználja prototípus jellegét, hogy üdvözölje az OOP fejlesztőit ökoszisztémájában. Ezenkívül egyszerű módszereket kínál prototípusok létrehozására és a kapcsolódó adatok rendezésére.

a valódi OOP nyelvek nem végeznek prototípus – készítést a háttérben-csak vegye figyelembe ezt.

nagy köszönet Will Sentance tanfolyamának a Frontend Masters – JavaScript-en: az objektumorientált JavaScript kemény részei. Mindent megtanultam, amit ebben a cikkben lát (plusz egy kis extra kutatás) a tanfolyamából. Meg kéne nézned.

akkor üss fel a Twitteren iamdillion bármilyen kérdése vagy hozzájárulások.

köszönöm az olvasást 🙂