Apreneu a crear classes a JavaScript

Apreneu a crear classes a JavaScript

El 2015 es va publicar la versió ES6 del llenguatge de programació JavaScript. Aquesta versió va introduir algunes actualitzacions importants del llenguatge i el va situar oficialment en la categoria de llenguatge de programació orientat a objectes entre altres llenguatges com Java i C ++.





La programació orientada a objectes se centra en els objectes i en les operacions que s’hi poden realitzar. Tanmateix, abans de tenir objectes haureu de tenir una classe.





llegeix el meu missatge de text més recent

Les classes de JavaScript són una de les funcions que canvien els jocs que s’inclouen amb la versió ES6 de l’idioma. Una classe es pot descriure com un pla que s’utilitza per crear objectes.





En aquest article de tutorial, aprendreu a crear i manipular objectes mitjançant classes JavaScript.

Estructura de classes JavaScript

Quan creeu una classe a JavaScript, hi ha un component fonamental que sempre necessiteu: el classe paraula clau. Gairebé tots els altres aspectes de la classe JavaScript no són necessaris per a la seva correcta execució.



Una classe JavaScript s’executarà de forma natural si no es proporciona cap constructor (la classe simplement crearà un constructor buit durant l’execució). Tanmateix, si es crea una classe JavaScript amb constructors i altres funcions, però no s'utilitza cap paraula clau de classe, aquesta classe no serà executable.

El classe la paraula clau (que sempre ha d’estar en minúscula) és una necessitat a l’estructura de classes de JavaScript. L'exemple següent és la sintaxi general d'una classe JavaScript. A continuació es mostra la sintaxi de la classe JavaScript:





class ClassName{
//class body
}

Creació d’una classe a JavaScript

En la programació, una classe es pot veure com una entitat generalitzada que s’utilitza per crear un objecte especialitzat. Per exemple, en un entorn escolar, una entitat generalitzada (una classe) pot ser estudiant i un objecte dels estudiants pot ser John Brown. Però abans de crear un objecte, haureu de conèixer les dades que emmagatzemarà i aquí és on entren en joc JavaScript Constructors.

Ús de constructors a les classes de JavaScript

Un constructor és vital per al procés de creació de classes per alguns motius; inicialitza l’estat d’un objecte (a través dels seus atributs) i s’anomena automàticament quan s’instancia (defineix i crea) un objecte nou.





Utilitzant un exemple de constructor

A continuació, veureu un exemple de constructor amb una explicació del que significa.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
}

El codi anterior presenta un aspecte important del constructor de classes JavaScript; a diferència d’altres llenguatges com Java i C ++, el constructor de JavaScript no utilitza el nom de la classe per crear un constructor. Utilitza el fitxer constructor paraula clau com podeu veure a l'exemple anterior.

Relacionat: Apreneu a crear classes a Java

El constructor a l'exemple anterior pren tres paràmetres i utilitza el fitxer això paraula clau per assignar els paràmetres a la instància actual de la classe. Pot semblar una mica confús, però el que heu d’entendre és que una classe es pot veure com un pla que s’utilitza per crear moltes cases.

Totes les cases construïdes es poden veure com un objecte d’aquesta classe. Tot i que cadascuna d’aquestes cases es crea amb el mateix pla, es distingeix per la seva ubicació geogràfica específica o les persones que en són propietàries.

El això La paraula clau s'utilitza per distingir cada objecte creat per una classe. Assegura que s’emmagatzemen i processen les dades correctes per a cada objecte que es crea amb la mateixa classe.

Creació d’un objecte a JavaScript

Els constructors són importants en un llenguatge com JavaScript perquè signifiquen el nombre d’atributs que ha de tenir un objecte d’una classe específica. Alguns idiomes requeriran que es declari un atribut (variable) abans que es pugui utilitzar en un constructor o en qualsevol altre mètode. Tot i això, no és el cas de JavaScript.

Relacionat: Com es poden declarar variables a JavaScript

Observant el constructor de la classe d’alumnes de més amunt, podeu distingir que un objecte d’aquesta classe tindrà tres atributs.

Creació d’un exemple d’objecte

A continuació, veureu un exemple per crear un objecte a JavaScript.

//create a new object
const john = new Student('John', 'Brown', '2018');

El codi anterior utilitza el fitxer Estudiant classe per crear un objecte.

Quan creeu un objecte d'una classe, heu d'utilitzar el fitxer nou paraula clau, seguit del nom de la classe i dels valors que voleu assignar als atributs respectius. Ara teniu un estudiant nou amb el nom John, el cognom Brown i la data d'inici del 2018. També teniu una variable constant: john. Aquesta variable és important perquè us permet utilitzar l’objecte que es crea.

Sense el john variable, encara podreu crear un objecte nou amb el fitxer Estudiant class, però després no hi haurà manera d’accedir a aquest objecte i d’utilitzar-lo amb els diferents mètodes de la classe.

Ús de mètodes en classes JavaScript

Un mètode és una funció d'una classe que s'utilitza per realitzar operacions sobre objectes creats a partir de la classe. Un bon mètode per afegir a la classe dels estudiants és el que genera un informe sobre cada alumne.

Exemple de creació de mètodes de classe

A continuació es mostra un exemple per crear mètodes de classe a JavaScript.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
}

La classe anterior conté un mètode que generarà un informe sobre cada estudiant creat amb Estudiant classe. Per utilitzar el fitxer report () mètode haureu d’utilitzar un objecte existent de la classe per fer una trucada de funció simple.

Gràcies a l'exemple anterior de crear un objecte, hauríeu de tenir un objecte de Estudiant classe assignada a la variable john . Utilitzant john , ara podeu trucar amb èxit al report () mètode.

Exemple d’ús de mètodes de classe

A continuació es mostra un exemple d’ús de mètodes de classe a JavaScript.

//create a new object
const john = new Student('John', 'Brown', '2018');
//calling the report method and storing its result in a variable
let result = john.report();
//printing the result to the console
console.log(result);

El codi anterior utilitza el fitxer Estudiants class per produir la següent sortida a la consola:

John Brown started attending this institution in 2018

Ús de mètodes estàtics a les classes de JavaScript

Els mètodes estàtics són únics perquè són els únics mètodes d’una classe JavaScript que es poden utilitzar sense objecte.

De l'exemple anterior, no podeu utilitzar el fitxer report () mètode sense objecte de la classe. Això es deu al fet que report () El mètode es basa en els atributs d'un objecte per produir un resultat desitjable. Tot i això, per utilitzar un mètode estàtic, només necessitareu el nom de la classe que emmagatzema el mètode.

Creació d’un exemple de mètode estàtic

A continuació es mostra un exemple de mètode estàtic per a JavaScript.

class Student{
constructor(firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// report method
report(){
return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
}
//static method
static endDate(startDate){
return startDate + 4;
}
}

L'important que cal tenir en compte de l'exemple anterior és que tots els mètodes estàtics comencen per estàtic paraula clau.

Mitjançant un exemple de mètode estàtic

A continuació es mostra un exemple per utilitzar un mètode estàtic a JavaScript.

//calling a static method and printing its result to the console
console.log(Student.endDate(2018));

La línia de codi anterior utilitza el fitxer Estudiants class per produir la següent sortida a la consola:

2022

Crear una classe JavaScript és fàcil

Hi ha diverses coses que cal recordar si voleu crear una classe JavaScript i crear-ne un o més objectes:

  • Una classe JavaScript ha de tenir el fitxer classe paraula clau.
  • Un constructor de JavaScript indica el nombre de valors que pot tenir un objecte.
  • Els mètodes generals de classe no es poden utilitzar sense un objecte.
  • Es poden utilitzar mètodes estàtics sense objecte.

El consola . registre() Aquest mètode s'utilitza al llarg d'aquest article per proporcionar els resultats d'utilitzar tant els mètodes generals com els estàtics en una classe JavaScript. Aquest mètode és una eina útil per a qualsevol desenvolupador de JavaScript, ja que ajuda en el procés de depuració.

Familiaritzant-vos amb el console.log () mètode és una de les coses més importants que podeu fer com a desenvolupador de JavaScript.

Compartir Compartir Tweet Correu electrònic El full de trucs de JavaScript definitiu

Obteniu una actualització ràpida dels elements de JavaScript amb aquest full de trucs.

Llegiu a continuació
Temes relacionats
  • Programació
  • Programació
  • JavaScript
  • Consells de codificació
  • Tutorials de codificació
Sobre l'autor Kadeisha Kean(21 articles publicats)

Kadeisha Kean és un desenvolupador de programari complet i escriptor tècnic / tecnològic. Té la capacitat diferent de simplificar alguns dels conceptes tecnològics més complexos; la producció de material fàcilment comprensible per a qualsevol novell en tecnologia. L’apassiona escriure, desenvolupar programes interessants i viatjar pel món (a través de documentals).

Més de Kadeisha Kean

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us