Objetos en JavaScript con Prototype

Clase 27 de 50 • Curso de Programación Básica 2014

Clara Pérez Pérez

student•

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

Cesar David Ramírez Dimaté

student•

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.

Fran NuclearBoy

student•

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.

Nicolas Molina

teacher•

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>

Roberto Carlos Martinez Loredo

student•

Hermano, me acabo de hacer la misma pregunta, algo tarde pero me gustaría saber la respuesta.

Alfred Coloma

student•

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

David Lujan

student•

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

Sergio Mendoza Gomez

student•

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>

Diego Burlando

student•

excelente explicacion amigo, de mucha ayuda. saludos

Ivan Gabriel Pajon Rodriguez

student•

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

Ricardo Diez

student•

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.

Miguel Rodríguez

student•

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

John Rios

student•

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

Richard Álvarez

student•

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.

Fabricio Diaz Nievas

student•

¿Se podría decir entonces que prototype sirve para modificar o agregar algo a una clase desde afuera de la clase?

Oscar Pérez

student•

Mira este enlace: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/prototype

Rulo GM

student•

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

Rulo GM

student•

//falto algo jeje

comentario.desplegar();![](http://)

Cesar David Ramírez Dimaté

student•

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>

Andres Salazar

student•

¿alguna explicación adicional a protoype?. Creo que me perdí :(

Roger Carlos Ariel Alba

student•

Hola,

Este curso es un poco antiguo, puedes ver explicaciones más recientes en el curso de Fundamentos de JavaScript.

Cristian Blandón

student•

Te dejo esta imagen que compartió uno de los profes de la Escuela de Desarrollo Web hace un tiempo, por si te sirve :)

¡Saludos!

Wilson Bohórquez

student•

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>

</head> <body> <p></p> </body> </html>

Anyelina Moreno Robledo

student•

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

Anyelina Moreno Robledo

student•

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. :/

Roberth Mayorga

student•

aun no me queda bien claro lo del uso del prototype con respecto a las funciones dentro del objeto pero #Vamo'aRomperElCodigo

Erick Orlando Velasco Martínez

student•

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.

Francis Payano

student•

Excelente video! :)

Usuario anónimo

user•

Totalmente claro, muy buena la diferencia entre clase (objeto maestro) y objeto. A veces es un tema que es confuso al inicio.

Eduardo Lemus Zavala

student•

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

Jhon Carlos Colorado Angulo

student•

Ok ahora si me queda bien claro lo que es un objeto.

Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe

student•

!!Interesante!! n _n?
GaD n_n? GaD

Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe

student•

Muy interesante n_n? GaD n_n?

Objetos en JavaScript con Prototype

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas