Essential Recap

Antes de pasar a conceptos avanzados necesitamos entender cosas básicas en JavaScript. Piensa en los objetos como bloques de construcción que contienen información. La herencia es como pasar atributos de un objeto a otro.Las funciones son herramientas que pueden usarse individualmente o como parte de estos objetos. Por último, las clases son como planos que nos ayudan a hacer cosas iguales fácilmente.

Objetos

En JavaScript los objetos son contenedores que pueden contener diferentes piezas de información. Imagina un perfil de una red social como un objeto, donde cada perfil tiene propiedades como nombre, edad, y seguidores. Puedes representar esto usando {} y pares de clave-valor.

let user = {
  name: 'Ben S',
  age: 25,
  followers: 200,
  DoB: '1/1/1990'
};

Aquí, user es un objeto con propiedades como name, age y followers. Estas propiedades almacenan información específica sobre el usuario. Los objetos en JavaScript nos permiten organizar y gestionar información relacionada.

Para testearlo, abrimos el navegador, hacemos click derecho e Inspect y nos vamos a Console, lo que abrirá una ventana. Si copias el código de arriba y lo pegas en la consola, creará un objeto user. Puedes acceder a sus propiedades usando console.log.

Clases

En JavaScript, las clases son como planos que nos ayudan a crear múltiples objetos con estructuras o comportamientos similares. Siguiendo con nuestro ejemplo de una red social, podemos usar una clase para definir un usuario genérico y creador de contenido. Las clases ofrecen una forma conveniente de organizar e instanciar objetos con características compartidas.

// Class for User 
class UserProfile {
  constructor(name, age, followers, dob) {
    this.name = name;
    this.age = age;
    this.followers = followers;
    this.dob = dob; // Adding Date of Birth
  }
}

// Class for Content Creator Profile inheriting from User 
class ContentCreatorProfile extends UserProfile {
  constructor(name, age, followers, dob, content, posts) {
    super(name, age, followers, dob);
    this.content = content;
    this.posts = posts;
  }
}

// Creating instances of the classes
let regularUser = new UserProfile('Ben S', 25, 1000, '1/1/1990');
let contentCreator = new ContentCreatorProfile('Jane Smith', 30, 5000, '1/1/1990', 'Engaging Content', 50);

Ahora, la clase User incluye la fecha de nacimiento dob como parte de sus propiedades y la clase ContentCreatorProfile hereda esta propiedad. Al crear instancias de estas clases, podemos dar la fecha de nacimiento y otros detalles. Como podemos ver, incluir la DoB mejora el perfil del usuario con información adicional.

Prototipo

En JavaScript, cada objeto está relacionado con un objeto prototipo y estos prototipos forman una cadena comúnmente conocida como cadena de prototipo. El prototipo sirve como plantilla o plano para objetos. Cuando creas un objeto usando una función constructor o una clase, JavaScript automáticamente configura un link entre el objeto y su prototipo. En el contexto de nuestra red social, ilustremos cómo funcionan los prototipos:

// Prototype for User 
let userPrototype = {
  greet: function() {
    return `Hello, ${this.name}!`;
  }
};

// User Constructor Function
function UserProfilePrototype(name, age, followers, dob) {
  let user = Object.create(userPrototype);
  user.name = name;
  user.age = age;
  user.followers = followers;
  user.dob = dob;
  return user;
}

// Creating an instance
let regularUser = UserProfilePrototype('Ben S', 25, 1000, '1/1/1990');

// Using the prototype method
console.log(regularUser.greet());

Este código imprime: Hello, Ben S.

Diferencia entre Clase y Prototipo

Las clases y los prototipos en JavaScript son dos maneras de conseguir un objetivo similar: crear objetos con comportamientos y características. Imagina que estás construyendo modelos de coches. Usar clases es como tener un plano detallado o un conjunto de instrucciones para cada modelo de coche que quieres desarrollar. Todos los coches hechos con el mismo plano tienen de forma garantizada las mismas funcionalidades y comportamientos. Las clases en JavaScript funcionan así.

Por otro lado, los prototipos es como tener un modelo de coche básico y después personalizarlo añadiendo o modificando funcionalidades directamente en el propio coche. Con los prototipos empiezas con un objeto sencillo y vas añadiendo comportamientos relacionando el objeto a un objeto prototipo que ya tiene esos comportamientos. Los objetos creados de esta manera están relacionados a través de la cadena de prototipos permitiéndoles heredar comportamientos de otros objetos. Este método es más dinámico y flexible pero puede ser más difícil de controlar y entender que las clases.

Herencia

En JavaScript la herencia permite a un objeto heredar las propiedades de otro, creando una jerarquía de objetos relacionados. Continuando con nuestro ejemplo de una red social, consideremos un perfil más específico para un creador de contenido. Este nuevo objeto puede heredar propiedades desde un usuario normal, como name y followers y añadir propiedades particulares como content o posts.

let user = {
  name: 'Ben S',
  age: 25,
  followers: 1000,
DoB: '1/1/1990'
};

// Content Creator Profile inheriting from User 
let contentCreatorProfile = Object.create(user);
contentCreatorProfile.content = 'Engaging Content';
contentCreatorProfile.posts = 50;

Aquí, contentCreatorProfile hereda las propiedades de user usando Object.create(). Ahora tiene propiedades específicas como content y posts y hereda name, age y followers del usuario general.

De esta manera, la herencia ayuda a crear un objeto más especializado al reutilizar propiedades comunes del objeto padre. JavaScript soporta herencias basadas tanto en clases como en prototipos.

• Herencia basada en Prototipos: En JavaScript cada objeto tiene un prototipo y cuando creas un nuevo objeto puedes especificar su prototipo. Los objetos heredan propiedades y métodos de su propio prototipo. Puedes usar el método Object.create() para crear un nuevo objeto con un prototipo especificado o puedes modificar directamente el prototipo de un objeto existente usando su propiedad de prototipo.
• Herencia basada en Clases: JavaScript también soporta las clases, las cuales ofrecen una sintaxis más familiar para definir objetos y herencia. Las clases en JavaScript son una mejora sintáctica sobre la herencia basada en prototipos existente. Sin embargo, en esencia, las clases también usan prototipos.

El siguiente diagrama representa la herencia basada en prototipos en JavaScript:

• Definir el Objeto UserProfile: Empezamos definiendo el objeto genérico UserProfile que representa propiedades comunes compartidas por diferentes tipos de perfiles. En este ejemplo, UserProfile incluye propiedades como email y password, las cuales pueden ser comunes de todos los perfiles.
• Crear ContentCreatorProfile: Creamos un perfil especializado llamado ContentCreatorProfile. Este perfil es específico de los creadores de contenido y puede tener propiedades o comportamientos adicionales. Conseguimos esto creando ContentCreatorProfile usando Object.create(UserProfile), lo que configura UserProfile como prototipo de ContentCreatorProfile.
• Añadir Propiedades Adicionales: Después de crear ContentCreatorProfile añadimos propiedades específicas como posts. Esta propiedad es única de ContentCreatorProfile y no se hereda de UserProfile.
• Acceder a Propiedades: Cuando accedemos a las propiedades de ContentCreatorProfile, JavaScript primero comprueba si la propiedad existe directamente en ContentCreatorProfile. Si no encuentra la propiedad ahí, busca en la cadena de prototipos. Por lo que ContentCreatorProfile hereda las propiedades email y password de UserProfile mientras también tiene su propiedad única del número de posts. Esto permite una estructura jerárquica donde los perfiles especializados heredan propiedades de aquellos más genéricos.