JavaScript Orientado a objetos para principiantes

Una vista rapida de como JS crea clases mediante constructores de eventos y como crear instancias de objetos en base a estas clases.

Conceptos basicos

Los objetos pueden tener datos y codigo asignado que representan lo que se intenta modelar, sus funcionalidades y el comportamiento que sea desea. Los datos y (a menudo las funciones) se pueden almacenar de forma ordenada (encapsulada) dentro de un paquete de objetos. De esta manera se puede lograr una biblioteca de datos a los que se puede acceder mas facilmente, otra de sus utilidades es actuar como un almacen de datos que se puede enviar mas facilmente por la red.

Definicion de una plantilla de objetos

Abstrayendo los datos (crear un modelo basico para una manipulacion facil en la practica del desarrollo de las funcionalidades) para la creacion en este caso de un objeto person.

Las class sirven como plantillas donde se definen las propiedades y metodos para los objetos creados a partir de ella, a estos objetos se los llama instanacias de clase.

Creando objetos

Partiendo de la clase podemos entonces crear instancias (objetos que contienen los datos y funcionalidades definidas en la clase original).

Ej:

Class Person {
	Name
	Age
	Interests
	Bio {"my name is [Name], i have [Age]"}
}

Object person1 {
	Name:Bob
	Age: 20
	Interests: Music
	Bio: {"my name is Bob, i have 20"}
}

Cuando una instancia de objeto es creada a partir de una clase se ejecuta una funcion constructora de la clase para crearla

Un objeto es un bloque compuesto de muchos datos, esto pueden ser strings, numeros, arrays, funciones, otros objetos...

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  bio: function() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf: function() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

Para las funciones existe una sintaxis mas simple:

const person = {
  name: ['Bob', 'Smith'],
  age: 32,
  bio() {
    console.log(`${this.name[0]} ${this.name[1]} is ${this.age} years old.`);
  },
  introduceSelf() {
    console.log(`Hi! I'm ${this.name[0]}.`);
  }
};

Estos objetos planteados se conocen como literales (donde literalmente definimos su contenido cuando los creamos xD)

Para invocar a un objeto y cualquiera de los datos de su contenido, primero se ingresa el nombre del objeto, un punto, y luego el dato (ya sea una propiedad o funcion) a la que queremos acceder:

person.age
person.bio()

Objetos como propiedades de objetos:

Como comente mas arriba un objeto puede contener mas objetos, esto serviria para almacenar de una manera mas legible los datos en lugar de un array. (Pero es relativo a lo que se desea hacer)

//Propiedad name con el primer y segundo nombre distribuido en un array
name: ['Bob', 'Smith'],
//Es equivalente a distribuirlo en un objeto
name : {
  first: 'Bob',
  last: 'Smith'
},

//-------------

person.name[0] // retorna Bob
person.name[1] // retorna Smith

person.name.first // retorna Bob
person.name.last // retorna Smith

Notacion de corchetes

Otra forma de acceder a los datos, aparte de la notacion de puntos es la de corchetes:

person['age']
person['name']['first']
person['name']['last']

En resumen podemos realizar todas las mismas practicas con ambas notaciones. Pero algo interesante que podemos realizar con la notacion de corchetes, es la posibilidad de ingresar una variable como nombre de miembro. Ej

const myDataName = nameInput.value;
const myDataValue = nameValue.value;

person[myDataName] = myDataValue;

//Gracias a esto podria ingresar miembros con nombre personalizados al objeto

const myDataName = 'height';
const myDataValue = '1.75m';
person[myDataName] = myDataValue;

person.height  //return 1.75m
//la propiedad height en este caso fue creada por el usuario

Palabra clave this

Esta palabra clave hace referencia al objeto actual en el que se esta escribiendo el codigo, en los casos anteriores, si usaramos this hariamos referencia al objeto person, esto es especialmente util cuando pasamos de objetos literales a instanciados de una clase (donde el nombre del objeto no va a estar definido hasta que sea creado).

const person1 = {
  name: 'Chris',
  introduceSelf() {
    console.log(`Hi! I'm ${

person1

.name}.`);
  }
}
//estos dos son equivalentes this esta cumpliendo la misma funcion,
//pero en el caso de que pudieramos crear person 2, 3 ... 1000
//el metodo introduceSelf() seria inutilizable porque person1 no existiria


const person1 = {
  name: 'Chris',
  introduceSelf() {
    console.log(`Hi! I'm ${

this

.name}.`);
  }
}
//y asi es como lo solucionamos jeje

Introduciendo constructores