No tienes acceso a esta clase

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

Objetos literales y prototipos en JavaScript

5/20
Recursos

Aportes 91

Preguntas 33

Ordenar por:

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

Prototipos (Prototypes)
JavaScript es un lenguaje basado en prototipos, por lo tanto entender el objeto prototype es uno de los conceptos más importantes que los profesionales de JavaScript necesitan saber. Este artículo te dará una breve descripción del objeto prototype a través de varios ejemplos. Antes de leer este artículo, deberás tener un entendimiento básico de la referencia this en JavaScript.

Objeto prototype
En honor a la claridad, vamos a examinar el siguiente ejemplo:

function Punto2D(x, y) {
  this.x = x;
  this.y = y;
}

Al declararse la función Punto2D, una propiedad predeterminada llamada prototype será creada para ella (ten en cuenta que, en JavaScript, una función es también un objeto). La propiedad prototype es un objeto que contiene una propiedad constructor y su valor es la función Punto2D: Punto2D.prototype.constructor = Punto2D. Y cuando tú llamas a Punto2D con la palabra reservada new, los objetos recién creados heredarán todas las propiedades de Punto2D.prototype. Para verificar esto, puedes agregar un método llamado mover en Punto2D.prototype de la siguiente manera:

Punto2D.prototype.mover  = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.mover (3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

El Point2D.prototype es llamado objeto prototipo o prototipo del objeto p1 y de cualquier otro objeto creado con la sintaxis new Point2D(…) . Puedes agregar tantas propiedades al objeto Point2D.prototype como quieras. Lo que suele hacerse es declarar métodos en Point2D.prototype y otras propiedades se declararán en la función constructora.

Los objetos integrados en JavaScript se construyen de manera similar. Por ejemplo:

El prototipo de los objetos creados con la sintaxis new Object() o {} es Object.prototype
El prototipo de los arreglos creados con la sintaxis new Array() o [] es Array.prototype
Y es igual con otros objetos integrados como Date y RegExp.
Object.prototype es heredado por todos los objetos y no tiene prototipo (su prototipo es null)

Cadena de prototipos

El mecanismo de la cadena del prototipo es simple: cuando accede a una propiedad p en el objeto obj, el motor de JavaScript buscará esta propiedad dentro del objeto obj. Si el motor falla en la búsqueda, continúa buscando en el prototipo de objeto obj y así sucesivamente hasta llegar a Object.prototype. Si finalizada la búsqueda no se ha encontrado nada, el resultado será undefined. Por ejemplo:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

En el fragmento de código anterior, la declaración var obj2 = Object.create(obj1) creará el objeto obj2 con el objeto prototipo obj1. En otras palabras, obj1 se convierte en el prototipo de obj2 en lugar de Object.prototype por defecto. Como puedes ver, bno es una propiedad de obj2, pero puedes acceder a ella a través de la cadena de prototipos. Sin embargo, para la propiedad c, se obtiene un valor undefined porque no se puede encontrar en obj1 y en Object.prototype.

Al crear el prototype aprobarCurso, quería ahorrarme un par de palabras y use una arrow function. Por supuesto me mando error.

Student.prototype.aprobarCurso = (nuevo) => {
    this.cursosAprobados.push(nuevo)
}

-Se debe a que las arrow function no tienen THIS. 🙂

Algo muy importante es que de la primera manera en la que Juan creó la función aprobar curso (dentro de la función constructora) NO es una buena práctica, ya que de esa manera todas las instancias de Student heredarían esa función, lo que a futuro afectaría el rendimiento, lo mejor es hacerlo de la segunda forma (Directamente al prototipo) para evitar ese consumo innecesario de recursos 😃

¿Qué es un literal?
La definición de literal alude a algo textual, por ejemplo, si declaramos una variable de la siguiente manera:

let colorDelSol = "Amarillo";

Podemos decir la variable colorDelSol tiene asignada un string literal ya que se asigna el valor textualmente.

Exactamente lo mismo ocurre con los objetos literales, por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

Donde:

El nombre del objeto es perro y sus claves/valores se describen en la siguiente tabla:

Clave Valor Tipo de dato
nombre Scott string
color Cafe string
edad 5 int
macho true bolean

Los tipos de datos que puede almacenar un objeto pueden ser strings, enteros, boleanos, inclusive otros objetos.

Acceder a valores de un objeto
Existen 2 maneras simples para poder acceder a los valores de un objeto:

Notación de punto
Consiste en escribir el nombre del objeto seguido de un punto y el nombre de la propiedad a la cual se quiere acceder: objeto.clave

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};

console. info (perro.nombre); // Scott
console. info(perro.edad); // 5
Notación de corchetes / llaves cuadradas o brackets
Consiste en escribir el nombre del objeto anteponiendo entre corchetes la clave a la que se quiere acceder: objeto[clave]

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true
};


console.info(perro['nombre']); // Scott
console.info(perro['edad']);  // 5

Ambas maneras retornan los mismos resultados, por lo tanto se pueden considerar homónimas, pero en la práctica se acostumbra a usar más la notación de punto.

Métodos en un objeto
Un objeto no solo se limita a la agrupación de claves valores, es posible también incorporar métodos de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

console.log(perro.ladrar()); // Scott puede ladrar

Inserción de nuevos campos a un objeto
Para agregar nuevos campos al objeto solo basta con mencionar el nombre del objeto seguido de la propiedad nueva y el valor nuevo a insertar: perro.tamaño = “Grande”;

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.tamaño = "Grande";
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 5,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott",
  tamaño: "Grande"
}
*/

Con ellos conseguiremos agregar un nuevo valor al objeto.

Actualizar campos del objeto
Basta con sobre escribir una propiedad ya existente, de la siguiente manera:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};

perro.edad = 8;
console.log(perro);
/*
[object Object] {
  color: "Cafe",
  edad: 8,
  ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },
  macho: true,
  nombre: "Scott"
}
*/

Eliminación de campos
Para borrar una propiedad de un objeto se utiliza la palabra reservada delete de la siguiente manera:
delete nombre_del_objeto.clave;
Por ejemplo:

let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   }

};

delete perro.color;
console.log(perro);
/*
let perro = {
   nombre:"Scott",
   color:"Cafe",
   edad: 5,
   macho: true,
   ladrar: function(){
     return(`${this.nombre} puede ladrar`)
   },

};
*/




Veo mucha luz en este curso. Estaba en la Escuela De JavaScript y este curso no está allí. Vine a la escuela de desarrollo web y si está.
Cuando intenté ver el curso de JavaScript Profesional no entendía nada, pero Juan lo ha hecho mucho más fácil en este curso. Debería también estar este en la escuela de JavaScript.

Si no estoy mal la nueva sintaxis para crear clases en JS es asi:

12 videos menos para salir de la caverna…

Googleen todos los conceptos y busquenlos en w3school o mozilla Developer y el conocimiento se fija muy bien cuando hacen eso. ;D

Genial, no sabía que se podían declarar funciones de una manera más limpia en los objetos literales.

//* Objeto literal
const ximena = {
  name: 'Ximena',
  age: 21,
  hermosa: true,
  cursosAprobados: [
    "Curso de introducción al Marketing Digital",
    "Curso de Community Manager"
  ],
  aprobarCurso(nuevoCursito) {
    this.cursosAprobados.push(nuevoCursito);
  },
};


//* Prototipo
function Student(name, age, cursosAprobados) {
  this.name = name
  this.age = age
  this.cursosAprobados = cursosAprobados
};

//* Nueva manera de escribir funciones
Student.prototype.aprobarCurso = function(nuevoCursito){
  this.cursosAprobados.push(nuevoCursito)
};

const miguel = new Student(
  "Miguel Ángel",
  22,
  ['Básico de React', 'Profesional de JS']
);

JavaScript es a menudo descrito como un lenguaje basado en prototipos - para proporcionar mecanismos de herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un objeto plantilla que hereda métodos y propiedades.

Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la cadena de prototipos, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.

Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad prototype, que reside en la función constructora del objeto, no en la instancia misma del objeto.

En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad proto, la cual es derivada de la propiedad prototype sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.

Nota: Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante Object.getPrototypeOf(obj), o a través de la propiedad proto) como el prototipo que contiene el constructor (que se encuentra en la propiedad prototype del constructor) hacen referencia al mismo objeto.

Al fin estoy entiendo que era todo eso de object y proto que sale en la consola, lo había visto ya en varios cursos pero nunca tocaban ese tema.

I know is a little bizarre, but this is the practice code that I made to test everything related to classes build with functions.

function Classer(namer) {
	this.name = namer;
	this.perro = '@perro';
	this.ojo = () => 'go go power ranger';
}

Classer.prototype.joeCarter = function (ohYeah) {
	return 'Oh Yeah! ' + ohYeah;
}

const literalObj = {
	name: 'center',
	joeCarter() {
		return 123;
	}
};

const litClasser = new Classer('Tesla');

Mi nombre es Gabriel Cordero hoy es el día 🔸️119🔸️ de mi viaje para convertirme en desarrollador web de frontend en New York. Estoy grabando mi viaje porque se que lo conseguire, si les interesa este es mi ultimo video: https://youtu.be/egBUA32EJYU

Mis videos son en ingles ya que quiero practicarlo y mejorarlo.

De pronto para los que no entendieron la parte del this, les dejo este breve articulo a como yo lo entendi.

Objeto This

Es un objeto especial que hace referencia al contexto en el que se esta ejecutando la función.

Lo que hace es apuntar a la referencia del objeto literal creado ejemplo.

const nathy = {
    name: 'natalia',
    age: function () {
        document.addEventListener('click', (event){
            this.name
            /*sin embargo esto no va a hace referencia al name del
            objeto nathy ya como que this apunta al contexto de referencia de la
            funcion this terminara apuntando a document.*/
        })
    }
}

Es decir this apunta a la referencia del contexto del cuál se ejecute. Actualmente hay diferentes maneras con las (arroy funtions ) de apuntar directamente a la referencia del objeto y no a la referencia de donde se ejecuta dicho contexto.


const nathy = {
    name: 'natalia',
    age: function () {
        document.addEventListener('click', event => this.name)
    }
}

El operador => de las arrow función trae implicitame un metodo que permite apuntar directamente al objeto literal nathy.

A un objeto tambien podemos entrar a traves de la notacion de corchetes [], esto es de gran ayuda si por ejemplo no sabemos que valor vamos a añadir, podria ser el caso de que una funcion reciba como argumento una nueva propiedad

Creo que les puede ayudar un poco esta informacion POO MDN

En mi opinion, y espero feedback 😇 Objetos literales : se crean apartar de una variable, su sintaxis para moldeo es diferente, y estos tienen comportamiento reservado... prototipos , objetos clásicos, o instancias: es el molde general del que se crean los futuros objetos heredando su comportamiento, estos además de ser diferentes en sintaxis, pueden extender desde prototype, nuevos comportamientos diseñados desde fuera por nosotros, ala hora de visualizar no los muestra en objeto general, pero si en el __proto__

La pregunta es, ¿Qué le hizo Natalia al profe?

esa Natalia debió haber tratado al profe como un objeto :v
valla nombre “random”

**CODIGO CON APUNTES **
Literal object, prototype object, instance


//Un objeto literal, Literal Object
const natalia = {
    name: 'natalia',
    age: 20,
    approvedCourse: [
        'Curso definitivo de HTML y CSS', 'Curso practico de HTM y CSS'
    ],
    passCourse(newCourse) {
      this.approvedCourse.push(newCourse);
    },
};
 
//Un prototipo de objeto para crear n obejetos 

function Student (name, age, approvedCourse) {
    this.name = name;
    this.age = age;
    this.approvedCourse = approvedCourse;

    // *** Metodo adentro del del prototipo de objeto ***/
    //this.passCourse = function (newCourse)  {
    //    this.approvedCourse.push(newCourse);
    //}
}
//Una forma nueva de definir el metodo fuera del del prototipo

    Student.prototype.passCourse = function (newCourse)  {
        this.approvedCourse.push(newCourse);
    }

// Creamos una instancia del prototipo Student 

const steve = new Student(
    'Steve Licona',
    35,
    [
    'Introducción a la POO', 'POO con JavaScript', 'JavaScript Practico'
    ],

) 

El código de la clase probado y listo para usar:

const natalia = {
  name: "Natalia",
  age: 20,
  cursosAprobados: [
    "Curso Definitivo de HTML y CSS",
    "Curso Practico de HTML y CSS"
  ],
  aprobarCurso(nuevoCurso) {
    this.cursosAprobados.push(nuevoCurso);
  }
}

natalia.aprobarCurso("Curso de CSS Grid");

function Student (name, age, cursosAprobados) {
  this.name = name;
  this.age = age;
  this.cursosAprobados = cursosAprobados;
  // this.aprobarCurso = fucntion (nuevoCurso) {
  //   this.cursosAprobados.push(nuevoCurso);
  // }
}

Student.prototype.aprobarCurso = function (nuevoCurso) {
  this.cursosAprobados.push(nuevoCurso);
}

const juanita = new Student(
  "Juanita de Arcos",
  15,
  [
    "Curso de introduccion a los videojuegos",
    "Curso de creacion de personajes",
  ],
);

juanita.aprobarCurso("Curso de Unreal Engine");

También podemos acceder a la propiedad de un objeto literal a través de la notación de corchetes [] y lo que haya dentro debe ser entre comillas a excepción de que sea una variable
_Ejemplo
_

natalia[“age”]
//Devolverá la edad de natalia

Me encantó esta clase , el profe explica bastante bien y lo hace facil de entender, hace tiempo que no encontraba a alguien asì, que me hiciera sacar el estrés de no entender las clases

AQUÌ EL RESUMEN DEL CODIGO CON EXPLICACIÒN

Hacer que literal apruebe otro curso

const literal = { name: 'eduardo', age: '19', approvedCourses: [ 'nada' ], };

Código generado por IA. Revisar y usar cuidadosamente. Más información sobre preguntas frecuentes.

  1. Objeto Literal (literal):

    • Aquí estamos creando un objeto llamado literal utilizando la sintaxis de objeto literal.
    • Las llaves {} encierran las propiedades y valores del objeto.
  2. Propiedades del Objeto:

    • name: Esta propiedad tiene el valor 'eduardo'. Representa el nombre.
    • age: Esta propiedad tiene el valor '19'. Representa la edad.
    • approvedCourses: Esta propiedad es un arreglo (array) que contiene un solo elemento: 'nada'.
  3. Acceso a Propiedades:

    • Para acceder a las propiedades del objeto, utilizamos el punto (.) seguido del nombre de la propiedad.
    • Por ejemplo:
      • literal.name se refiere al valor 'eduardo'.
      • literal.age se refiere al valor '19'.
  4. Método push():

    • En el arreglo approvedCourses, estamos utilizando el método push() para agregar un curso aprobado.
    • El método push() agrega elementos al final del arreglo.
    • En este caso, estamos agregando el elemento 'nada' al arreglo approvedCourses.


    crear metodos a nuestro objeto liteal

    const literal = {
        name: 'eduardo',
        age: '19',
        approvedCourses: [
            'nada',
            'nadita'
        ],
    
        // Crear métodos en nuestro objeto literal
        aprobarCurso(nuevoCursito) {
            this.approvedCourses.push(nuevoCursito);
        }
    };
    
    1. Método aprobarCurso:
      • Hemos creado un método llamado aprobarCurso dentro del objeto literal.
      • Un método es simplemente una función que está asociada a un objeto.
      • La sintaxis para definir un método es similar a la de una función, pero se coloca dentro del objeto.
      • En este caso, aprobarCurso acepta un parámetro llamado nuevoCursito.
    2. Uso de this:
      • La palabra clave this se refiere al objeto actual en el contexto del método.
      • En el método aprobarCursothis se refiere al objeto literal.
      • Por lo tanto, this.approvedCourses se refiere al arreglo approvedCourses dentro del objeto literal.
    3. Método push():
      • El método push() es una función incorporada en JavaScript que se utiliza para agregar elementos al final de un arreglo.
      • En este caso, estamos usando this.approvedCourses.push(nuevoCursito) para agregar un nuevo curso (nuevoCursito) al arreglo approvedCourses.


    CREACION DE PROTOTIPOS

    // CREACIÓN DE PROTOTIPO
    function student(name, age, approvedCourses) {
      this.name = name;
      this.age = age;
      this.approvedCourses = approvedCourses;
    }
    
    // Método añadirCurso al prototipo
    student.prototype.approvedCourses = function (nuevoCursito) {
      this.approvedCourses.push(nuevoCursito);
    };
    
    // Creación de una instancia (objeto) usando el prototipo
    const juanita = new student('joselito', 15, 'reedes');
    
    1. Función Constructora (student):
      • La función student es un constructor. Se utiliza para crear objetos con propiedades específicas.
      • Los constructores se llaman con la palabra clave new para crear instancias de un tipo particular de objeto.
      • En este caso, student acepta tres argumentos: nameage y approvedCourses.
      • Dentro del constructor, asignamos estos valores a las propiedades del objeto que se está creando (this.namethis.agethis.approvedCourses).
    2. Prototipo (student.prototype):
      • El prototipo es un objeto compartido que contiene propiedades y métodos que todas las instancias creadas con el constructor pueden acceder.
      • En el código, estamos agregando un método llamado approvedCourses al prototipo de student.
      • Este método permite añadir un nuevo curso (nuevoCursito) al arreglo approvedCourses de cualquier instancia de student.
    3. Uso de new para crear una instancia:
      • La línea const juanita = new student('joselito', 15, 'reedes') crea una instancia de student.
      • new student(...) llama al constructor student con los argumentos proporcionados.
      • juanita es ahora un objeto con las propiedades nameage y approvedCourses.

**Desde ES6 ** ya se pueden usar clases en javaScript pero igual siguen siendo basadas en prototipos solo que la sintaxis es mas paresida a la de lenguajes como java y php,

Puede que para muchas personas sea mas facil usar objetos de esta manera.

Ejemplo de como se ve

// DEfinir una clase llamada User
class User {
    constructor(name,age,email){
        this.name = name;
        this.age = age;
        this.email =email;
    }

    saludar(){
        console.log(`Hola mi nombre es ${this.name} y tengo ${this.age} años. a y este es mi email: ${this.email}`)
    }
}

//Crear una instancia de la clase User
let user1 = new User('Juan', 30, '[email protected]');

user1.saludar(); // out put: Hola mi name es Juan y tengo 30 años. a y este es mi email: [email protected]


//heredar una clase
class Student extends User{
    constructor(name,age,email,learningPath){
        super(name,age,email);
        this.learningPath = learningPath;
    }
    studying(){
        console.log(`${this.name} esta estudiando ${this.learningPath}.`)
    }
}

let student1 = new Student("eduard",99,"[email protected]","javaScript",)

student1.saludar();// out: Hola mi name es eduard y tengo 99 años. a y este es mi email: [email protected]
student1.studying();// out put: eduard esta estudiando javaScript.

❌ Herencia por prototipos -> Delegacion de Objetos ✅
El nombre oficial es herencia por prototipos pero es mas facil de entender si lo llamamos “Delegacion de objetos”. Ya que en JavaScript no existe la herencia como tal lo que hay es delegacion de objetos es decir objetos que le piden cosas a otros objetos.

Entonces un prototipo es un Objeto comun y corriente al cual se le delegan tareas o responsabilidades.

Dejo este video como complemento de esta clase: https://www.youtube.com/watch?v=a2tp64Vtzxs

¡Excelente clase!

Del capítulo anterior, ¿qué es un objeto? Creo que lo que entiendo es que es un tipo de dato con características específicas que nutren su comportamiento, personalidad, etc. Ej. Una vaso, puede ser de cristal, de plástico, de cerámica, blanco, rojo, negro, etc.

Deberian tener boton de like en las clases, este curso esta genial!!

Prototipos:
En JavaScript, un prototipo es una característica de la programación orientada a objetos que permite crear objetos a partir de un modelo o plantilla ya existente. Los prototipos son una forma de heredar propiedades y métodos de un objeto a otro objeto.

De todos los profesores por los que he pasado por toda la ruta completa de Escuela de Desarrollo Web, JuanDC es el mejor literalmente, Ojala todos los otros profesores pudieran tener las mismas buenas practicas que el.

this es el objeto contexto al que hace referencia una función.

new, según lo entiendo, es una forma de instanciar un nuevo objeto de una clase. Y me gusta pensar que new crea un lienzo en blanco, un nuevo this, que la function Student o Cat llenan como propiedades de un objeto.

.prototype hace referencia a lista de métodos y propiedades que la clase posee y pueden acceder todas sus instancias. Puedes añadirlas según necesites a el objecto prototype y la heredaran todas sus instancias.

Esta forma de “herencia” en Javascript se debe a que al llamar un atributo de un objeto el lenguaje no solo busca dentro de el objeto que lo pide, sino también a la cadena de prototipos entrelazados como “clases” (desde Cat hasta Object) viendo cual de todos ellos tiene el atributo que se esta llamando.

min 14:30
"JUANITA ALEJANDRA"

JAJAJAJAJAJA
que clase de nombre es ese!!! jajajajajaja XD

var Sergio = {
    name: "Sergio",
    age: 23,
    cursosAprobados : [
        "Curso Básico de Javascript",
        "Curso de POO"
    ],

    aprobarCurso(cursoNombre, cursoNota){

        if (cursoNota >= 90){
            console.log(`El estudiante ${this.name} ha aprobado el curso ${cursoNombre} con la nota de ${cursoNota}`);
            this.cursosAprobados.push(cursoNombre);
        } else{
            console.log("La nota no es la mínima de aprobación de cursos");
        }
    }
};

Excelente clase, tanto esta como la anterior me encantaron 😄

Primer Prototipo:

fin Primera forma de trabajar con los prototipos

Llamando a una funcion por fuera de la primera function usando prototipe



function student1(name , age , cursosAprobados){
    this.name= name;
    this.age =  age;
    this.cursosAprobados = cursosAprobados;
    this.aprobarCursos = function(nuevoCurso){
        this.cursosAprobados.push(nuevoCurso);
    }
    // this.cursosAprobados.push()
}

function student2(name , age , cursosAprobados){
    this.name= name;
    this.age =  age;
    this.cursosAprobados = cursosAprobados;
   
}

student2.prototype.aprobarCursos=function(nuevoCurso){
    this.cursosAprobados.push(nuevoCurso);

}
const Monica = new student1('Monica' , 28 , ['JS basico' , 'python avanzado']);
const Juanita =  new student2('Juanita' , 28 , ['JS basico' , 'python avanzado']);

class student {
    constructor(nameUser,age){
        this.nameUser = nameUser;
        this.age = age;
        this.cursosAprobados = [];
        this.puntos = 0;
    }

    sumar_curso(curso){
        this.cursosAprobados.push(curso);
        this.puntos += 150;
    }
}

Tengo entendido que la function () { } tiene acceso al mismo this que el ejemplo que utiliza el objeto literal.

Good class! Teacher JuanDC has a funny and clear way to teach.

Obteto literal

const natalia = {
    name: 'Natalia',
    age: 20,
    cursosAprobados: [
        'Curso Definitivo de HTML y CSS',
        'Curso Practico de HTML y CSS',
    ],

    aprobarCurso(nuevoCurso) {
        this.cursosAprobados.push(nuevoCurso);
    }
};

    // Hacer que natalia apruebe otro curso

natalia.cursosAprobados.push('Curso de Responsive Design');

console.log(natalia);

Prototipo

function Student(name, age, cursosAprobados) {
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
    // this.aprobarCurso = function (nuevoCurso) { Esto también es una manera de crear un metodo
    //     this.cursosAprobados.push(nuevoCurso);
    // }
}

// Creando método para Student

Student.prototype.aprobarCurso = function (nuevoCurso) {
    this.cursosAprobados.push(nuevoCurso);
}

Creando una instancia de Student

const juanita = new Student(
    'Juanita Alejadra',
    20,
    [
        'Curso de introduccion a videjuego',
        'Curso de creacion de personajes',
    ],
)

como se vería en la consola natalia

como se vería en la consola juanita

para el caso del objeto juanita, el método aprobarCurso queda en [[Prototype]]

//Aqui crearemos nuestro primer prototipo en JS

function Student(name, age, cursosAprobados){
    this.name = name;
    this.age = age;
    this.cursosAprobados = cursosAprobados;
}

//en esta seccion crearemos un metodo para el prototipo student

Student.prototype.aprobarCurso = function(nuevoCurso){
    this.cursosAprobados.push(nuevoCurso);
}

const juan = new Student(
    "Juan",
    25,
    [
        "Curso de introduccion a la produccion de videojuegos"
    ]
);

JavaScript es a menudo descrito como un lenguaje basado en prototipos - para proporcionar mecanismos de herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un objeto plantilla que hereda métodos y propiedades.

Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la cadena de prototipos, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.

Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad prototype, que reside en la función constructora del objeto, no en la instancia misma del objeto.

En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad proto, la cual es derivada de la propiedad prototype sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.

Nota: Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante Object.getPrototypeOf(obj), o a través de la propiedad proto) como el prototipo que contiene el constructor (que se encuentra en la propiedad prototype del constructor) hacen referencia al mismo objeto.

El operador new 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 un función constructora.

¿Qué es un prototipo? - Simple
Un Prototipo es la base del desarrollo de todos los objetos, imagina una casa que solo fue construida con ladrillos sin ningún tipo de decoración ni tampoco ventanas o puertas esa es nuestra base o nuestro PROTOTIPO, al agregar puertas, ventanas, focos, cableado, vamos incluyendo nuevos objetos y estos pueden ir generando más. Podemos pensar por ejemplo la COCINA como un objeto heredado del protipo casa ¿Por qué? bueno en un mundo lógico y algo estricto NO puede existir una cocina sin una casa ahora la COCINA tiene objetos como mesa, sillas, horno, refrigerador y cada objeto tiene sus propiedades(atributos) y acciones(métodos) como el horno que tiene la función calentar

¡Pero qué buena clase!

Me quedaron claros varios conceptos del curso de fundamentos de POO.
Muchas gracias.

efe por juanita

Yo coloque la variable this.cursos con una asignacion de [] , demanera que no queda referenciada a algun tipo de variable sino mas bien como un array cualquiera , de esta forma con el push puedo meterle los cursos en forma de array.

Yo tengo una duda
En ES2015 se ingresaron las clases en javascript.
Por buenas prácticas ¿Debo utilizar Prototype o las clases?

Esta fue mi solucion

class learningPath{

    constructor({name,description}){

        this.name = name;
        this.description = description;
    }
}

var webDevelopment = new learningPath({

    name: "Escuela de Desarrollo Web",
    description: "Aprende desarrollo web Full Stack desde cero con HTML, CSS y JavaScript. Domina herramientas como React, Vue, Angular y backend development con Node.js."

});

var englishAcademy = new learningPath ({

    name: "Platzi English Academy ",
    description: "Aprende inglés desde cero. Consigue oportunidades de trabajo internacionales y duplica tus ingresos al comunicarte efectivamente en inglés."
});

This. hace referencia al mismo objeto, en este caso es el objeto natalia

Para los que intenten implementar arrow functions a diestra y siniestra (como lo intenté en algún momento) les dejo un recurso para que complementen lo aprendido en los cursos de -ECMAScript 6+ y -Closures y Scopes, y aprendan la razón del por qué no pueden usarlo en las mismas aplicaciones de esta clase: link

// Objeto literal

const Natalia = {
    // Atributos
    name: 'Natalia',
    age: 20,
    cursosAprobados: [
        'HTML',
        'CSS',
        'JS'
    ],
    // Métodos
    aprobarCurso(nuevoCurso) {
        // This hace referencia al propio objeto
        this.cursosAprobados.push(nuevoCurso);
    },
    // Otro método
    estudiar: () => {
        // Ojo, las funciones anónimas no soporte this
        return 'Estoy Estudiando'
    },
    // Otro método
    repasar: function () {
        return 'Estoy repasando'
    }
};

// Hacer que Natalia apruebe otro curso
//Natalia.cursosAprobados.push('Mobile First');

// Hacer que Natalia cambie de nombre
//Natalia.name = 'Natha';

Natalia.aprobarCurso('Mobile First');

console.log(Natalia.cursosAprobados);
console.log(Natalia.estudiar());
console.log(Natalia.repasar());


// Prototipos

function Student(name, age, cursosAprobados) {
    // Propiedades
    this.name =name;
    this.age = age;
    this.cursosAproabdos = cursosAprobados;
    // Método dentro del prototipo, no usaremos este
    // this.aprobarCurso = function (nuevoCurso) {
    //     this.cursosAproabdos.push(nuevoCurso);
    // }
}

// Método del prototipo por fuera
Student.prototype.aprobarCurso = function (nuevoCurso) {
    this.cursosAproabdos.push(nuevoCurso);
}

Student.prototype.estudiar = () => {
    // Ojo, las funciones anónimas no soporte this
    return 'Estoy estudiando'
}

// Creando el objeto
const mary = new Student(
    'Natalia',
    25,
    ['Java', 'JS', 'PHP']
);

mary.aprobarCurso('HTML');
console.log(mary.cursosAproabdos);
console.log(mary.estudiar());

Aquí esta mi clase Student

class Student {
    // Propiedades Base
    constructor(name, lastname, age, coursesApproved) {
        this.name = name;
        this.lastname = lastname;
        this.age = age;
        this.coursesApproved = coursesApproved;
    }
    // Metodos
    approvedCourses(newCourse) {
        this.coursesApproved.push(newCourse);
    }
}

📌 Objetos Literales

const natalia = {
// atributo
	cursosAprobados: ['Programación Básica']
// método 
	aprobarCurso(cursoAprobado) {
	this.cursosAprobados.push()cursoAprobado;
	},	
} ;

📌 Prototipos

// Prototype
function Student(name, age, cursosAprobados) {
	this.name = name,
	this.age = age,
	this.cursosAprobados,
	//metodo 
	this.alertar = function (mensaje) {
	alert('Hola!')
}
}

// Método con prototype
Students.prototype.aprobarCurso = function(cursoAprobado) {
	this.cursosAprobados.push(cursoAprobado)
}
// Instanciar

const juanita = new Student(
	"Juanita Alejandra",
	20,
	[
	"Curso 1",
	"Curso 2",
	]
)


Hay extensiones que son realmente maravillosas para alguien que esta aprendiendo

Información Adicional:
Las funciones Lambda o funciones flecha no son funciones que puedan ser construidas como un Objeto, son solo expresiones.
Sean u y v:

let u = function () {}
let v = () => {}

u: es una función, y puede comportarse como función constructora.
v: es una expresión de función, es una función lambda.

const uu = new u(); //se construye uu y hereda el prototipo de Object
const vv = new v(); //Error v no es un constructor

De modo que no podremos usarlas para agregar propiedades a algún Literal Object

const car = {
    year: 2010,
    color: 'red',

    setColor = function (color){ //Correcto
        this.color = color;
    },
    setColor = (color) => {  //Incorrecto
        this.color = color;
    }
}

Las funciones lambda tienen sus limitaciones, sobre funciones lambda

Les dejo mi código de esta clases 👇

  • Literal Objects :
const ZERO = {
  name: 'Zero',
  age: 14,
  platziPoints: 15200,
  approvedCourses: [
    'Curso Básico de JavaScript',
    'Curso Básico de Programación en Go',
    'Curso Básico de Python',
    'Curso de Administración de Servidores Linux',
    'Curso de Economía Digital: Bitcoin y Criptomonedas 📜',
  ],
  approveCourse(course) {
    this.approvedCourses.push(course);
  },
  addPoints(points) {
    this.platziPoints += points;
  },
};

// Print current approved Courses
console.log(ZERO.approvedCourses);

// Approve a course...
ZERO.approveCourse('Curso de Introducción al Despliegue de Aplicaciones');

// Print current approved courses
console.log(ZERO.approvedCourses)

// Print current Platzi Points
console.log(ZERO.platziPoints);

// Make a good contribution to the community ⬇️

ZERO.addPoints(2400);

// Print current Platzi Points
console.log(ZERO.platziPoints);
  • Prototypes
function Student(name, age, approvedCourses) {
  this.name = name;
  this.age = age;
  this.approvedCourses = approvedCourses;
}

// eslint-disable-next-line func-names
Student.prototype.aproveCourse = function (course) {
  this.approvedCourses.push(course);
};

const MAGI = new Student('Magi', 66, ['Curso de SQL y MySQL']);
console.log(MAGI.approvedCourses);
MAGI.aproveCourse('Curso de Computación Básica');
console.log(MAGI.approvedCourses);

Les dejo mi repositorio del curso con todas mis notas y código: UltiRequiem/oop-js-platzi.

Minuto 3:33 ¿instancias de objeto? se refiere a instancias de prototipo instancias de clase? Porque al ser literales ya son instancias del Objeto Object o del prototipo Object.
ok vamos aprendiendo, Poco a Poco. Buena clase, Toca meter mucho cuidado.
el codigo me salio como undefined con natalia y juanita asi q lo modifique *// Declaración de la clase Student*class Student {    constructor(name, age, cursosAprobados) {        this.name = name;        this.age = age;        this.cursosAprobados = cursosAprobados;    }     aprobarCurso(nuevoCursito) {        this.cursosAprobados.push(nuevoCursito);    }} *// Creación de una instancia para Juanita*const juanita = new Student("Juanita Alejandra", 15, \[    "Curso de Introducción a la Producción de Videojuegos",    "Curso de Creación de Personajes",]); *// Creación de una instancia para Natalia*const natalia = new Student("Natalia", 20, \[    "Curso Definitivo de HTML y CSS",    "Curso Práctico de HTML y CSS",]); *// Ejemplo de uso del método aprobarCurso*juanita.aprobarCurso("Curso de Animación 2D");natalia.aprobarCurso("Curso de React"); console.log(natalia);console.log(juanita);![]()
hice los mismos pasos pero me aparecieron indefinido a natalia y a juanita aqui corregi el codigo *// Función constructora para Student*function Student(name, age, cursosAprobados) {    this.name = name;    this.age = age;    this.cursosAprobados = cursosAprobados;} *// Método para aprobar curso usando prototype*Student.prototype.aprobarCurso = function(nuevoCursito) {    this.cursosAprobados.push(nuevoCursito);} *// Creación de una instancia para Juanita*const juanita = new Student("Juanita Alejandra", 15, \[    "Curso de Introducción a la Producción de Videojuegos",    "Curso de Creación de Personajes",]); *// Creación de una instancia para Natalia*const natalia = new Student("Natalia", 20, \[    "Curso Definitivo de HTML y CSS",    "Curso Práctico de HTML y CSS",]); *// Ejemplo de uso del método aprobarCurso*juanita.aprobarCurso("Curso de Animación 2D");natalia.aprobarCurso("Curso de React"); console.log(natalia);console.log(juanitaa);
Hola a todos. Pregunta, según lo visto en la clase anterior y lo que comenta el profe desde el minuto 2, ¿Se puede decir que una de las condiciones para que un objeto sea un objeto es que deba heredar de el prototipo "Object" y debido a que el prototipo Object no hereda de otro es por eso que "Object" no es un objeto sino un prototipo? Gracias.?
Hola Miguel, no puedo responder tu pregunta ahí mismo no sé por qué. Pero, si te refieres a la consola del sistema si estás en windows es Bash o la terminal. Si estás en Mac te recomiendo zsh. Y si te refieres la consola del navegador anticlick inspeccionar y ahí en las pestañas a la derecha de "Elements" dice "Console" ahí está la consola.
objetos literales son interesantes

Ese toque que le Juan a sus cursos hace que uno siga adelante, porque de la nada te puede hacer sonreír y hacer seguir adelante. Wow sigo aprendiendo cosas que no sabía 🤭

Un ejemplo de lo aprendido en la clase, -Creando un objecto de tipo Pokemon. ```js function Pokemon(name, type, weaknesses, gender, numPokedex) { this.name = name; this.type = type; this.weaknesses = weaknesses; this.gender = gender; this.numPokedex = numPokedex; } Pokemon.prototype.Addweaknesses = function (types) { this.weaknesses.push(types); }; const charizad = new Pokemon( "Charizadad", ["Fire", "Fly"], ["Water", "Electric"], "Male", 6 ); charizad.Addweaknesses("Rock"); ```function Pokemon(*name*, *type*, *weaknesses*, *gender*, *numPokedex*) {  this.name = *name*;  this.type = *type*;  this.weaknesses = *weaknesses*;  this.gender = *gender*;  this.numPokedex = *numPokedex*;} Pokemon.prototype.Addweaknesses = function (*types*) {  this.weaknesses.push(*types*);}; const charizad = new Pokemon(  "Charizadad",  \["Fire", "Fly"],  \["Water", "Electric"],  "Male",  6); charizad.Addweaknesses("Rock");

Así que:

objeto.prototype.funcion = funcion(){};

Me quedé así 🤯 cuando procese que el array.push funciona porque dentro del proto del array está el método push que realiza la acción xd.


function Studen(name, age,courses) {
    return {
        name,
        age,
        courses,
        addCourse: function(nameC){
            this.courses.push(...nameC);
        }
    }
}

const student1 = new Studen('John', 25, ['Math', 'English']);
student1.addCourse(['Science', 'History']);
console.log(student1);

Observando atentamente…

Método dentro del prototipo

Creando método en objetos literales, segunda forma

Creando métodos en objetos literales, primera forma

IMPORTANTE

Es mejor crear las funciones fuera del prototipo para el ahorro de recursos.

//---------------Creación de objetos-----------------------

//### Objeto literal

const ricardo = {
    nombre:"Ricardo",
    edad:24,
    cursosAprobados:[
        "Curso de Programación Básica",
        "Curso de Closures y Scope"
    ],
    agregarCursoAprobado(newCurso){
        this.cursosAprobados.push(newCurso);
    }
}

//ricardo.nombre="Ricar"; //cambiar el valor de la propiedad nombre
//ricardo.agregarCursoAprobado("Curso Básico de JavaScript"); //usar el método del objeto


//### Objeto instanciado a un prototipo

function Student(nombre,edad,cursosAprobados) { //prototipo
    this.nombre = nombre,
    this.edad = edad,
    this.cursosAprobados = cursosAprobados,
    this.borrarCurso = function(){ //no es buena práctica porque afecta el rendimiento, es mejor hacerlo exteriormente (con prototype) para evitar el consumo innecesario de recursos
        this.cursosAprobados.pop();
    }
}

Student.prototype.addCursoAprobado1 = function (newCurso) { //crear un método fuera de la declaración del prototipo, está se ocultará en [[Prototype]] : Object
    this.cursosAprobados.push(newCurso);
}

Student.prototype.addCursoAprobado2 = (newCurso) => cursosAprobados.push(newCurso); //las arrow function implicitamente hacen referencia a this, por lo que no es necesario declararlo


const ricardito = new Student( //creación de objeto instancia de un prototipo
    "Ricar",
    24,
    [
        "Curso de Programación Básica",
        "Curso de Closures y Scope"
    ]
);

Prefiero curso largos a videos de media hora!!!

Código de clase:

//---------------Creación de objetos-----------------------

//### Objeto literal

const ricardo = {
    nombre:"Ricardo",
    edad:24,
    cursosAprobados:[
        "Curso de Programación Básica",
        "Curso de Closures y Scope"
    ],
    agregarCursoAprobado(newCurso){
        this.cursosAprobados.push(newCurso);
    }
}

//ricardo.nombre="Ricar"; //cambiar el valor de la propiedad nombre
//ricardo.agregarCursoAprobado("Curso Básico de JavaScript"); //usar el método del objeto


//### Objeto instanciado a un prototipo

function Student(nombre,edad,cursosAprobados) { //prototipo
    this.nombre = nombre,
    this.edad = edad,
    this.cursosAprobados = cursosAprobados,
    borrarCurso = function(){
        cursosAprobados.pop();
    }
}

Student.prototype.agregarCursoAprobado = function (newCurso) { //crear un método fuera de la declaración del prototipo, está se ocultará en [[Prototype]] : Object
    this.cursosAprobados.push(newCurso);
}

const ricardito = new Student( //creación de objeto instancia de un prototipo
    "Ricar",
    24,
    [
        "Curso de Programación Básica",
        "Curso de Closures y Scope"
    ],
);

Juan David Castro Gallego, para mí eres uno de los mejores profesores de Platzi que he tenido.
Tu forma de explicar me ha hecho entender muchas cosas de JavaScript.
Sigue adelante bro, te felicito. 👍

Alguien puede ayudarme, en saber que tema usa en VISUAL ESTUDIO CODE???

Si no les quedo muy claro el tema de este video aquí hay una pagina que lo explica muy bien https://www.digitalocean.com/community/tutorials/informacion-sobre-clases-de-javascript-es

Estoy entiendo mejor con JD … en el curso anterior con Anahí sentí que fue tan repentino muchas cosas

Estuvo genial esta clase la entendí perfectamente y va tomando forma poco a poco con los temas aprendidos anteriormente y ya llevarlos al código, vamos a por mas!!
Que por cierto a día de hoy en ves de function se usan clases ya con la palabra reservada algo así:

class Student {
    constructor(name, age, cursosAprobados){
        this.name = name;
        this.age = age;
        this.cursosAprobados = cursosAprobados;
    }
    
}

Tengo entendido que es por ECS6, lo digo asi porque aún no realizo ese curso, pero he visto que es por esa razon y pues me resulta facil entenderlo asi tambien

Es muy bueno saber también que cuando el profe en el minuto 12:30 plantea 2 opciones a la hora de implementar métodos, esto trae aparejado 2 performences o rendimientos distintos al momento de generar un programa.
Les dejo un video que va mas en profundidad con este tema (el autor se toma 40 minutos para explicar prototipos) pero en el minuto 35 de este link se puede ver directamente:
https://www.youtube.com/watch?v=nS5FmAx4u_0&t=428s