Definiendo la clase Punto - Object.create en JavaScript

Clase 12 de 51 • Fundamentos de JavaScript 2017

Resumen

En JavaScript tenemos varias formas para crear objetos, ahora vamos a crear un nuevo constructor del objeto punto

const Punto = {
  init: function init(x,y) {
    this.x = x
    this.y = y    
  },
  moverEnX: function moverEnX(x) {
    this.x += x
  },
  moverEnY: function moverEnY(y) {
    this.y += y
  }
}

const p1 = Object.create(Punto)
p1.init(0,4)

nicolas fernandez

student•

Otra alternativa:

const Punto = {
  init: function init (x,y){
    let obj = Object.create(this)
    obj.x = x;
    obj.y =y;
    return obj
  },
  moverEnX: function moverEnX(x) {
    this.x += x
  },
}

let p1 = Punto.init(1,4) // nos evitamos hacer la asignación de forma manual

Roberto Prince

student•

Exactamente animepowa asi es como es el patron.

También quiero recalcar que en tus apps nunca modifiquen el proto por que hacen que su código se ejecute mas lento, javascript en los browsers mas modernos tiene un JIT, Just in Time compilator que compila a lenguaje maquina el código que puede predecir o que ese ejecuta muchas veces. Hay varia cosas como eval, el with, modificar el proto usasr la misma variable para diferentes tipos de datos, que impiden que funcione el JIT. Ademas es una mala practica, el codigo se ve mal, pero tu como programador te ves muy mal =)

Rafael Jair Sanchez Alviso

student•

En la parte de

let obj = Object.create(this)

a que hace referencia el this?

David Santiago González Ramos

student•

Otra forma de crear objetos con Object.create(): En la clase anterior usábamos una función para crear objetos. Hay otra forma diferente que usa un objeto literal para la creación de otros objetos que heredan su características.:

const objetoPadre = {
  init: function init (x,y){ // Método para asignación de atributos
    this.name = x;
    this.age  = y;
  },
  metodoA: function metodoA(newX) { // Método declarado dentro del objeto padre
    this.name = x
  },
}
let objetoHijo = Object.create(objetoPadre) // Creación del objeto
objetoHijo.init("David", 17)  // Asignación de los atributos del objeto hijo

Es importante darnos cuenta de dos cosas:

Métodos: Los métodos, a diferencia de la forma anterior, si pueden ser declarados dentro del objeto padre
Init: Luego de crear el objeto Hijo es necesario “inicializarlo” haciendo uso del método init para asignar correctamente el valor de los atributos al nuevo objeto. El método init resulta ser el constructor de nuesto objeto.

Julian Ferronato

student•

gran resumen amigo, gracias

Andrés Fabián Guerrero

student•

Excelente

Sebastian Jesús Rios Cabala

student•

Pero entonces ésta forma tiene el mismo rendimiento que el de un prototype?

Alexis Antonio Moraga Gallardo

student•

Hola les comparto mi repositorio en GitHub con el avance de este curso

Repositorio

Acá encontraran los ejercicios de las clases comentados y mis notas personales

/*Object.Create
continuando con el mismo ejemplo de la clase anterior de calcular la distancia entre dos puntos
en esta ocacion lo aremos usando object.create
*/


const Punto = {//creamos un objeto de tipo punto
  init:function init(x, y){//usamos init como el constructor de nuestro objeto
    this.x = x//asignamos los valores usando el this
    this.y = y
  },
  moverX: function(x){//añadimos las funciones o metodos de nuestro objeto
    this.x += x
  },
  moverY: function(y){
    this.y += y
  },
  distancia: function(p){//creamos la funcion distancia
    const x = this.x -p.x
    const y = this.y -p.y
    return Math.sqrt(x * x + y * y )//retornamos la distancia
  }
}


const p1 = Object.create(Punto)//usamos el objeto Object, y el metodo create para crear una nueva instancia de nuestro objeto punto
const p2 = Object.create(Punto)

p1.init(0, 4)//usamos el objeto recien creado, he invocamos el metodo init, el cual estamos usando como constructor para asignar los valores correspondientes al objeto p1
p2.init(3, 0)

console.log(p1.distancia(p2))
//imprimimos la distancia entre el objeto p1, y el objeto p2


/*
-> Cuando creamos un objeto con object create, ya no creamos una funcion que nos sirva como constructor y le añadimos sus metodos con prototype.
   creamos directamente un objeto, le asignamos un constructor, en este ejemplo el constructor se llama init, pero pudes añadir el nombre que desees.
    cada elemento dentro de este objeto es una funcion, y estan separados por comas

-> Para instanciar un nuevo objeto usamos Object.create() y le pasamos como parametro el tipo de objeto
    luego usamos el objeto recien inicializado y llamamos al constructor y le pasamos los valores de nuestro objeto
*/

Miguel Angel Espeso Alvarez

student•

Gracias por tu colaboración, me está viniendo tus apuntes…

Alexis Antonio Moraga Gallardo

student•

de nada miguelespeso, estoy actualizando el repositorio a medida que tomo las clases

Darwin Rodríguez

student•

const Punto = {
	init     : function init(x,y) {
		this.x = x;
		this.y = y;
	},
	moverEnX : function moverEnX(x) {
		this.x +=x;
	},
	moverEnY : function moverEnY(y) {
		this.y += y;
	},
	distancia: function distancia(p) {
		const x = this.x - p.x,
			    y = this.y - p.y;

		return Math.round( Math.sqrt( (x * x) + (y * y)  ).toFixed(2) );
	}
}

const p1 = Object.create(Punto),
		  p2 = Object.create(Punto);

			p1.init(0, 4);
			p2.init(3, 0);

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

Alexander Chinea

student•

Si lo redondeas no deberias de usar el to Fixed 😃

Alejandro Rodríguez

student•

¿Qué es un constructor?

Saúl Báez Terrez

student•

El constructor es el que va a proporcionar los elementos esenciales para crear un objeto. Hay veces que el constructor no necesita argumentos, es decir, que al crearlo no se necesita especificar el valor de ciertos atributos sino que estos ya están definidos, en cambio, estos valores a través de un constructor que reciba varios parámetros los puede modificar desde su creación.

Sergio Toshio Minei

student•

Un constructor es una función que se llama al momento de instanciar un objeto. Ahí puedes definir los valores que van a tener por defecto el objeto o, de enviarse parámetros, se estarían asignando los valores iniciales del objeto.

Itzel

student•

me gustó más esta manera que la anterior

jaime rodriguez

student•

No colocar punto y coma (😉 al final de cada sentencia, puede traer problemas a la hora de minificar el codigo js??

Victor Cerriteño

student•

no es nesecario que cada linea termine con " ; " pero el uso de esta te la recomiendo como algo discreto que te permite separa variables o asignaciones

José Padrón

student•

Esto es JSON?

Michael Orlando Sornoza Palma

student•

Este es mi códigog, pero me muestra NaN. ¿Que debo hacer?

const Punto = {
	init: function init(x, y){
		this.x = x
		this.y = y
	},
	moverEnX: function moverEnX(x) {
		this.x += x
	},
	moverEnY: function moverEnY(y) {
		this.y += y
	},
	distancia: function distancia(p) {
		const x = this.x - p.x

		const y = this.y - p.y

		return Math.sqrt(x * x + y * y).toFixed(2)
	}
}

const p1 = Object.create(Punto)
const p2 = Object.create(Punto)

p1.init(0, 4)
p1.init(3, 0)

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

Diego Forero

Team Platzi•

Definiste dos veces p1, no p1 y p2

p1.init(0, 4)
p1.init(3, 0)

Michael Orlando Sornoza Palma

student•

Gracias, vaya error

Lizeth Paola Cuadros Olarte

student•

¿Cual es la ventaja de crear un objeto de esta manera vs la anterior?

Diego Forero

Team Platzi•

No lo veas como ventajas o desventajas, son simplemente formas diferentes de hacer lo mismo.

Ignacio Esteban Aredez Diaz

student•

Donde puedo encontrar una lista de comando para sublime Text

Me refiero a comertar mucho texto a la vez o cambiar muchas palabras en pocos movimientos

Manuel Andres Santizo Avila

student•

Otra opción que a mi parecer esta muy buena tambien es Visual Studio Code.

Iván Toro

student•

Crear objetos a partir de un objeto literal:

const Punto = {
  constructor(x, y){
    this.x = x
    this.y = y
  },
  moveX(x){
    this.x += x
  },
  moveY(y){
    this.y = y
  },
  distance(p){
    let x = this.x - p.x
    let y = this.y - p.y
    return (Math.sqrt(x * x + y * y)).toFixed(2)
  }
}

const p1 = Object.create(Punto)
console.log(p1)
p1.constructor(0, 4)
console.log(p1)

const p2 = Object.create(Punto)
console.log(p2)
p2.constructor(3, 0)
console.log(p2)

console.log(p2.distance(p1))

César López

student•

Cada una de estas formas tiene las mismas aplicaciones hoy hay situaciones particulares donde debo usar alguno de ellas?

Carlos Andres PINZON SOLANO

student•

//Creando objetos con un constructor init

//Definimos como un objeto a "Punto" agregando los métodos asociados 
const Punto = {
  init: function finit(x, y) {
    this.x = x
    this.y = y
  },
  moverEnX: function fMoverEnX(dx) {
    this.x += dx
  },
  moverEnY: function fMoverEnY(dy) {
    this.y += dy
  },
  distancia: function fDistancia(p) {
    const i = this.x - p.x
    const j = this.y - p.y

    return Math.sqrt(i * i + j * j)
  }
}

// Creamos p1 con Object.create
const p1 = Object.create(Punto)
p1.init(0, 4)

// Creamos p2 con Object.create
const p2 = Object.create(Punto)
p2.init(3, 0)

//Y mostramos la distancia
console.log( p1.distancia(p2) );

Victor Cerriteño

student•

algo que yo uso con los objeyos de JS es definir la variable

const Punto ={
 var X,Y;
	init: function(x,y){
		X=x;
		Y=y;
	}
}

yo lo uso asi en casos de objetos muy complejos y con muchas funciones y variables que entran en juego para mi es mas facil seguir el codigo de esta forma pero diganme que opinan me interesa sobre todo el lado de la eficiencia tanto memoria como prosecamiento

Jose Patiño

student•

//Se crea como un objeto normal
//Nombre en mayuscula por que el objeto servira como clase
const Punto  = {
	init: function init(x,y) {
		this.x = x
		this.y = y
	},
	moverEnX: function moverEnX(x){
		this.x += x
	},
	moverEnY: function moverEnY(y){
		this.y += y
	},
	distancia: function distancia(p) {
		const x = this.x - p.x,
			  y = this.y - p.y;

		return Math.round( Math.sqrt( (x * x) + (y * y)  ).toFixed(2) );
	}

}
//Se crean los objetos a partiir del obeto anterior usando la funcion Objec.create
const p1 = Object.create(Punto)
const p2 = Object.create(Punto)
p1.init(0,4)
p2.init(3,0)

console.log(p1.distancia(p2))

Iván Serrano

student•

const Punto = {
  init: function init(x, y) {
    this.x = x
    this.y = y
  },
  moverEnX: function moverEnX(x) {
    this.x += x
  },
  moverEnY: function moverEnY(y) {
    this.y += y
  },
  distancia: function distancia(p) {
    const x = this.x - p.x
    const y = this.y - p.y

    return Math.sqrt(x * x + y * y)
  }
}

const p1 = Object.create(Punto)
const p2 = Object.create(Punto)

p1.init(0, 4)
p2.init(3, 0)

console.log(p1.distancia(p2).toFixed(2))
console.log(p2.distancia(p1).toFixed(2))
p1.moverEnX(10)
console.log(p1.distancia(p2).toFixed(2))
p2.moverEnX(-4)
console.log(p1.distancia(p2).toFixed(2))```

Julian Escobar

student•

se supone que este es el codigo pero me sale un error en la linea 29

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

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

//  return Math.sqrt(x * x + y * y)
//}

const Punto = {
  init: function init(x, y) {
    this.x = x
    this.y = y
  },
  moverEnX: function moverEnX(x) {
    this.x += x
  }
  moverEnY: function moverEnY(y) {
    this.y += y
  },
  distancia: function distancia(p) {
    const x = this.x - p.x
    const y = this.y - p.y

    return Math.sqrt(x * x + y * y)
  }
}

const p1 = Object.create(Punto)
const p2 =  Object.create(Punto)

p1.init(0, 4)
p2.init(3, 0)

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

Diego Forero

Team Platzi•

Te falta una coma al cerrar la función moverEnX

const Punto = {
  init: functioninit(x, y) {
    this.x = x
    this.y = y
  },
  moverEnX: functionmoverEnX(x) {
    this.x += x
  },
  moverEnY: functionmoverEnY(y) {
    this.y += y
  },
  distancia: functiondistancia(p) {
    const x = this.x - p.x
    const y = this.y - p.y

    returnMath.sqrt(x * x + y * y)
  }
}

Julian Escobar

student•

Ok Gracias
Me sirvio mucho tu ayuda

Diego Ivan Perdomo Leon

student•

//CREAR LA CLASE creanPunto Y CON Object.create GENERAR NUEVOS OBJETOS

const creanPunto = {
  init: function init(x,y)
  {
    this.x = x;
    this.y = y;
  },
  moverEnX: function moverEnX(x)
  {
    this.x += x;
  },
  moverEnY: function moverEnY(y)
  {
    this.y += y;
  },
  distancia: function distancia(p)
  {
    return Number(Math.sqrt(Math.pow((this.x - p.x),2)+Math.pow((this.y - p.y),2)).toFixed(2));
  }
};

const p1 = Object.create(creanPunto);
const p2 = Object.create(creanPunto);

p1.init(0,4);
p2.init(3,0);

console.log(p1.distancia(p2));

Definiendo la clase Punto - Object.create 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