JavaScript OOP (Prototipo) #2

Hola amigos, soy Bennison. En este blog, voy a explicar cómo funciona la programación orientada a objetos en Javascript y cómo se diferencia de la programación orientada a objetos clásica. Antes de leer este artículo, lea mi blog anterior que trata sobre los fundamentos de OOP .

¿Qué es un prototipo?

• En Javascript tenemos algo llamado prototipo. En JavaScript, cada objeto se vinculará a un determinado prototipo. Entonces cada objeto tiene prototipos. el prototipo también contiene propiedades y métodos.
• Aquí lo importante es que el objeto puede acceder a los métodos y propiedades del prototipo.

• En la programación orientada a objetos clásica, se crea una instancia de un objeto desde la clase, lo que se denomina creación de instancias. Aquí la clase es solo un modelo para crear Objetos.
• Pero en Javascript, esta terminología es diferente. Aquí cada objeto está vinculado con otros objetos , y esos objetos se llaman prototipos .

• La herencia de prototipos significa un prototipo que contiene métodos y prototipos que son accesibles para todos los objetos vinculados a ese prototipo.
• Entonces, el objeto hereda métodos y propiedades del prototipo, así es como se llama herencia prototípica. esta herencia es diferente de la herencia de clases, que es una clase heredada de la otra clase. Pero en este caso, la instancia hereda de la clase base.
• En la imagen de arriba, en la flecha OOP de javascript apunta hacia arriba, esto significa que el objeto delega sus comportamientos a los prototipos.
• En la programación orientada a objetos clásica, los métodos se copian de la clase a las instancias (objetos).

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

• Si buscamos en Google una comprensión del método de mapa de javascript, en el documento de MDN podemos ver eso como Array.prototype.map()

• Aquí el “ Array.prototype()” es el prototipo de todos los objetos de matriz que creamos en JavaScript. Por lo tanto, todas las matrices tienen acceso al método del mapa.
• Ahora, este objeto prototipo contiene todos los métodos de matriz, incluido un mapa.

• Entonces, en el ejemplo anterior, " Array.Prototype" es el prototipo de la matriz de números, esa variable de matriz de números está vinculada a los prototipos. Por lo tanto tiene acceso a todos los métodos que están definidos en el objeto “ array.prototype ”. Entonces, en el ejemplo anterior, la matriz "número" hereda el mapa de métodos.
• En Javascript, podemos implementar la herencia prototípica de tres formas, una es la función constructora, la segunda son las clases ES6 y la última es el método Object.Create().

• Una función constructora se utiliza para crear objetos a partir de funciones. así es como se implementan los objetos incorporados como Array y métodos de mapa.

• Esta es una alternativa moderna a las funciones constructoras. Las clases ES6 funcionan igual que la función constructora. La clase ES6 no se comporta como un OOP clásico. Detrás de escena, las clases de ES6 se implementan con funciones de Constructor.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

• Y en el ejemplo anterior podemos ver el método 'hasOwnProperty', que nos ayuda a verificar la propiedad, y el método es la propiedad propia del objeto que se llama método hasOwnProperty.

• El método “object.create()” es la forma más sencilla de vincular un objeto a un objeto prototipo.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

• El método "Object.create" devuelve un objeto vacío con el prototipo. y el prototipo será lo que le pasamos a ese método.

• Espero que en este blog hayamos aprendido los conceptos básicos de la herencia de prototipos en Javascript, si no pudo entender los ejemplos anteriores, no se preocupe, explicaré más sobre estos conceptos en mis próximos blogs. Gracias por leer este blog, hasta pronto.