No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Instance Of en JavaScript con instancias y prototipos

17/20
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.

  1. 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.

  2. 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鈥檚 go! 馃懆鈥嶐煉火煏碉笍鈥嶁檧锔

Contribuci贸n creada por: Mart铆n 脕lvarez (Platzi Contributor)

Aportes 44

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

ni dios sabe que es learningpaths

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??? 馃槄

Todos al ver el c贸digo de la clase.

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.

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!

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

Esta clase me recordo a esto:
-Hola soy el se帽or LearningPath, mirenme y voy a ayudarte con tus learningPaths!
-No yo soy el se帽or learningPath y yo voy a ayudarte con tus learningPaths!

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

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

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

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

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

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

Que mareada me acaba de pegar con ese codigo gigante todo comentado y los malditos learningPath鈥

Muy complicado de seguir, y eso que tengo algo de experiencia con JavaScript.

Venia super bien hasta esta clase. Todo es muy confuso, seria bueno que mejoraran esta clase鈥 escuche learningPath como 200 veces y no se en si, a que se refer铆a.

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.

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

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

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.

Amigos, les recomiendo leer en este sitio web como usar instance of en JS.

Viene explicado con un ejemplo m谩s simple de digerir.
Ejemplo de instance of

Es mucho mas simple el codigo si lo hacemos con for...of ya que no necesitamos especificar el index.
Recomiendo for...in para Objetos y for...of para Arrays

if (isArray(learningPaths)) {
        this.learningPaths = []
      for (let paths of learningPaths) {
          if (paths instanceof LearningPaths) {
            this.learningPaths.push(paths)        
        }
      }
    }

Pido un d贸lar por cada vez que el profesor dice LearningPath o LearningPaths

En el minuto 11:07 usa todos los 鈥渓earning path鈥 y sus variantes que haya creado y parece ser confuso pero no lo es, si solo sigues lo que 茅l hace te vas a confundir porque no sabes a qu茅 hace referencia o porqu茅 lo hace pero si analizas y entiendas la l贸gica del problema en realidad no hace cosas fuera de lo que ya vimos, todo lo que usa para validar y dem谩s son cosas que ya vimos en videos anteriores. Desarrollar tu l贸gica junto al profesor y crear tus propias variables y funciones ayuda a aprender mejor.

pd: Si no entiendes lo que hace analiza el c贸digo con papel y lapiz 馃槈, te puede llevar tiempo pero siempre funciona.

learningpaths鈥earningpaths everywhere鈥

Ibamos bien hasta aqu铆, se desorden贸 mucho el profe : ( Es mejor trabajar archivos separados por clase, en lo posible.

Nueva idea de juego, tomar un shot cada vez que el profe diga 鈥渓earning path鈥 jajajaja

Lo bueno que est谩n los recursos de cada clase para resumir 馃構.

D铆ficl de entender鈥ero ahi le damos

El video no me quedo muy claro al principio pero leyendo los RECURSOS de la clase entend铆 el c贸digo.
Vi mucho comentario de rehacer el video por que es muy confuso, pero, desde mi punto de vista me pareci贸 genial ver como solucionaba el problema. Ya que de eso se trata la programaci贸n, solucionar problemas.
(recuerden tambi茅n que las clases no solo son videos, tambi茅n hay documentaci贸n en el apartado de recursos y lecturas recomendadas)

LERNINPAS

Yo el if lo hice as铆 y s铆 me funcion贸. Me parece que el problema tiene que ver con la precedencia de operadores. El not (!) tiene mayor precedencia que el instanceof

for (elemento of learningPaths) {
    console.log({learningPaths, elemento, isInstanceOf: elemento instanceof LearningPath});

    if(!(elemento instanceof LearningPath)) {
      console.warn("learningPath NO es un verdadero LearningPath");
      return;
    }
  } 

En esta clase se mencion贸 m谩s veces 鈥渓earningPaths鈥, que el n煤mero de neuronas que me quedan馃槄

La clase es confusa solo me quedo para que funciona el instance of

驴Cu谩l es el uso de la instance of?

Como sugiere el nombre, instanceof en Java se usa para verificar si el objeto especificado es una instancia de una clase, subclase o interfaz . Tambi茅n se le conoce como operador de comparaci贸n debido a su caracter铆stica de comparar el tipo con la instancia

El operador instanceof en java script comprueba si la propiedad de prototipo de un constructor aparece en alg煤n lugar de la cadena de prototipo de un objeto

Definitivamente necesitan rehacer estos cursos o clases, mas modernos y aplicandolos a un proyecto real.

nose cuantos learning no se que habian en el codigo, muy confuso pero creo que estuvo bien 鈥

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.