Madame Lelica

Introducere

JavaScript este un prototip bazat pe limbă, și fiecare obiect în JavaScript are o ascunse interne proprietate numita ] care pot fi utilizate pentru a extinde obiectul de proprietăți și metode. Puteți citi mai multe despre prototipuri în înțelegerea noastră prototipuri și moștenire în tutorial JavaScript.până de curând, dezvoltatorii harnici foloseau funcții de constructor pentru a imita un model de design orientat pe obiecte în JavaScript., Specificația de limbă ECMAScript 2015, adesea menționată ca ES6, a introdus clase în limba JavaScript. Clasele din JavaScript nu oferă de fapt funcționalități suplimentare și sunt adesea descrise ca oferind „zahăr sintactic” peste prototipuri și moștenire prin faptul că oferă o sintaxă mai curată și mai elegantă. Deoarece alte limbaje de programare folosesc clase, sintaxa clasei în JavaScript face mai simplu pentru dezvoltatori să se deplaseze între limbi.

clasele sunt funcții

o clasă JavaScript este un tip de funcție., Clasele sunt declarate cu class cuvânt cheie. Vom folosi sintaxa expresiei funcției pentru a inițializa o funcție și sintaxa expresiei clasei pentru a inițializa o clasă.

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

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

putem accesa ] de un obiect folosind Object.getPrototypeOf() metoda. Să folosim asta pentru a testa funcția goală pe care am creat-o.

Object.getPrototypeOf(x);

Output
ƒ () { }

putem folosi această metodă și pe clasa pe care tocmai am creat-o.,

Object.getPrototypeOf(y);

Output
ƒ () { }

cod declarat cu function și class ambele reveni o funcție ]. Cu prototipuri, orice funcție poate deveni o instanță constructor folosind new cuvânt cheie.

Output
x {}constructor: ƒ ()

Acest lucru este valabil și pentru clase.

Output
y {}constructor: class

aceste exemple de constructor prototip sunt altfel goale, dar putem vedea cum sub sintaxa, ambele metode obțin același rezultat final.,

definirea unei clase

în tutorialul prototipuri și moștenire, am creat un exemplu bazat pe crearea de caractere într-un joc de rol bazat pe text. Să continuăm cu acest exemplu aici pentru a actualiza sintaxa de la funcții la clase.

o funcție constructor este inițializată cu un număr de parametri, care ar fi atribuite ca proprietăți ale this, referindu-se la funcția în sine. Prima literă a identificatorului va fi capitalizată prin convenție.

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

când traducem acest lucru în sintaxa clasei, prezentată mai jos, vedem că este structurată foarte similar.

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

știm că o funcție constructor este menit să fie un obiect plan de capitalizare de prima literă a inițializare (care este opțională) și prin familiarizarea cu sintaxa. Cuvântul cheieclass comunică într-un mod mai simplu obiectivul funcției noastre.,

singura diferență în sintaxa de inițializare este folosind class cuvinte cheie în loc de function, și atribuirea de proprietăți în interiorul unui constructor() metoda.

Definirea Metodelor

practica comună cu constructorul funcții este de a atribui metode direct la prototype în loc de inițializare, după cum se vede în greet() metoda de mai jos.

cu clase această sintaxă este simplificată, iar metoda poate fi adăugată direct la clasă., Folosind prescurtarea definiției metodei introdusă în ES6, definirea unei metode este un proces și mai concis.

Să aruncăm o privire la aceste proprietăți și metode în acțiune. Vom crea o nouă instanță deHero folosindnew cuvânt cheie, și atribui unele valori.

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

Dacă ne-am imprima mai multe informații despre noul nostru obiect cu console.log(hero1), putem vedea mai multe detalii despre ceea ce se întâmplă cu clasa de inițializare.,

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

putem vedea la ieșire că constructor() și greet() funcții au fost aplicate __proto__ sau ] de hero1, și nu direct ca o metodă pe hero1 obiect. Deși acest lucru este clar atunci când faceți funcții de constructor, nu este evident în timp ce creați clase. Clasele permit o sintaxă mai simplă și mai succintă, dar sacrifică o anumită claritate în acest proces.,

extinderea unei clase

o caracteristică avantajoasă a funcțiilor și claselor constructorului este că acestea pot fi extinse în noi planuri de obiecte bazate pe părinte. Acest lucru previne repetarea de cod pentru obiecte care sunt similare, dar au nevoie de unele caracteristici suplimentare sau mai specifice.

noile funcții de constructor pot fi create de la părinte folosind metoda call()., În exemplul de mai jos, vom crea un personaj specific de clasă numit Mage, și atribui proprietăți de Hero prin call(), precum și adăugarea de o suplimentare de proprietate.

În acest punct, putem crea o nouă instanță a Mage folosind aceleași proprietăți ca Hero la fel de bine ca unul nou, am adăugat.,

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

Trimiterea hero2 la consola, putem vedea, am creat un nou Mage bazat pe constructor.

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

Cu ES6 clase, super cuvânt cheie este folosit în loc de call pentru a accesa funcții părinte. Vom folosi extends pentru a ne referi la clasa părinte.

acum putem crea un nouMage instanță în același mod.,

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

vom imprima hero2 în consolă și vom vizualiza ieșirea.

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

ieșire este aproape exact la fel, cu excepția faptului că în clasă construcții ] este legat de mamă, în acest caz Hero.mai jos este o comparație alăturată a întregului proces de inițializare, adăugare de metode și moștenire a unei funcții de constructor și a unei clase.

deși sintaxa este destul de diferită, rezultatul de bază este aproape același între ambele metode. Clasele ne oferă un mod mai concis de a crea planuri de obiecte, iar funcțiile constructorului descriu mai exact ce se întâmplă sub capotă.

concluzie

În acest tutorial, am aflat despre asemănările și diferențele dintre funcțiile JavaScript constructor și clasele ES6. Atât clasele, cât și Constructorii imită un model de moștenire orientat pe obiecte în JavaScript, care este un limbaj de moștenire bazat pe prototip.,

înțelegerea moștenirii prototipice este esențială pentru a fi un dezvoltator JavaScript eficient. Familiarizarea cu Clasele este extrem de utilă, deoarece bibliotecile JavaScript populare, cum ar fi React, utilizează frecvent sintaxa class.