Instance Of en JavaScript con instancias y prototipos

Curso Intermedio de Programación Orientada a Objetos en JavaScript

Introducción

¿Qué hay dentro de los objetos en JavaScript?

Profundicemos en los objetos

Static: atributos y métodos estáticos en JavaScript

Métodos estáticos del prototipo Object

Object.defineProperty

Cómo copiar objetos en JavaScript

Cómo funciona la memoria en JavaScript

Shallow copy en JavaScript

Qué es JSON.parse y JSON.stringify

Recursividad en JavaScript

Qué es recursividad

Deep copy con recursividad

Playgrounds: Hacer freeze de un objeto de forma recursiva

Abstracción y encapsulamiento sin prototipos

Factory pattern y RORO

Abstracción con objetos literales y deep copy

Module pattern y namespaces: propiedades privadas en JavaScript

Getters y setters

Cómo identificar objetos

Qué es duck typing

Duck typing en JavaScript

Instance Of en JavaScript con instancias y prototipos

Atributos y métodos privados en prototipos

Creando métodos estáticos en JavaScript

Próximos pasos

¿Quieres más cursos de POO en JavaScript?

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Con instanceof podemos saber si un objeto es instancia de cierto prototipo. Esto nos devuelve true o false.

Determinando la procedencia de un objeto

A partir del código creado anteriormente, realizaremos las modificaciones respectivas para que ahora nuestras funciones generadoras de objetos (como createLearningPath) sean ahora prototipos. Con ello ya podremos usar instanceof para identificar si ciertos objetos son instancias de nuestros prototipos, asegurándonos así de que tengan los atributos y métodos necesarios.

Convertiremos nuestras funciones createLearningPath y createStudent en prototipos. Utilizaremos ahora this para asignar los parámetros recibidos a las propiedades de los nuevos prototipos y por ahora no trabajaremos con métodos y atributos privados:

function isObject(subject) {
  return typeof subject == "object";
}

function isArray(subject) {
  return Array.isArray(subject);
}

function requiredParam(param) {
  throw new Error(param + " es obligatorio");
}

function LearningPath({ // 👈👈 PROTOTIPO
	name = requiredParam("name"), // Campo es obligatorio
	courses = [], // Lista de Cursos que pertencen a la ruta de aprendizaje
}) {
	this.name = name;
	this.courses = courses;
}

function Student({ // 👈👈 PROTOTIPO
  name = requiredParam("name"),
  email = requiredParam("email"),
  age,
  twitter,
  instagram,
  facebook,
  approvedCourses = [],
  learningPaths = [],
} = {}) {

	this.name = name; // ⬅⬇
	this.email = email;
	this.age = age;
	this.approvedCourses = approvedCourses;
	this.socialMedia = {
		twitter,
		instagram,
		facebook,
	}; // ⬅⬆

}

La propiedad learningPaths lo asignaremos luego de haber hecho las validaciones respectivas.

Ahora validaremos si nuestras rutas de aprendizaje que vayamos a crear son auténticas, es decir, no solamente se comportan como tal (tienen los atributos y métodos que un learning path debería tener) sino que también son instancias de nuestro prototipo LearningPath:

function isObject(subject) {
  return typeof subject == "object";
}

function isArray(subject) {
  return Array.isArray(subject);
}

function requiredParam(param) {
  throw new Error(param + " es obligatorio");
}

function LearningPath({ // PROTOTIPO
	name = requiredParam("name") // Campo es obligatorio
	courses = [], // Lista de Cursos que pertencen a la ruta de aprendizaje
}) {
	this.name = name;
	this.courses = courses;
}

function Student({ // PROTOTIPO
  name = requiredParam("name"),
  email = requiredParam("email"),
  age,
  twitter,
  instagram,
  facebook,
  approvedCourses = [],
  learningPaths = [],
} = {}) {

	this.name = name;
	this.email = email;
	this.age = age;
	this.approvedCourses = approvedCourses;
	this.socialMedia = {
		twitter,
		instagram,
		facebook,
	};

	// Preguntamos primero si el parámetro recibido "learningPaths" sí es un Array:
	if (isArray(learningPaths)) { // 👈👈
		// Momentaneamente hacemos esta asignación hasta realizar el resto de
		// validaciones:
		this.learningPaths = [];

		// Vamos a recorrer cada índice del Array "learningPaths"
		for (learningPathIndex in learningPaths) { // 👈👈

			// Preguntaremos si el elemento ubicado en el índice actual es una
			// instancia del prototipo LearningPath. Solo así sabremos si es una
			// verdadera ruta de aprendizaje:
			if (learningPaths[learningPathIndex] instanceof LearningPath) { // 👈👈

				// Si es que SÍ es una instancia de dicho prototipo, entonces agregamos
				// dicha ruta de aprendizaje al array "learningPaths" del estudiante:
				this.learningPaths.push(learningPaths[learningPathIndex]);

			} // If end
		} // For end
	} // If end

}

Ya podemos agregar rutas de aprendizaje a los nuevos estudiantes que generemos. Los learning paths estarán correctamente validados al momento de realizar la asignación:

// Creamos nuevas rutas de aprendizaje que son instancias de "LearningPath"
const escuelaWeb = new LearningPath({
	name:"Escuela de WebDev"
});
const escuelaData = new LearningPath({
	name:"Escuela de Data Science"
});

// Generamos un nuevo estudiante asignandole las rutas creadas hace un momento, pero
// además agregamos un objeto con el nombre de una escuela al azar la cual a pesar de
// que tenga los mismos atributos, NO es instancia del prototipo LearningPath
const juan = new Student({
	email:"[email protected]",
	name:"Juanito",
	learningPaths:[
		escuelaWeb,
		escuelaData,
		{
			name: "Escuela Impostora"
		}
	]
});

// Si observamos en consola las rutas que tiene el estudiante creado, no nos aparecerá
// aquella "Escuela Impostora" que intentamos agregar, esto debido a que no pasó las
// Validaciones que establecimos:
console.log(juan.learningPaths);

/* > Mensaje en consola: 👀
[
  LearningPath {
		name: 'Escuela de WebDev',
		courses: []
	},
  LearningPath {
		name: 'Escuela de Data Science',
		courses: []
	}
]
*/

Ahora bien, aprendamos a generar atributos y métodos privados en prototipos. ¡Let’s go! 👨‍💻🕵️‍♀️

Contribución creada por: Martín Álvarez (Platzi Contributor)

Aportes 51

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Obed Paz

hace 3 años

También pudimos haber usado el for ... of en lugar del for ... in para no hacer el código tan verboso.

.
For … in devuelve los indices o las llaves del array u objeto que esta siendo iterado.
For … of devuelve ya directamente los valores.

.
Personalmente, por esa misma razón casi siempre me gusta dejar exclusivamente el for ... in para objetos y el for ... of para arrays.

.
Aun asi, al final va a depender del resultado que queramos obtener.

Daniel Chavez

hace 3 años

Este curso fuera menos confuso si trabajara en documentos distintos, en vez de comentar y estar deslizando como loco buscando donde tiene que corregir. Una sugerencia para los demás cursos

Zajith Corro Viveros

hace 3 años

Creo que lo que pasaba, cuando el profesor estaba tratando de corregir la primera forma en que trato de resolver lo de LearningPaths, fue un error de paréntesis 👀😢.

En la clase se vio así:

for (learningPathKey in learningPaths) {
    if (!learningPaths[learningPathKey] instanceof LearningPath) {
      console.warn(`Hay un learningPath no es una verdadero LearningPath`);
      return;
    }
}

El problema de la validación era en línea de código de la condición if. Lo que pasaba es que se estaba negando el objeto en si, no el valor que se estaba retornando instanceof.

if (!learningPaths[learningPathKey] instanceof LearningPath)

Si se agregan los paréntesis para envolver esa condición, se esta negando el valor que retorna instanceof y se logra que no sea posible crear un Student si algún learningPath no es un verdadero LearningPath 🧐😬

if (!(learningPaths[learningPathKey] instanceof LearningPath))

Rocio Salgado

hace 3 años

este curso esta muy confuso :C

Pablo Daniel Amé

hace 3 años

ni dios sabe que es learningpaths

Carlos Rafael Córdova Flores