Objetos en JavaScript con Prototype
Clase 27 de 50 • Curso de Programación Básica 2014
Contenido del curso
Clara Pérez Pérez
student•
hace 11 años
Cesar David Ramírez Dimaté
student•
hace 11 años
Fran NuclearBoy
student•
hace 11 años
Clase 27 de 50 • Curso de Programación Básica 2014
Contenido del curso
Clara Pérez Pérez
Cesar David Ramírez Dimaté
Fran NuclearBoy
Nicolas Molina
Roberto Carlos Martinez Loredo
Alfred Coloma
David Lujan
Sergio Mendoza Gomez
Diego Burlando
Ivan Gabriel Pajon Rodriguez
Ricardo Diez
Miguel Rodríguez
John Rios
Richard Álvarez
Fabricio Diaz Nievas
Oscar Pérez
Rulo GM
Rulo GM
Cesar David Ramírez Dimaté
Andres Salazar
Roger Carlos Ariel Alba
Cristian Blandon
Wilson Bohórquez
Anyelina Moreno Robledo
Anyelina Moreno Robledo
Roberth Mayorga
Erick Orlando Velasco Martínez
Francis Payano
Usuario anónimo
Eduardo Lemus Zavala
Jhon Carlos Colorado Angulo
Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe
Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe
Las clases son los moldes de los objetos, es como si yo tuviese un molde para hacer chocolatinas, en ese caso mi molde es la clase y mis objetos son las chocolatinas, obviamente el molde no es una chocolatina en sí, solo es un molde para hacer objetos de la clase chocolatina :)
O mejor un molde para hacer galletas. El molde sería la clase. El objeto sería la galleta con chispas de chocolate, o galletas de colores, etc. Tambén un ejemplo claro es Clase:Animal, Objeto:Perro,Gato,Caballo,etc.
Funcionan como los métodos constructores en java. Esa palabra los define perfectamente, son funciones que definen los atributos y el comportamiento de los objetos.
Cual el la diferencia entre instanciar la función hablarcon prototypey no dentro de la misma clase?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Game 2</title> <script> // Clase: Definición del objeto. var Mascota = function(n, v) { this.nombre = n; this.voz = v; // MODO 2 this.hablar = function () { alert(this.nombre + " dice " + this.voz); } } // MODO 1 Mascota.prototype.hablar = function () { alert(this.nombre + " dice " + this.voz); } // perro y gato son objetos de la clase Mascota var perro = new Mascota("roco", "guau!"); var gato = new Mascota("misifu", "miaw!"); perro.hablar(); gato.hablar(); </script> </head> <body> </body> </html>
Hermano, me acabo de hacer la misma pregunta, algo tarde pero me gustaría saber la respuesta.
me gusto --- todo-------me dejo bien en claro lo que eran clases y objetos de las clases,------- escepto el comentario sobre ecuador...... no es un paiz lleno de ñengosos ..... es como qe diga que le pondremos "perro narco" jaja ya saben porque es de colombia :v
Buen aporte, es bueno no discriminar ningun pais, una cosa si no quieres que hablen de tu pais , no hables de el de los demas. ;)
Gracias platzi por mejorar mi tecnica y conocimientos profesionales.
Comparto con la comunidad mi Tarea Objetos de JavaScript Prototype
saludos :)
Animoooooooooo! a seguir practicando y aprendiendo....
index.html <!DOCTYPE html> <html> <head> <title>Objetos en Javascript con Prototype</title> <script type="text/javascript"> // Alumno en Platzi: Sergio Mendoza Gomez // #soy mejorando.la# // 10-03-2016 // Clase: Objeto maestro, del que se derivan otros objetos // Clase: Definicion del Objeto // Los objetos antes vistos, no eran objetos javascript, sino que eran objetos JSON // Los objetos correctos son clases que se hacen con prototype var nombre = "Frisco";// variable global que no tiene nada que ver con las propiedades y elementos en objetos JSON o Prototype // *********************************************************************************** // Objeto con notacion JSON - Objeto JSON var perroJson = { agilidad: 50, fuerza: 100, limpieza: false, longevidad: 14, amor: true, voz: function () { alert("guau Funcion notacion JSON!"); } }; var gatoJson = { agilidad: 50, fuerza: 100, limpieza: false, longevidad: 14, amor: true, voz: function () { alert("miau Funcion notacion JSON!"); } }; perroJson.voz(); gatoJson.voz(); // Objeto con notacion JSON - Objeto JSON // *********************************************************************************** // Clase u Objeto en Javascript // Buena practica iniciar nombres de Clases y Metodos con Mayusculas var Mascota = function(n, v, t) { this.nombre= n; this.voz= v; this.tipo = t; } Mascota.prototype.hablar = function(t) { document.getElementById(t).innerHTML= this.tipo + ': ' + this.nombre + ' - ' + this.voz + ' desde prototype o metodo hablar de la clase Mascota'; //alert(this.voz); } // perro es un objeto de la clase Mascota var perro = new Mascota("roco","Guau!","Perro"); var gato = new Mascota("wisk","Miau!","Gato"); // Clase u Objeto en Javascript </script> </head> <body> <div> <h2 id="mgato"></h2><br/> <h2 id="mperro"></h2><br/> <h2 id="mgatoh"></h2><br/> <h2 id="mperroh"></h2> <div> <script type="text/javascript"> // Se declaran al final ya que a partir de esta linea ya se crearon o renderizaron las etiquetas h2 que se usaron para desplegar los mensajes con id=mgato, id=mperro, id=mgatoh, id=mperroh // Si se utilizara arriba marcaria error o bien no desplegaria nada document.getElementById("mperro").innerHTML= 'Clase Mascota ' + perro.tipo + ': ' + perro.nombre + ' - ' + perro.voz; document.getElementById("mgato").innerHTML= 'Clase Mascota ' + gato.tipo + ': ' + gato.nombre + ' - ' + gato.voz; perro.hablar("mperroh"); gato.hablar("mgatoh"); </script> </body> </html>
excelente explicacion amigo, de mucha ayuda. saludos
¿Qué diferencia habría entre esto?
<!DOCTYPE html> <html> <head> <title>Objetos y Prototype</title> <script type="text/javascript"> // Clase: objeto maestro del que se derivan otros objetos // Clase: definicion del objeto var Mascota = function (n, v) { this.nombre = n; this.voz = v; } Mascota.prototype.hablar = function () { alert(this.nombre + " dice: " + this.voz); } //perro es un objeto de la clase var perro = new Mascota ("roco", "guau!"); var gato = new Mascota ("misifu", "miau"); perro.hablar(); gato.hablar(); </script> </head> <body> <p>Perros y Gatos</p> </body> </html>
¿y esto?
<!DOCTYPE html> <html> <head> <title>Objetos y Prototype</title> <script type="text/javascript"> // Clase: objeto maestro del que se derivan otros objetos // Clase: definicion del objeto var Mascota = function (n, v) { this.nombre = n; this.hablar = function () { alert(this.nombre + " dice: " + v); } } //perro es un objeto de la clase var perro = new Mascota ("roco", "guau!"); var gato = new Mascota ("misifu", "miau"); perro.hablar(); gato.hablar(); </script> </head> <body> <p>Perros y Gatos</p> </body> </html>
Bueno básicamente la diferencia es que en el segundo caso no estas usando prototype para agregar la función hablar si no que la declaras dentro de la clase mascota al momento que estas construyendo dicha clase , ambos ejemplos están bien ya dependerá de como desees implementar las soluciones.
Hola a todos, tengo una duda que diferencia hay entre declarar la función hablar dentro del objeto o usando prototype?
Opción 1:
var Mascota = function (n, v) { this.nombre = n; this.voz = v; this.hablar = function() { alert(this.voz); } }
Opción 2:
Mascota.prototype.hablar = function() { alert(this.voz); };
Tienes el código mas limpio y no tan anidado, es la forma correcta de crear objetos instanciables con nuevas clase... ademas de ser una BUENA PRACTICA! :)
Yo también lo intente hacer así, y en efecto funcionó, pero me gusto más la de prototype puesto que fue algo nuevo, y se me hizo genial que se podía acceeder a variables que están declaradas en el objeto.
¿Se podría decir entonces que prototype sirve para modificar o agregar algo a una clase desde afuera de la clase?
Mira este enlace:
//Una pequeña opinión del video :P
var Mensaje = function (txt){
this.texto = txt
}
Mensaje.prototype.desplegar = function (){
alert("Rulo dice: " + this.texto);
}
var comentario = new Mensaje("Me encanta como explica freddie :3");
//falto algo jeje
comentario.desplegar();
Dejo el código fuente.
<!DOCTYPE html> <html> <head> <title>Objetos en Javascript</title> <script type="text/javascript"> // Clase: Definición del objeto. var nombre = "Frisco"; var Mascota = function(n, v) { this.nombre = n; this.voz = v; } // Meterese a la construcción interna del objeto, un método de una clase. Mascota.prototype.hablar = function () { alert(this.nombre + " dice " + this.voz); } // perro y gato son objetos de la clase Mascota var perro = new Mascota("roco", "guau!"); var gato = new Mascota("misifu", "miaw!"); perro.hablar(); gato.hablar(); </script> </head> <body> <h1>Perros y Gatos</h1> </body> </html>
¿alguna explicación adicional a protoype?. Creo que me perdí :(
Hola,
Este curso es un poco antiguo, puedes ver explicaciones más recientes en el curso de Fundamentos de JavaScript.
Te dejo esta imagen que compartió uno de los profes de la Escuela de Desarrollo Web hace un tiempo, por si te sirve :)
¡Saludos!
Adjunto código
<!DOCTYPE html> <html> <head> <title>Objetos</title> <script type="text/javascript"> //Nombre es una variable global var nombre = "Frisco"; // Clase: objeto maestro del que se derivan otros objetos //Clase: definicion del objeto var Mascota = function (n, v) { this.nombre= n; this.voz= v; } Mascota.prototype.hablar = function ()
{
alert(this.nombre + " dice: " + this.voz);
}
//perro es un objeto de la clase
var perro = new Mascota ("roco", "guau!");
var gato = new Mascota ("Andres", "los humanos son mis esclavos");
perro.hablar();
gato.hablar();
</script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Objetos con prototype</title> <script type="text/javascript"> //Objetos var perro = { agilidad: 50, fuerza: 100, limpieza: false, longetividad: 14, amor: true, voz: function(){ alert("GUAuFF !!!") } } // Cuando queremos crear mas de una mascota es mjor crear un prototipo var nombre = "Frisco";// variable global var Mascota = function(n, v) { this.nombre = n; this.voz = v; } // Creamos un portotipo, nos metemos en la construcion interna del objeto y le decimos que todos // los objetos de mascota cuando cree uno nuevo insertale la funcion hablar. Mascota.prototype.hablar = function () { alert(this.voz); } // Objeto de la clase mascota , perro var perro = new Mascota("Roco", "GUAuFF!!"); var gato = new Mascota("Misifu", "Miahu..!!!"); </script> </head> <body> </body> </html>
Todo con respecto a la creación de clases, para crear objetos de una forma más sintetizada me quedo bastante claro. Pero me surge una duda con respecto al primer objeto , este seria un objeto JSON? o un Objeto normal? La verdad es que no se si son los mismo , y si no es así cual es la diferencia. :/
aun no me queda bien claro lo del uso del prototype con respecto a las funciones dentro del objeto pero #Vamo'aRomperElCodigo
Muy interesante el tema de los prototipos, es una forma de definir la implementación de un método o función para luego usarlo después, todo clarísimo.
Intenté romper el código eliminando 'this' y la consola me dijo que la variable no existía.
Excelente video! :)
Totalmente claro, muy buena la diferencia entre clase (objeto maestro) y objeto. A veces es un tema que es confuso al inicio.
Prototype es la forma correcta de declarar objetos, nos permite modificar su estructura añadiendo nuevos metodos
Los objetos deben declararse con la primer letra en mayuscula(es mas facil identificar un objeto con letra mayuscula)
this es la instanciacion de un objeto
Ok ahora si me queda bien claro lo que es un objeto.
!!Interesante!! n _n?
GaD n_n? GaD
Muy interesante n_n? GaD n_n?