Un objeto en JavaScript es realmente una colección de propiedades. Las propiedades pueden tener forma de datos, tipos, funciones (métodos) o incluso otros objetos. De hecho sería más fácil de entender un objeto como un array de valores, cada uno de los cuales está asociado a una propiedad (un tipo de datos, método u objeto). Un momento: ¿un método puede ser una propiedad de un objeto? Pues en JavaScript parece que sí.
Una función contenida en un objeto se conoce como un método. Los métodos no son diferentes de las funciones que has visto anteriormente, excepto que han sido diseñados para ser utilizados en el contexto de un objeto, y por lo tanto, tendrán acceso a las propiedades de ese objeto. Esta conexión entre propiedades y métodos es uno de los ejes centrales de la orientación a objetos.
Pero vamos poco a poco.
Definición
Para definir una clase, que será el molde que nos permitirá crear objetos de dicha clase, simplemente debemos utilizar la siguiente sintaxis:
class NombreClase {
// Cuerpo de la clase
}Para nombrar una clase comenzamos su identificador con la primera letra en mayúsculas.
Por ejemplo, pensemos que queremos gestionar una serie de contactos, para ello podríamos empezar por definir una clase para un Contacto genérico:
class Contacto {
// Cuerpo de nuestra clase Contacto
}Creación
Para crear objeto de una clase dada simplemente debemos utilizar el operador new seguido del nombre de la clase.
let pepe = new Contacto();
let juan = new Contacto();En breve veremos qué estamos haciendo al realizar esta operación, pero por ahora nos quedamos con que de esta forma podemos crear nuevos objetos de dicha clase.
Propiedades
Pero una clase no tendría sentido sin tener unas propiedades que sean específicas de cada uno de los objetos. A eso se le suele llamar estado de un objeto, ya que las propiedades de un objeto dado serán diferentes a las de otro.
Para declarar propiedades dentro de una clase simplemente las podemos declarar en el cuerpo de la clase, aunque como veremos ahora mismo, lo ideal es hacerlo en el método constructor. Para referirnos a las propiedades debemos anteponer la palabra reservada this al nombre de la propiedad como veremos en breve.
class Contacto {
nombre;
correo;
}Ahora podremos crear objetos de dicha clase e inspeccionar sus propiedades.
let juan = new Contacto();
console.log(juan); // Muestra por consola: Object { nombre: undefined, correo: undefined }Podemos acceder a las propiedades de un objeto utilizando el operador .
let juan = new Contacto();
console.log(juan.nombre); // Muestra por consola: undefined
juan.nombre = 'Juan';
console.log(juan.nombre); // Muestra por consola: JuanConstructor
Como hemos comentado anteriormente, lo ideal es crear y asignar valores a las propiedades en el método constructor. El método constructor es una función especial que es llamada cuando utilizamos el operador new de dicha clase. Dicho método, si no es definido, es definido por defecto, pero lo ideal es que nosotros lo definamos y le demos la funcionalidad adecuada, que suele ser inicializar las propiedades.
class Contacto {
constructor(nombre, correo) {
this.nombre = nombre;
this.correo = correo;
}
}En el siguiente ejemplo creamos dos objetos de la clase: en el primero utilizamos el constructor definido por nosotros mismos y en el segundo el constructor definido por defecto.
let pepe = new Contacto('Pepe', 'pepe@gmail.com');
console.log(pepe); // Muestra por consola: Object { nombre: "Pepe", correo: "pepe@gmail.com" }
let juan = new Contacto();
console.log(juan); // Muestra por consola: Object { nombre: undefined, correo: undefined }Métodos
Los métodos son funciones definidas en la propia clase que determinan el comportamiento de los objetos creados.
Por ejemplo, podemos crear un método para nuestra clase encargado de devolver un mensaje de saludo que incluya los datos del objeto.
class Contacto {
nombre;
correo;
constructor(nombre, correo) {
this.nombre = nombre;
this.correo = correo;
}
saludar() {
return `Hola, soy ${this.nombre} y mi correo es ${this.correo}`;
}
}
let pepe = new Contacto('Pepe', 'pepe@gmail.com');
console.log(pepe.saludar()); // Muestra por consola: Hola soy Pepe y mi correo es pepe@gmail.comTambién podemos definir métodos que serán comunes a toda la clase. Son los llamados métodos estáticos y para declararlos debemos anteponer la palabra reservada static al nombre del método.
Herencia
En JavaScript también podemos crear jerarquías de clases mediante la herencia. Una clase puede heredar de otra previamente declarado y por lo tanto heredará su estructura y su comportamiento.
Por ejemplo, podríamos tener una clase para almacenar contactos telefónicos en la que queremos almacenar además del nombre y el correo, el número de teléfono. También queremos que el método saludar también devuelva información del teléfono.
class ContactoTelefonico extends Contacto {
telefono;
constructor(nombre, correo, telefono) {
super(nombre, correo);
this.telefono = telefono;
}
saludar() {
return `${super.saludar()} y mi teléfono es ${this.telefono}`;
}
}
let maria = new ContactoTelefonico('María', 'maria@gmail.com', '666112233');
console.log(maria.saludar()); // Muestra por consola: Hola soy María y mi correo es maria@gmail.com y mi teléfono es 666112233