La propiedad prototype nos permite añadir nuevas propiedades y métodos a un objeto. Con lo que cada una de las clases (instancias del objeto) contará con estas nuevas propiedades y métodos agregados con prototype.

Ahora, ¿para qué nos puede servir agregar nuevas propiedades y métodos a un objeto?… para enriquecer aún más dicho objeto sin la necesidad tener que editarlo. Supongamos que trabajamos a partir de un framework, el cuál ya está definido y queremos añadirle nuevas funcionalidades puntuales para un caso en particular; este es un claro caso dónde recurrir a prototype.

Veamos un ejemplo práctico; supongamos que tenemos un objeto creado con el nombre “person” en el cual tenemos definidas 4 propiedades (name, city, age y profession) a las cuales se les asignan los valores recibidos por parámetro al objeto cada vez que se crea una instancia.

function person(name,city,age,profession){
	this.name = name;
	this.city = city;
	this.age = age;
	this.profession = profession;
}

Posteriormente creamos tres personas instanciando tres veces el objeto “person” (carlos, maria, juan). Lo único que hace nuestra clase es albergar información de cada persona.

var carlos = new person("Carlos Fernández","Montevideo",1980,"Ingeniero");
var maria = new person("María González","Artigas",1985,"Enfermera");
var juan = new person("Juan Martínez","Mercedes",1978,"Médico");

Supongamos que quisiéramos agregar en nuestra página un bloque con información para cada una de las personas. Para ello vamos a tener la necesidad de agregar un método a la clase “person”. Aquí es dónde vamos a poner en práctica la propiedad “prototype”; así que definimos una función utilizando el nombre del objeto person, la propiedad prototype y el nombre de nuestro nuevo método, en este caso “createBox”. Lo que hacemos dentro de esta función es crear un objeto de HTML “P” al cual le insertamos la información del usuario con el método “innerHTML”.

person.prototype.createBox = function(){
	var content = document.createElement('p');
	content.innerHTML = "" + this.name + "
" + this.city + "
" + this.age + "
" + this.profession; document.getElementsByTagName("body")[0].appendChild(content); }

Inmediatamente cada una de las instancias puede empezar a implementar el nuevo método, así que una vez cargado el documento, ejecutamos la función “createContent” para dibujar en nuestra página tres cajas con la información de cada persona.

function createContent(){
	carlos.createBox();
	maria.createBox();
	juan.createBox();
}

Código completo y ejemplo de como se ven las cajas

function person(name,city,age,profession){
	this.name = name;
	this.city = city;
	this.age = age;
	this.profession = profession;
}

var carlos = new person("Carlos Fernández","Montevideo",1980,"Ingeniero");
var maria = new person("María González","Artigas",1985,"Enfermera");
var juan = new person("Juan Martínez","Mercedes",1978,"Médico");

person.prototype.createBox = function(){
	var content = document.createElement('p');
	content.innerHTML = "" + this.name + "
" + this.city + "
" + this.age + "
" + this.profession; document.getElementsByTagName("body")[0].appendChild(content); } function createContent(){ carlos.createBox(); maria.createBox(); juan.createBox(); }

Descargar ejemplo

¿Qué pasaría si en lugar de utilizar prototype creáramos el método de esta manera?…

carlos.createBox = function(){
	var content = document.createElement('p');
	content.innerHTML = "" + this.name + "
" + this.city + "
" + this.age + "
" + this.profession; document.getElementsByTagName("body")[0].appendChild(content); }

Prescindir del uso de prototype nos obliga a tener que crear el nuevo método para cada una de las instancias; en nuestro caso las tres personas.

Ya hemos aprendido para que nos sirve el uso de esta famosa propiedad, sólo nos queda ponerla en práctica ;)

¡Hasta pronto!

Categoría: Tutoriales, Web

Publicado por: negro

Artículos Relacionados

Una respuesta para “Propiedad prototype en javascript”

  • 1
    Elkin Alberto Bernal

    Graaaaaacias!!!!

    Excelente aporte, era el ejemplo que buscaba hacer de prototype como propiedad….

    Felices Fiestas amigo!!!

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>