Creación de clases en Javascript tradicional

  • Por
Ahora que ya sabemos lo que son los objetos, vamos a ver cómo podemos crear y usar nuestros propios objetos en Javascript tradicional, ES5, abordando diversos ejemplos prácticos.

En capítulos anteriores de esta segunda parte del Manual de Javascript vimos las generalidades sobre la programación orientada a objetos. Además, estuvimos dando un repaso bastante completo a los distintos objetos nativos de Javascript.

Ahora que ya hemos conocido un poco los objetos y hemos aprendido a manejarlos podemos pasar a un tema más avanzado, como es el de construir nuestros propios objetos, que puede sernos útil en ciertas ocasiones para temas avanzados.

Así que vamos a ver cómo podemos definir nuestros propios objetos, con sus propiedades y métodos, de manera que aprendamos el mecanismo, pero sin entrar demasiado en aspectos prácticos que los dejamos para ejemplos del futuro.

Para crear nuestros propios objetos debemos crear una clase, que recordamos que es algo así como la definición de un objeto con sus propiedades y métodos. Para crear la clase en Javascript debemos escribir una función especial, que se encargará de construir el objeto en memoria e inicializarlo. Esta función se le llama constructor en la terminología de la programación orientada a objetos.

function MiClase (valor_inicializacion){ 
   	//Inicializo las propiedades y métodos 
   	this.miPropiedad = valor_inicializacion 
   	this.miMetodo = nombre_de_una_funcion_definida 
}

Eso era un constructor. Utiliza la palabra this para declarar las propiedades y métodos del objeto que se está construyendo. This hace referencia al objeto que se está construyendo, pues recordemos que a esta función la llamaremos para construir un objeto. A ese objeto que se está construyendo le vamos asignando valores en sus propiedades y también le vamos asignando nombres de funciones definidas para sus métodos. Al construir un objeto técnicamente es lo mismo declarar una propiedad o un método, solo difiere en que a una propiedad le asignamos un valor y a un método le asignamos una función.

La clase AlumnoUniversitario

Lo veremos todo más detenidamente si hacemos un ejemplo. En este ejemplo vamos a crear un objeto estudiante universitario. Como estudiante tendrá unas características como el nombre, la edad o el número de matrícula. Además podrá tener algún método como por ejemplo matricular al alumno.

Constructor: Colocamos propiedades

Veamos cómo definir el constructor de la clase Alumnouniversitario, pero solamente vamos a colocar por ahora las propiedades de la clase.

function AlumnoUniversitario(nombre, edad){ 
   	this.nombre = nombre 
   	this.edad = edad 
   	this.numMatricula = null 
}

Los valores de inicialización los recibe el constructor como parámetros, en este caso es sólo el nombre y la edad, porque el número de matrícula no lo recibe un alumno hasta que es matriculado. Es por ello que asignamos null a la propiedad numMatrícula.

Escribir métodos

Ahora vamos a continuar con esa definición de la clase para incorporar métodos.

Para construir un método debemos crear una función. Una función que se construye con intención de que sea un método para una clase puede utilizar también la variable this, que hace referencia al objeto sobre el que invocamos el método. Pues debemos recordar que para llamar a un método debemos tener un objeto y this hace referencia a ese objeto.

function matriculate(num_matricula){ 
   	this.numMatricula = num_matricula 
}

La función matricular recibe un número de matrícula por parámetro y lo asigna a la propiedad numMatricula del objeto que recibe este método. Así rellenamos el la propiedad del objeto que nos faltaba.

Vamos a construir otro método que imprime los datos del alumno.

function imprimete(){ 
   	document.write("Nombre: " + this.nombre) 
   	document.write("<br>Edad: " + this.edad) 
   	document.write("<br>Número de matrícula: " + this.numMatricula) 
}

Esta función va imprimiendo todas las propiedades del objeto que recibe el método.

Constructor: Colocamos métodos

Para colocar un método en una clase debemos asignar la función que queremos que sea el método al objeto que se está creando. Veamos cómo quedaría el constructor de la clase AlumnoUniversitario con el método matricular.

function AlumnoUniversitario(nombre, edad){ 
   	this.nombre = nombre 
   	this.edad = edad 
   	this.numMatricula = null 
   	this.matriculate = matriculate 
   	this.imprimete = imprimete 
}

Vemos que en las últimas líneas asignamos a los métodos los nombres de las funciones que contienen su código.

Para instanciar un objeto

Para instanciar objetos de la clase AlumnoUniversitario utilizamos la sentencia new, que ya hemos tenido ocasión de ver en otras ocasiones.

miAlumno = new AlumnoUniversitario("José Díaz",23)

Trabajando con la clase, creando instancias y usando objetos

Para ilustrar el trabajo con objetos y terminar con el ejemplo del AlunnoUniversitario, vamos a ver todo este proceso en un solo script en el que definiremos la clase y luego la utilizaremos un poquito.

//definimos el método matricularte para la clase AlumnoUniversitario 
function matriculate(num_matricula){ 
   	this.numMatricula = num_matricula 
} 

//definimos el método imprimete para la clase AlumnoUniversitario 
function imprimete(){ 
   	document.write("<br>Nombre: " + this.nombre) 
   	document.write("<br>Edad: " + this.edad) 
   	document.write("<br>Número de matrícula: " + this.numMatricula) 
} 

//definimos el constructor para la clase 
function AlumnoUniversitario(nombre, edad){ 
   	this.nombre = nombre 
   	this.edad = edad 
   	this.numMatricula = null 
   	this.matriculate = matriculate 
   	this.imprimete = imprimete 
} 

//creamos un alumno 
miAlumno = new AlumnoUniversitario("José Díaz",23) 

//le pedimos que se imprima 
miAlumno.imprimete() 

//le pedimos que se matricule 
miAlumno.matriculate(305) 

//le pedimos que se imprima de nuevo (con el número de matricula relleno) 
miAlumno.imprimete()

Si lo deseamos, podemos ver el script en funcionamiento en una página a parte.

No vamos a hablar más por el momento sobre cómo crear y utilizar nuestros propios objetos, pero en el futuro trataremos este tema con más profundidad y haremos algún ejemplo adicional.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

alberto madrid

04/11/2005
Queria comentarios q os habeis equivocado al redactar el articulo en una cosita. Al final del todo decis que asignamos a null la propiedad numMatricula, cuando lo correcto es que asignamos a la propiedad nummatricula el valor null. Un saludo

Gabriel

15/2/2006
Yo no lo llamaría una clase ya que eso vendría a ser como una PSEUDO clase, en realidad es una función eso. Pero el "this" permite que esa función pueda trabajar como si fuera el contructor de la clase.

Creo que como está explicado se entiende bien pero llamar "constructor de clase" a una función fuera del ámbito de una clase genera confusión a personas inexpertas.

Pienso que debería indicarse al comienzo del artículo que eso no es en realidad una clase, pero que se puede imitar el funcionamiento.

Saludos.

MCCLAI

26/4/2010
se puede agregar otra propiedad
ciertamente este ejemplo es claro y sencillo, fácil, pero debería indicar que consume mucho recurso ya que se heredaran todas las propiedades y eventos en cada llamada, para evitar eso podrian modificar un poco y dejarlo de esta manera
function miclase(){
var mipropiedad1=''
var mipropiedad2=''
miclase.prototype.metodo1(){
sentencia1;
}
miclase.prototype.metodo2(){
sentencia2
}
}
tengan en cuenta que no es clase pura es Seudoclase, en una técnica para imitar su comportamiento, en versiones futuras de javascript se implementará la programación orientada a objetos.
saludos

Fer

04/9/2010
Y luego???
Pues está chido el articulo... y después qué ??? deberías de poner un ejemplo de la instnciación de la clase.

Saludos.