Las clases en JavaScript, al igual que los objetos y las funciones, son una parte fundamental de la sintaxis de este lenguaje de programación. Con ellas, podemos crear distintos objetos con características específicas, permitiéndonos crear un código más eficiente. Por ello, en este post, te enseñaremos qué son las clases en JavaScript y cómo escribirlas.
¿Qué son las clases en JavaScript?
Para entender qué son las clases en JavaScript o, dicho de otro modo, las javascript class , podemos pensar en cómo jugábamos con la plastilina cuando éramos pequeños. Con ella, a veces teníamos moldes que nos permitían convertir un bloque de plastilina en formas divertidas y únicas. Pues este juego funciona de manera similar a las clases en JavaScript, el donde la plastilina es el objeto y el molde es la clase. Entonces, con una sola clase podemos crear varios objetos.
En términos de programación, el body o cuerpo de la clase es lo que definirá el comportamiento de los objetos que crearemos con ella.
Ahora sabes que es una clase en js . A continuación, te enseñamos las distintas maneras de escribir una clase en JavaScript.
¿Cómo se escriben las clases en JavaScript?
Existen dos maneras de realizar clases en JavaScript. Por un lado, tenemos la manera tradicional o funcional, que se realiza por medio del prototipo que hemos introducido en nuestro post sobre los objetos en JavaScript. Por otro lado, tenemos la semántica un poco más moderna que utiliza la palabra clave class. Esta última puede resultarte más cercana si estás familiarizado con otros lenguajes de programación, como PHP, Python y Java. Esto quiere decir que esta manera es mucho más cross-language.
Ambas maneras de escribir clases en JavaScript definen, a través de una serie de keywords, el comportamiento de un objeto. Además, una clase siempre se compone de dos cosas: propiedades y métodos. Las propiedades son las variables, mientras que los métodos serán las funciones que le insertemos.
A continuación, te explicamos las diferencias entre las formas de escritura.
palabra clave class
Además de las propiedades y métodos, esta forma moderna de escribir una clase en JavaScript requiere del objeto constructor. Este objeto le dice al programa que, cada vez que cree un nuevo objeto de esta clase, debe ejecutar el código dentro del constructor. Además, dentro de esta metodología podemos crear métodos estáticos usando la palabra clave static y podemos manipular las variables con los elementos get y set, también conocidos en JavaScript como getters y setters.
Ahora, te mostramos un pedazo de código en la que escribimos las clases en JavaScript usando este método:
// que es una clase javascript
class Team {
constructor (name) {
this.name = name;
this.players = [ ]
}
play ( ) {
console.log (‘${this.name} is playing!’);
}
train ( ) {
console.log (‘${this.name} is training!’);
}
static info ( ) {
console.log (‘This is an static method’)
}
get sqad ( ) {
return this.players.join (‘,’)
}
set squad (players) {
this.players = [ ]
for (const player of players) {
this.players.push (player.name)
}
En el trozo de código anterior, las propiedades son name y players, mientras que los métodos son play y train. A continuación, te mostramos cómo se escribe el mismo trozo usando el método funcional.
método funcional
Al igual que en el método anterior, en el siguiente trozo de código existe una clase Team, que dentro tiene propiedades name y los métodos play y train.
Ten en cuenta que, a diferencia de otros elementos, las clases suelen nombrarse usando la mayúscula como inicio. Esto es una convención de escritura conocida como UpperCamelCase.
function Team (name) {
this.name = name;
this.play = function () {
console.lof (‘${this.name is playing!’);
}
}
Team.prototype.train = function ( ) {
console.log (‘${this.name is training!’);
}
const bulls = new Team (‘Chicago Bulls’);
bulls.play ()
bulls.train ()
La diferencia entre crear funciones usando el acceso al prototipo o prototype de este método o hacerlo de modo explícito, como en el anterior ejemplo, es que este último altera el prototipo y puede llevarnos a alterar el molde. Aunque esto puede ser útil para crear metafuncionalidades, te recomendamos empezar usando el método de la keyword class, porque nos permite ver el código de manera más estricta y ordenada.
¿Cuál es el siguiente paso?
Después de leer este post, no solo has aprendido qué son las clases en JavaScript y cómo se diferencian sus métodos de escritura, sino que también has dado un paso en tu camino tecnológico donde la meta es dominar este lenguaje de programación. Ahora, el siguiente paso es dedicarte por completo a aprender sobre JavaScript desde la teoría hasta la práctica. Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar este lenguaje de programación, así como otros lenguajes diferentes. ¿A qué esperas para dar el siguiente paso? ¡No lo dudes y matricúlate ya!
