프로토타입 y herencia prototipal en JavaScript

El prototype o prototipo es un concepto casi único de JavaScript. Este concepto se aleja de la forma en la cual normalmente se manejan las clases en un lenguaje de programación. En JAVA, por ejemplo, creamos una clase y luego la instanciamos. Pero en JS eso no se puede hacer, porque el pequeño gran detalle es que: en JavaScript no existen las clases.

Al todo ser objetos en este lenguaje de programación debemos instanciarlos a partir de un objeto original, o bien, heredar a otros objetos. Y es aquí donde aparecen los conceptos de prototipo y su modelo de herencia prototipal.

¿ Que es un prototipo y la herencia prototipal?

💡 Un prototipo es un objeto que existe como una propiedad en todas las funciones de JavaScript.

¿No recuerdas que es una propiedad? Tranqui, todos nos pasa. Como ya lo mencioné antes, JavaScript está basado en objetos. Entonces, un objeto es una coleccion de propiedades, y una propiedad es una llave(key) y un valor para esa llave(value). Aquí un ejemplo:



Siempre que pedimos una propiedad o un método a una función y no se encuentra, se busca en el prototipo del objeto. El prototipo, a su vez es también un objeto llamado _Prototype_ y este objeto _Prototype_ es una propiedad del objeto global: _Object_ . Y como a todo objeto en JavaScript, se le pueden agregar nevas propiedades y métodos.

//En este lenguaje pasan cosas raras... Lo sé. 시가모스:

Esto se le conoce como cadena de prototipos. Y es la razón por la cual otros objetos pueden tener disponibles propiedades y métodos de otros objetos. Veamos unos ejemplos:

Primero, creamos un objeto normal:

      const character = {
        name: "Vegeta",
      };

      character.hi = function () {
        alert(`Me llamo ${this.name} y soy un personaje`);
      };

      character.hi();

Esto con un objeto puede estar bien y no casar problemas. Pero, ¿ y si tenemos más de 50 objetos? ¿vamos a crear un función saludar por cada objeto? Esto es muy poco escalable. Busquemos otra 형식:

      const characterMethods = {
        hi: function () {
          console.log(`Me llamo ${this.name} y soy un personaje`);
        },
      };

      function Character(name) {
        const character = {
          name: name,
        };

        character.saludar = characterMethods.hi;
        return character;
      }

      const vegeta = Character("Vegeta");
      vegeta.hi();

      const pikachu = Character("Pikachu");
      pikachu.hi();

Más sencillo y más funcional ¿cierto? Simplemente creamos dos objetos, uno donde guardamos los métodos y propiedades (characterMethods) y otro donde guardamos nuestros personajes (Characters). Pero... esto se puede hacer de forma mucho más sencilla con los prototipos y la herencia prototipal.

Y aquí veremos algo nuevo llamado: object.create . Básicamente, es uno de los métodos para crear objetos en JavaScript. Recibe dos argumentos: Object.create(prototypeObject, propertiesObject) . El prototipo del objeto y las propiedades del objeto. 다음 기능을 사용할 수 있습니다.

      function Character(name) {
        // Iniciamos el uso del Object.create.
        const character = Object.create(Character.prototype);
        character.name = name;

        return character;
      }

      // Iniciamos el uso de Object.prototype
      Character.prototype;

Como lo mencioné al principio de este post en la definición de prototipo, todas las funciones tienen un objeto prototype. 알 프린시피오 Character.prototype (el objeto de las funciones) es un objeto vacío. Pero, una vez más, como lo dije al principio: a todo objeto se le pueden agregar nuevas propiedades y métodos. Hagamos que prototype 데제 데 에스타르 바치오 👇

      function Character(name) {
        // Iniciamos el uso del Object.create.

        const character = Object.create(Character.prototype);
        character.name = name;

        return character;
      }

      // Iniciamos el uso de Object.prototype
      Character.prototype;

      // Agregamos un método a Character.prototype
      Character.prototype.hi = function () {
        console.log(`Me llamo ${this.name} y soy un personaje`);
      };

      const vegeta = Character("Vegeta");
      // Usamos el método agregado a Character.prototype
      vegeta.hi();

      const pikachu = Character("Pikachu");
      pikachu.hi();

¡이리스토! ¡Funciona! El código en el que trabajamos ahora es mucho más limpio, hay menos código repetido y sobre todo y más Importante, es mucho más reutilizable y mantenible. Podemos agregar nuevos métodos y propiedades sin que todo se rompa, simplemente tendríamos que agregar un nuevo método a Character.prototype . No tendremos que crear funciones o hacer que muchas propiedades y métodos dependsan de un solo objeto.

¿Qué aprendizaje te puedes llevar de este post?

Todo en JavaScript acaba en el objeto Object , el cual es el objeto global. Todo se hereda de allí y si alguna función no encuentra un método o una propiedad la buscará en el objeto global. Si no la encuentra en el objeto global se imprimirá un error.

La forma en la que un objeto puede acceder a propiedades y métodos de otro objeto hasta llegar al objeto global se llama herencia prototipal.

propotype es un objeto que tienen todas las funciones en JavaScript. Inicia vacío pero se le pueden ir agregando nuevos métodos y propiedades.

Espero que hayas podido comprender un poco más este tema.

Nos vemos en un próximo post. 🚀

푸엔테스 상담:

MDN Web Docs
Platzi