Definiendo la clase Punto - Prototipos en JavaScript

Clase 11 de 51 • Fundamentos de JavaScript 2017

Resumen

Cuando tenemos varios objetos que compartan la misma estructura podemos crear un prototipo del cual podemos crear los objetos que queramos.

Para nuestro ejercicio de los puntos podemos crear esta estructura como

function Punto(x,y) {
  this.x = x
  this.y = y
}

const p1 = new Punto(0,4)

Con el keyword new creamos un nuevo objeto

Los objetos se vinculan con otros objetos a través de prototype, en el navegador lo puedes ver como __proto__ y mostrara el prototipo con el que fue creado

David Santiago González Ramos

student•

Usando prototipos : Podemos usar prototipos para crear objetos que heredan los mismos atributos y los mismos métodos. Para construir el prototipo se hace de la siguiente forma :

function Prototipo (parametroA, parametroB) {
	this.atributo   = parametroA,
	this.atributo2 = parametroB
}

Crear objeto: Para crear el objeto, se define la variable y se usa el keyword “new” + el nombre del prototipo. Podemos crear cualquier cantidad de objetos a partir del prototipo ya definido :

let firstPerson = new Prototipo("David", 17)

Métodos y prototipos: La mejor forma de crear métodos en los prototipos, para que sean heredados por los objetos, no es dentro de la funcion Prototipo. La mejor forma es haciendo uso de “.prototype.” de la siguiente forma :

Prototipo.prototype.changeA = function changeA (newA) {
	this.atributo = newA;
}

Es importante tener en cuenta que si se modifica el método en un objeto, este método sera modificado en todos los objetos del mismo prototipo

Andrés Felipe Eslava Zuluaga

student•

Disculpa, puedes explicar un poco mejor aquel último párrafo de
’Es importante tener en cuenta que si se modifica el método en un objeto, este método sera modificado en todos los objetos del mismo prototipo’

David Santiago González Ramos

student•

@felipe_ez Si claro. A lo que me refiero es que al definir mediante prototype, métodos para los objetos del prototipo (clase), en el momento en que se modifica ese método así se haga desde el objetoA, absolutamente todos los objetos que se hayan definido con el mismo prototipo, tambn recibirán la modificación del método…
Me hago entender?

Victor Alfonso Caballero Cabrera

student•

Estimados la mejor forma de entender es reescribiendo y modificando así poco a poco ya entiendes que hace cada cosa y comenta tb tu código. 😄

function Prueba(var1,var2){ //  Mi constructor
	this.var1 = var1;
	this.var2 = var2;
}

Prueba.prototype.alertador = function alertador(varx1,varx2){ // prototipando  con 2 argunemntos
	 
	 const suma1 = this.var1 + varx1;  
	 const suma2 = this.var2 + varx2; 
	 alert(suma1 + " tb : " + suma2);
}

let p1 = new Prueba("entra "," sale "); //creo objetos 
let p2 = new Prueba(5,6);

p1.alertador(14,14);
//p2.alertador(10,12);```

jose roman alonso antoranz

student•

Humilde consejo para quien esta aprendiendo desde 0:

Yo pasaría de aprender a utilizar prototipos sin entender antes correctamente que son las clase class, extends inherits,
¿cual es la diferencia entre clase y prototipo te estaras preguntando? …de forma resumida digamos que las clases son una mejora sintactica = (“manera de escribir el código”) que fueron introducidas en el ECMAScript 2015.con respecto a los prototipos.

Este cambio de sintaxis de las clases no introduce un nuevo modelo de herencia orientada a objetos a JavaScript (osea por dentro no cambia nada de como funcionan sino solo la forma de escribirlo).

Resumiendo: Las clases (como las que se enseñana en el curso de javascript básico) de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.

PDT: una vez que ya manejes sin problemas javascript y trabajes con otras librerías ahí si te encontraras que muchas trabajan con prototipos y patrones para extender las clases primitivas como Jquery…entonces y solo entonces yo intentaría entender el uso de prototipos.

Suerte!! 😉

Octavio Rodriguez

student•

Me explota el cerebro con esto de los prototipos, gracias seguiré con el curso aunque esto no me quedo de lo mas claro

Andrés Madrigal

student•

pienso igual, se saltaron cosas que iban de por medio

Michael Bolaños Vargas

student•

No hay clases en JS?.. en el curso de progra basica de Platzi se explica de la siguiente manera:

class Operaciones {
    constructor(val1, val2) {
        this.val1 = val1
        this.val2 = val2
    }

    multiplicar() {
        return this.val1 * this.val2;
    }
}


var miClase = new Operaciones(2, 3);

console.log(miClase.multiplicar());```

...ahora, cual es la diferencia en crear una Class con un constructor y metodos propios y crear una funcion y crearle prototipos?

Victor Alfonso Caballero Cabrera

student•

La 1era forma viene para ECMA6 aun no soportada por todos los navegadores

Michael Bolaños Vargas

student•

@blogdopata Gracias por el dato!

Julio J Yépez

student•

En ciertas ocasiones el uso de prototype es ideal para sobreescriber métodos en objetos propios de JavaScript aunque esto no es una buena practica y se debe evitar; pero por ejemplo, si quisieramos agregar un método trim al tipo de objeto String que es intrínseco en JS, se haría de la siguiente forma:

// --- nos aseguramos de que sólo se modifique prototype cuando String no tenga ya definido el método trim
if( ! String.prototype.trim ) {
	String.prototype.trim = ( cad ) => {
		let salida = ''
		// --- codigo para remover espacios delante y detras de la cadena
		return salida
	}
}

Y ya luego, habiendo agregado el método trim a la clase primitiva de tipo de datos String, podríamos usarla como muchos otros métodos también intrínsecos como: toLowerCase, toUpperCase, substr, indexOf, etc.

let cadena = "     Soy Platzi       "
console.log( cadena.trim() + '!' ) 

>Soy Platzi!

Julio J Yépez

student•

Muchos de los frameworks usan prototype para extender clases primitivas de javascript o incluso crear plugins que extiendan las funcionalidades de las librerías base, como es el caso de jQuery y jQueryUI, entre otros.

Emmanuel Octavio Martinez C

student•

Si se te dificulta un poco este concepto les dejo el codigo de un objeto para una persona y calcular la diferencia de edad entre dos personas.

// Basicamente en esta parte del código solo se hace
// la "definicion" del prototipo, en teoria esto todavia
// NO es un objeto
//Un constructor es una funcion que se llama cuando
// "nace" el objeto, el principal objetivo del constructor
// es darle valores iniciales al objeto
//Esta funcion es el constructor del objeto
function Persona(nombre, edad, sexo) {
  this.nombre = nombre;
  this.edad = edad;
  this.sexo = sexo;
}
//Termina la definicion del Constructor.
//Aqui se hace la Definicion de algunas funciones
//por ejemplo una Funcion que calcula
//la diferencia de edades entre dos personas
Persona.prototype.diferenciaDeEdad = function diferenciaDeEdad(persona){
  if(this.edad > persona.edad) {
    console.log(`la persona ${this.nombre} es mayor que ${persona.nombre}`);
  } else if(this.edad == persona.edad){
    console.log('Ambas personas tiene la misma edad');
  } else {
    console.log(`la persona ${persona.nombre} es mayor que ${this.nombre}`);
  }
}
//Hasta aqui el objeto todavia "no existe", pero
//ya se definio el prototipo del objeto, a continuacion
//se declaran dos objetos, la palabra reservada new
//podria indicar que ya "existe" un objeto.
//notese que aqui se utiliza al constructor
perso1 = new Persona('Tavo',24,'Hombre');
perso2 = new Persona('Lupe',25,'Mujer');
//Probando la funcion diferenciaDeEdad de los objetos
perso1.diferenciaDeEdad(perso2);
perso2.diferenciaDeEdad(perso1);

Gerlis Alvarez Cardona

student•

Para recordar, las clases en Javascript no son clases en sí, las llamamos clases para poder hacernos una idea de lo que son, pero lo que hace en realidad es crear una nueva referencia de esa “clase”, recuerden, en Javascript todo funciona por referencia y no por instancia como lo hacen los lenguajes orientados a objetos, excelente clase!.

Ezequiel Miguel Brandan

student•

Me parece que usando class, es mucho mas facil de entender, en vez de empezar con prototipos de una, sin haber explicado detenidamente que es un metodo, atriburo, constructores… ext…

Pablo Acuña

student•

Y llego el día en que no entendí mas nada 😦

Carlos Sampol

Team Platzi•

¿Cuéntame, que no entendiste exactamente ?

David Navarro Rolon

student•

jajaja

Juan Jose Rojas Rojas

student•

Esta información la encontré en Mozilla, y me fue bastante sencillo entenderlo.

Maneras diferentes de crear objetos y la cadena de prototipos resultante

Objetos creados mediante estructuras sintácticas

var o = {a: 1};

var a = ["yo", "whadup", "?"];
// Los arrays heredan de Array.prototype 
// (que tiene métodos como indexOf, forEach, etc.)
// La cadena de prototipados sería:
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}
// Las funciones heredan de Function.prototype 
// (que tiene métodos como call, bind, etc.)
// f ---> Function.prototype ---> Object.prototype ---> null

Con un constructor

Un “constructor” en JavaScript es “solo” una función que pasa a ser llamada con el operador new.

function Graph() {
  this.vertices = [];
  this.edges = [];
}

Graph.prototype = {
  addVertex: function(v){
    this.vertices.push(v);
  }
};

var g = new Graph();
// g es un objeto con las propiedades 'vértices' y 'edges'.
// g.[[Prototype]] es el valor de Graph.prototype cuando new Graph() es ejecutado.

Con Object.create

ECMAScript 5 Introdujo un nuevo método: Object.create(). Llamando este método creas un nuevo objeto. El prototype de este objeto es el primer argumento de la función:

var a = {a: 1}; 
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (heredado)

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); 
// undefined, por que d no hereda de Object.prototype

Con la palabra reservada class

ECMAScript 2015 introduce un nuevo set de palabras reservadas implementando clases. Aunque estos constructores lucen más familiares para los desarrolladores de lenguajes basados en clases, Aun así no son clases. JavaScript permanece basados en prototipos. Los nuevos keywords incluyen class, constructor, static, extends, and super.

// Clase Polygon (polígono)
class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

// La clase Square (cuadrado) hereda todas las propiedades
// de la clase Polygon (polígono)
class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);

Benjamin Alberto Ruiz Armenta

student•

Hola buen dia,

Alguien me puede decir por que Sacha pone el código:

Punto.prototype.moverEnX = function moverEnX(x) {
  this.x += x
}

Punto.prototype.moverEnY = function moverEnY(y) {
  this.y += y
}

Punto.prototype.distancia = function distancia(p) {
  const x = this.x - p.x
  const y = this.y - p.y

Fuera de la función punto():

function Punto(x, y) {
  this.x = x
  this.y = y
}

Hay alguna razón para ponerlos por fuera?
Por que poner: Punto.prototype.?
Como seria el código si se pusiera por dentro en la función punto()?
que es lo que hace el código: Punto.prototype.moverEnX explicado con manzanas?

Miguel Angel Gatto

student•

Porque para armar el prototipo no se pueden meter adentro entiendo yo. Distinto a ponerlo 1 sola vez en un objeto con todo, para que lo herede se debe definir así. Es como se hace en javascript que ande en todos lados.

Federico

student•

Misma duda! No entiendo por que deben ir por fuera de la función constructora

Andres Barbosa

student•

para colocar un método del prototipo desde la función que construye el objeto me funciono algo así:

function Punto(x, y) {
  this.x = x
  this.y = y
  this.__proto__.prueba = function() {alert(this.x)}
}```

Cristian Franco Bedoya

student•

Muy interesante, enserio.

Daniel Cueto

student•

Pero es una estupidez hacerlo así, para eso declaras la función de forma natural dentro del objeto, ¿no?

function Punto(x, y) {
	this.x = x,
	this.y = y,
	this.prueba = function() {alert(this.x)};
}

Renny Galindez

student•

En el minuto 04:50 Sacha explica que las funciones que seran agregadas al prototipo pueden ser anonimas, sin embargo al definir la funcion si la hago anonima los valores a los que me refiero con this (this,x, this.y) aparecen como undefined y esto se corrige solo definiendo la funcion con un nombre
Asi no funciona

Punto.prototype.hallarDistancia = (p) => {
                        const x = this.x - p.x
                        const y = this.y - p.y
                        return Math.sqrt(x * x + y * y)
}

Pero con esta si se obtiene el resultado deseado:

 Punto.prototype.distancia = function distancia(p) {
    const x = this.x - p.x
    const y = this.y - p.y
  
    return Math.sqrt(x * x + y * y)

Que estoy haciendo mal?

Noé Muñoz

student•

Amigo, déjame decirte, no estás “declarando la función”, por eso te saca el error, o no te saca la respuesta.

Renny Galindez

student•

Gracias por tu respuesta pero en donde no estoy declarando la funcion? porque si no estoy en un error, lo siguiente es una declaracion valida:

(p) => {
                        const x = this.x - p.x
                        const y = this.y - p.y
                        return Math.sqrt(x * x + y * y)
}```

Rafael Jair Sanchez Alviso

student•

Yo cambie las x en ciertas partes para que me quedara un poco más claro ya que repetíamos mucho x & y lo realice de la siguiente manera

const p1 = new Punto(0, 4)
const p2 = new Punto(3, 0)

//nuestro constructor tomara sus parametros obtenidos de la funcion Punto() el this.posicion es como donde se guradara nuestro atributo y nuestro objeto se vera asi
// const p1 = {posicionX:0, posicionY: 4}
//el this esta igualado a x & y por que es el valor que tomar cuando se lo pasamos atraves de la funcion
function Punto(x, y){
    this.posicionX = x 
    this.posixionY = y
}


Punto.prototype.moverEnX = function moverEnX(perro) {
    this.posicionX += perro
}

Punto.prototype.moverEnY = function moverEnY(perro){
    this.posixionY += perro
}

Punto.prototype.distancia = function distancia(p) {
    const x = this.posicionX - p.posicionX
    const y = this.posixionY - p.posixionY
  
    return Math.sqrt(x * x + y * y)
}
  


console.log(p1.distancia(p2))
console.log(p2.distancia(p1))
p1.moverEnX(10)
console.log(p1.distancia(p2))
p2.moverEnY(-4)
console.log(p1.distancia(p2))

juan carlos mercedes

student•

este ejercicoo quemo mi procesador!!!, deberdad esto lo voy necesitar en un empleo???

Diego Forero

Team Platzi•

El paradigma de la programación orientada a objetos es una de las más usadas, aunque en JavaScript no es orientado a objetos como tal.

Carlos Raez

student•

En el caso de la función Punto en ese caso se escribe con mayuscula porque realmente estamos haciendo una clase entiendo no ?.

Gracias

Andrés Felipe Eslava Zuluaga

student•

Siii, en Javscript es buena práctica usar la primera letra Mayúscula si se trata de una Clase o Componentes.

Nando D

student•

No me parece acertado elegir los puntos para explicar el tema de objetos. Estáis sumando la dificultad del concepto de posiciones espaciales a entender los objetos y sus características. La suma es un cacao mental que veo innecesario.

Daniel Ramos

student•

Qué curioso esto de los prototipos. No me gusta para nada eso de crear los métodos fuera de lo que es la definición del prototipo :S

Sebastian Jesús Rios Cabala

student•

// mi constructor persona
function Persona (nombre,apellido,edad) {
	this.nombre = nombre
	this.apellido = apellido

	this.edad = edad
}

Persona.prototype.localidad = '' // creamos una propiedad nueva, vacia.
Persona.prototype.mayor = function mayor(sujeto) {

	if(this.edad > sujeto.edad)
	{
		return `${this.nombre} es mayor a ${sujeto.nombre}`		
	}
	else return `${this.nombre} no es mayor a ${sujeto.nombre}`	
}

// nuevos objetos de tipo "Persona" (instancias)
const Seb = new Persona("Sebastian", "Rios", 16)
const Jason = new Persona("Jason", "Castro", 17)

console.log(Seb)
console.log(Seb.edad)

console.log(Jason)
console.log(Jason.edad)

console.log(Seb.mayor(Jason))

Seb.localidad = "Arabia"
Jason.localidad = "Israel"

console.log(Seb.localidad)
console.log(Jason.localidad)```

Sebastian Mar

student•

@Sacha,
No se puede declarar el metodo dentro de la primer funcion/prototipo Punto ?
Por ejemplo:

const Punto = (x,y) => {
	this.x = x,
	this.y = y,
	this.moverEnX(x) {this.x += x},
	this.moverEnY(y) {this.y +=y}
}

Miguel Sosa

student•

Hola @sebastianmarullo

Lo que tu dices parece tener lógica, pero pasan dos cosas, la primera es que esa sintaxis que utilizas en tu ejemplo sirve para objetos literales, no para objetos prototipo:

punto = {
	moverEnX(x) { ... }
}
// Funciona

function Punto(x,y) {
	this.moverEnX(x) { ... }
}
// No funciona, da un error de sintaxys

En todo caso, lo que si se podría hacer es lo siguiente:

function Punto(x,y) {
	this.moverEnX = function (x) { ... }
}
// Esto si funciona

Pero esto tiene una diferencia con usar Punto.prototype.moverEnX, y es que si lo hacemos de la forma que te sugerí, el objeto resultante p1 tiene los métodos moverEnX y moverEnY expuestos, es decir que se pueden sobreescribir para p1 y p2 independientemente del prototipo, y esa no es la idea de los prototipos.

Saludos!

Definiendo la clase Punto - Prototipos en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial