11

Me gustaría saber qué son los prototipos en JavaScript y cómo los puedo usar o si existe algún tipo de beneficio.

3 respuestas 3

10

Como nota inicial, la POO de JavaScript se encuentra basada en prototipos y no en clases. Para ver más información sobre prototype-based OOP vrs. class-based OOPpuedes visitar el siguiente link(en inglés).

Los prototipos son un conjunto de normas para integrar Programación Orientada a Objetos en JavaScript. Entonces, siguiendo estas reglas nosotros debemos ser capaces de crear las distintas metodologías de la Orientación a Objetos:

  • Herencia
  • Encapsulamiento
  • Abstracción
  • Polimorfismo

Por supuesto, no todas la metodologías están disponibles.

¿Cómo puedo utilizarlos prototipos?

ECMAScript 5

Para crear una clase:

function Polygon(height, width){
  this.height = height;
  this.width = width;
}

Para heredar sobre una clase base:

function Square(side){
  this.prototype = Object.create(Polygon.prototype);
  Polygon.call(this, side, side);

  this.getArea = function(){
    return this.height * this.width;
  }
}

ECMAScript 6

Para crear una clase:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Para heredar de una clase base:

class Square extends Polygon {
  constructor(side) {
    super(side, side);
  }
  getArea() {
    return this.height * this.width;
  }
}

Ya con esto podemos crear una instancia con:

var square = new Square(5);
// debe imprimir 25
console.log(square.getArea());

Ejemplos tomados de Inheritance and the prototype chain.

Beneficios

  • Disponer de programación de alto nivel.
  • Disponer de diferentes formas de crear objetos.
  • Tener herencia en las propiedades y métodos.
  • Básicamente los beneficios de disponer de prototipos en JavaScript es la posibilidad de utilizar la Programación Orientada a Objetos como metodología de Software.
5
  • En el ejemplo de ES5, has inicializado los campos de width y height directamente, sin llamar al constructor del prototipo. Pero es posible que ese constructor tenga más lógico que sea difícil—o aún imposible (si tiene una referencia a un closure que ya no está accesible). ¿Es posible llamar al constructor del clase base en ES5? y ¿cómo?
    – wchargin
    Commented el 4 ene. 2016 a las 6:48
  • @WChargin Estoy de acuerdo contigo, el constructor para ES5 no parece tener lógica, lo resolveré lo antes posible.
    – learnercys
    Commented el 4 ene. 2016 a las 7:04
  • @WChargin Cada función en JavaScript tiene el método call. Con esto puedes llamar al constructor padre para la reutilización de código. Referencia. Acabo de modificar el ejemplo utilizando el método call.
    – learnercys
    Commented el 4 ene. 2016 a las 14:20
  • En pocas palabras this es lo que diferencia una clase de una función, cierto? Commented el 4 ene. 2016 a las 15:21
  • 1
    @JavierCárdenas No necesariamente, this se puede utilizar incluso sin estar dentro de una función o clase. Su comportamiento o valor depende de cómo es llamada. Por ejemplo, en caso de utilizar this en el entorno global, this representa a window, en caso de usarse bajo la expresión new, representa la instancia del objeto actual. Entonces, en términos generales, representa el scope actual. Más información.
    – learnercys
    Commented el 4 ene. 2016 a las 15:56
9

Todos los objetos en JavaScript tienen una propiedad especial llamada prototype que es una referencia a otro objeto.

¿Para qué es útil?, veamos un ejemplo:

var miObjeto = {
  foo: 5
}
console.log(miObjeto.foo); // 5

Aquí creamos un objeto llamado miObjeto, definimos una propiedad foo con el valor de 5 e imprimimos el valor de esta variable. Claramente el resultado es 5, pero ¿qué pasa cuando el objeto no tiene una variable foo?. JavaScript tratará de encontrarla en el prototype de este objeto, y así sucesivamente hasta que la encuentre o llegue al final de la cadena de prototipo.

Esta cadena de prototipo nos permite simular herencia (recordemos que en JavaScript no existe la herencia basada en clases), si queremos agregar métodos o propiedades a un objeto podemos hacerlo mediante el prototype.

Consideremos la siguiente función Persona:

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

El prototipo de esta función es Persona.prototype y podemos añadirle más métodos o propiedades de las que tiene originalmente:

Persona.prototype.toString = function() {
  return "[Persona: " + this.nombre + "]";
}

Persona.prototype.saludar = function() {
  console.log("Hola mi nombre es: " + this.nombre);
}

Ahora vamos a crear un objeto p de tipo Persona con new, es este punto el prototipo de p es igual Persona.prototype:

var p = new Persona("John", 33);
console.log(p.nombre); // propiedad del objeto
console.log(p.toString()); // propiedad no encontrada directamente en el objeto

Por esta razón al invocar el método toString a pesar de que no es un método directo de p, JavaScript busca en el prototipo de p y sí lo encuentra y todo funciona correctamente.

En cualquier momento podemos consultar el prototipo de un objeto con Object.getPrototypeOf, para nuestro caso particular:

Object.getPrototypeOf(p) === Persona.prototype; // true

Por último es importante notar que hay una propiedad no estándar para obtener el prototipo de un objeto llamada __proto__, sin embargo su uso debe ser evitado.

1
  • creo que es de las mejores explicaciones que he leído al respecto. Claro, conciso y práctico. Gracias!
    – jask
    Commented el 25 oct. 2020 a las 12:13
2

Los prototipos son objetos que pueden tener propiedades (funciones y métodos), ademas pueden ser utilizados por otros objetos para heredar sus propiedades, esto es muy útil para encapsular y reutilizar el código, esto te da la posibilidad de adaptar tus códigos al diseño orientada a objetos.

En JavaScript todo lo que no sean tipos primitivos (undefined, null, boolean, number o string) son objetos y pueden ser usados como prototipos para crear otros objetos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.