No tienes acceso a esta clase

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

Instance Of en JavaScript con instancias y prototipos

16/19
Recursos

Aportes 25

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

.

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))

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

este curso esta muy confuso :C

Hola! como estan? Les dejo un pequeno resumen de lo aprendido!

Instance OF en js con instancias y protipos.

Convertiremos nuestras fabricas de objetos en prototipos y gracias a crear prototipos,utilizaremos el instance of para ver si ej nuestros learning paths realmente fueron creados con el prototipo learningpath, es decir, si realmete son instancias de este prototipo o en realidad son imitadores.

RECORDA que para crear prototipos, debemos usar la palabra this y new

Pondre como funciona el codigo completo y luego lo ire explicando de a poco.

function LearningPath({
    name = requiredParam("name"),
    courses = [],
  }) {
      this.name = name;
      this.courses = courses;

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

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

    if (isArray(learningPaths)) {
      this.learningPaths = [];
/* lo que hago con if (isArray(learningPaths)) {
      this.learningPaths = []; es entenderm yo pido el argumento learningPaths, la pc lo almacena en el objeto que esta ahi arriba en student({}),luego de eso valido todos los datos ejempllo this.name = name; ahora me queda validar los learningPaths y le digo, che pibe, no me intersa lo que tenes adentro, te voy a validar que sos un array, uh si, sos un array, pero se que sos un array vavio, por lo tanto ire veindo con un bulce CADA UNA DE TOS PROPIEDADES, y las que cumplan ser instancia de LEARNING PATHS te lo metere con un push.*/      

      for (learningPathIndex in learningPaths) {
        if (learningPaths[learningPathIndex] instanceof LearningPath) {
          this.learningPaths.push(learningPaths[learningPathIndex]);
        }
      }
    }

  }
  
  const escuelaWeb = new LearningPath({ name: "Escuela de js" });
  const escuelaDataScience = new LearningPath({ name: "Escuela de data science" });

  const juan = new Student({ 
    email: "[email protected]",
    name: "Juanito",
    learningPaths: [
      escuelaWeb,
      escuelaDataScience,
  ]
  });
  1. Como funciona el instanceof ⇒ Es importante saber que es un metodo que devolvera true o false.
function LearningPaths({
  name,
  courses = [],
}){
  this.name = name;
  this.courses = courses;
}
//el LearningPaths es mi prototipo

let desarrolloweb = new LearningPaths({
  name: "desarrollo web",
  courses: ["mates", "js", "guitarra"]
});

//desarrollo web es una instancia de LearningPaths, eso lo hago gracias al    new.

let funValidate = (a,b) => {
	let x = a instanceof b;
  console.log(x)
}

funValidate(desarrolloweb, LearningPaths)
//esto de aca arriba es la funcion de validacion, en esta hice el instanceof, como se puede ver, estoy validando si desarrolloweb es una instancia de learninghPaths. la respuesta es un //true.

Empezamos con el codigo

//Aca simplemente declare 2 prototipos, el LearningPath, y Student.

function LearningPath({
    name = requiredParam("name"),
    courses = [],
  }) {
      this.name = name;
      this.courses = courses;

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

    this.name = name;
    this.name = name;
    this.email = email;
    this.age = age;
    this.approvedCourses = approvedCourses;
    this.socialMedia = {
        twitter,
        instagram,
        facebook,
    };    
//Que sucede aca? Facil, la idea es que yo le pido toda la data al usuario de su ruta, y le pido en los argumentos de la funcion Student que me pase un     parametro de lo que sera su learningPaths, yo solo SE LO PIDO, pero NO LO TRABAJO, como a los otros.
if (isArray(learningPaths)) {
      this.learningPaths = [];      

      for (learningPathIndex in learningPaths) {
        if (learningPaths[learningPathIndex] instanceof LearningPath) {
          this.learningPaths.push(learningPaths[learningPathIndex]);
        }
      }
    }
  }
//Genial! ya el usuario nos debio pasar sus parametro learningpath,entonces esste codigo trbajare este parametro,si? bien lo primero que haremos con ese dato que no paso es decir con learningPaths, es verificar si es un array, es un   array? si lo es, entra a lo que sucede dentro, y lo primero que se hace es el  this.learningPaths = []; este afirmara que es un array, es neceario para guardar la data. luego de eso entramos a un bucle, un bucle bellisimo. Que hara este? facil, el con la variable learningPathIndex, agarrara cada dato de el array learningPaths, de esta manera => learningPaths[learningPathIndex]. por cada interracion esto learningPaths[learningPathIndex] cambiara, ya que solo es una variable del array. ahora por cada elemento, se vera si son instancias del LearningPath, que es nuestro prototipo. Por cada vez que ses verdadero, meteremos en el array learningPaths, esto learningPaths[learningPathIndex]. es decir, el elemento del array que respete tal condicion que hemos escrito.

ufff cuantas veces habra dicho Learning paths??? 😅

ni dios sabe que es learningpaths

instanceof

El operador instanceof verifica si un objeto en su cadena de prototipos contiene la propiedad prototype de un constructor

objeto isntacneof constructor

En la documentación de los recursos me percaté que existen dos maneras de usar el new
.

  • La primera en forma de Operador.* El cual permite a los desarrolladores crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados que tiene una función constructora
function Car(make,model,year) {
    this.make = make;
    this.model = model;
    this.year = year;
}
const car1 = new Car('Honda', 'Civic', '2000');

console.log(car1.make);// Honda

// sintaxis

new constructor[([arguments])]

constructor. Una clase o función que especifica el tipo de instancia del objeto.
arguments. Una lista de valores con los que se llamará al constructor.

La palabra new hace lo siguiente:

  1. Crea un objeto avascript simple y en blanco;
  2. vincula (establee el constructor de) este objeto a otro bojeto;
  3. Pasa el objeto recién creado del paso 1 como contexto this;
  4. Devuelve this si la función no devuelve un objeto.
    La creación de un objeto definido por el usuario requiere dos pasos:
    1. Defina el tipo de objto escribiendo una función
    2. Crea una instancia de objeto new
  • new.target. Esta propidad nos permite detectar si una función o constructor fue llamado usando el operador new. En constructores y funciones instanciadas con el operador new, new.target devuelve una referencia al constructor o función. En llamadas a funciones normales, new.target es undefined

¡Rayos!! Me he vuelto un ocho tratando de copiar y borrar y mover código. No estoy entendiendo bien

Esta clase necesita volver a ser grabada, necesitan ser más crticos con el material de enseñanza, una tercera parte de la clase es Juan diciendo learning path(s) una y otra vez!

Ni viendo 3 veces el video sé cual learning path usar

las Fabricas de objetos dejaran de serlo para convertirlas en prototipos asi que les borramos les cambiaremos los nombres de : function createLoQueSea {.....} simplmente function loQueSea{....} tambien comentamos por un rato los propiedades public y private de nuestras funciones

vi los videos varias veces pero al final lo unico q funciono fue tratar de hacerlo CASI sin mirar.
demasiado scroll en el video.

Este ha sido el curso que mas enredos me ha causo en especifico este video 😦

Si escribimos debugger en donde haríamos el console.log podríamos pausar el tiempo de ejecución y ver el valor de las variables, es una muy buena forma de revisar nuestro codigo

// Convirtiendo clase como prototipo
function LearningPath({
    name = requiredParam('name'),
    courses = [],
}) {
    this.name = name;
    this.courses = courses;
}


function requiredParam(param) {
    throw new Error(`${param} es obligatorio`);
}

// Convirtiendo clase como prototipo
function Student({
    name = requiredParam('name'),
    email = requiredParam('email'),
    age,
    approvedCourses = [],
    learningPaths = [],
    twitter,
    instagram,
    facebook,
} = {} ) {
    this.name = name;
    this.email = email;
    this.age = age;
    this.approvedCourses = approvedCourses;
    this.socialMedia = {
        twitter,
        instagram,
        facebook,
    };

    if (Array.isArray(learningPaths)) {
        this.learningPaths = [];
        for (const learningPath in learningPaths) {
            if (Object.hasOwnProperty.call(learningPaths, learningPath)) {
                const element = learningPaths[learningPath];
                // Si cada propiedad es una instancia del prototipo LearningPath
                if (!(element instanceof LearningPath)) {
                    console.warn('Learning Path no es una verdadera instancia');
                    return;
                } else {
                    this.learningPaths.push(element);
                }
            }
        }
    } else {
        console.warn('Learning Path no es un array');
        return;
    }
}

class Hola {
    constructor(name, courses) {
        this.name = name;
        this.courses = courses;
    }
}

const escuelaDW = new LearningPath({ name: 'Escuela de Desarrollo Web' });
const escuelaDS = new LearningPath({ name: 'Escuela de Data Science' });

const carlos = new Student({
    name: 'Carlos',
    email: '[email protected]',
    twitter: 'cerm_88',
    instagram: 'cerm_88',
    facebook: 'cerm88',
    learningPaths: [escuelaDW, escuelaDS, {name: 'impostor', courses: ['Malo']}],
});

// carlos.learningPaths = { name: 'Escuela de desarrolo web', courses: ['HTML']};

console.log(carlos.learningPaths);

Creo que esta clase me ha aumentado el deseo de aprender mejor TypeScript.

Concuerdo con muchos compañeros en que alguunas clases de este curso han sido muy confusas por el hecho de copiar, pegar, comentar, borrar, scrollear el codigo, además de que en esta clase específicamente el profe uso la variable learningpaths tantas veces (con mínimas variaciones) que no se sabe a que se asigna si todo el tiempo es learnigpaths, se hace mas confuso y enredado entender para los que recién vemos estos temas.
Critica constructiva que ojalá puedan mejorar en próximos cursos esos detalles, ya que el profe se nota que le pone todas las ganas y energía y lo transmite, pero esos detalles hacen que la clase se haga confusa.

Les propongo un juego: un shot por cada vez que el profe diga learning path

Este curso de POO INTERMEDIO me dejó una mala sensación, parecería que improvisan, ya que da la sensación que no hacen una validación de calidad antes de publicar un tema, ALGUNOS ERRORES Y POCO DIDÁCTICO.

Para los que hablan de que la clase fue confusa por tanto scroll, para nada. Además, en la parte de recursos de la clase está el código completo para que se guíen mejor. Buena clase además.

Deberían de grabar esta clase de nuevo, claro que esta chido que se comentan errores si se aprenda pero se desvía mucho el tema principal que era como usar instanceOf

deberían pensar en repetir esta clase, pero con menos confusión, la verdad dan ganas de no ver las que quedan

learningpaths…learningpaths everywhere…

Con todo respeto siento que al profesor se le fue de las manos el código y termino enredándose en el quid de la clase e intentar explicarlo. Deberían recortar las partes en las que el profesor se equivoque, y aunque ciertamente verlo cometer fallas concite la reflexión de los estudiantes en varios conceptos esta no deja de ser una clase de instanceof.
Si el motivo principal de la clase es explicar instanceof y su aplicación en un contexto real, realmente no hay necesidad de hacer una clase excesivamente larga, donde se pasa más tiempo acomodando código y redundando en conceptos que en explicar el motivo principal.
Esta clase pudo ser hecha en muchísimo menos tiempo y evitar generar confusiones y circunloquios innecesarios.
Repito: Hago este comentario desde el prisma más amigable y constructivo críticamente hablando que se pueda