Entendiendo que son los objetos en javascript y como trabajan.

Los objetos son el núcleo principal de javascript, ya que todo en javascript es un objeto, un número, un string(cadena de texto), un array o una función, son objetos. Sin embargo la confusión empieza cuando entendemos un objeto como solo un tipo de datos, cuando empecé a aprender javascript pensé que los objetos eran solo una colección de pares de clave y valor dentro de brackets o corchetes. Parecía fácil y de hecho es fácil cuando lo entendemos como una de los tipos de datos de javascript. Ah!! Pero el concepto de objeto tiende a ser más complejo que eso. En particular con javascript, ya que los objetos de javascript son muy particulares al lenguaje.

Me tomo algo de tiempo darme cuenta que los objetos en javascript es un tema mucho más extenso y profundo de lo que se enseñaba en los tutoriales. Empecé a investigar en diferentes canales y pdfs y habían algunos que daban buenas explicaciones otros me confundían aún más. De repente con toda la información obtenida como que empece a tener una mejor idea de lo que pasaba. Podría resumir en una líneas dentro de esta introducción que todo en javascript es un objeto, sí, pero volveria a muchas de las definiciones simplistas de diversas fuentes. Por lo tanto en esta entrada o publicaciones tratare de dar una explicación comprensiva de que son los objetos en Javascript.  A pesar de que pueda tratar varios temas en esta publicación no pienso profundizar en ninguno de ellos y muy probablemente me quede corto y siga tratando este tema en otras entradas o publicaciones. Así que calmados venados, si es que terminan con más preguntas que respuestas XD. Por lo pronto que empecemos por el principio…

Objetos en javascript, si estos sin profundizar mucho { }

Los objetos en javascript son solo una colección de propiedades cada una con una clave que identifica un valor. Puedes accederlos por medio de un punto o por medio de corchetes, hasta aquí nada nuevo bajo el sol. Ejemplo, var Objeto = {a:1}; ( Objeto.a ) o ( Objeto[a] ), recuerden que no deben de usar corchetes o brackets si no es un identificador valido, es decir como una variable, tiene espacios, comienza con numero o contiene guion. Cuando se usa el punto se accede al objeto directamente, cuando se usa el bracket se evalúa como una expresión.

Ejemplo simple como dato {} y sin tanta complicación

 

var persona = {

    nombre:””,

    apellido:””,

    dameNombre: function(){

        return this.nombre+” ”+this.apellido;

    }

}

persona.nombre = “Luis”;

persona.apellido = “lopez”;

console.log(persona.dameNombre())

Los objetos son creados con un Prototipo que es muy importante para este tema.

Prototipo o prototype en ingles.

Todos los objetos en Javascript contienen un prototipo interno, o una propiedad llamada prototipo, en la mayoría de los navegadores se puede acceder fácilmente usando la consola como __proto__. Un prototipo en palabras sencillas es un modelo, un mapa, una representación, recordemos eso. Un prototipo es la solución de javascript para la herencia que te permite compartir información de un objeto a otro sin tener que replicar todo el objeto o código en la memoria, lo hace tomando como referencia a otro objeto, es decir crea un link de objeto a objeto.

Cadena de prototipo.- Cada vez que busques alguna propiedad en un objeto de javascript lo primero que hace es que mira dentro de sí mismo, busca la propiedad y si no la encuentra se va a buscar en el prototipo y si tampoco lo encuentra se fijara en el prototipo del prototipo y asi lo seguirá haciendo hasta terminar la búsqueda. De la manera en que lo veo conceptualmente busca hacia atrás, a pesar que en el navegador pareciera buscar hacia adentro. Por eso si abren la consola del navegador y se fijan en un objeto, abre en prototipo y se van abriendo prototipos se encuentran con una cadena que parece interminable de prototipos. Luego quedas asi de hasta dónde diablos termina esto :O pero si termina, eventualmente.

Tomemos como ejemplo:

var const = function(){

this.a = 1;

this.b = 2;

}

var Obj = new const();

const.prototype.b =3;

const.prototype.c = 4;

 

Const es un constructor, es decir una función que se usa con el operador new para crear un nuevo objeto. A partir de ello se crea una instancia, es decir un objeto Obj el cual obtiene un prototipo. Ahora si le agregamos b y c a  const, y nos fijamos en Obj llamando c Obj.c se fijara en Obj primero y al no encotrarlo seguirá buscando en su prototipo.

Obj.c //nos data como resutado 4

Ahora hay que preguntarnos cual es el valor de Obj.b desde que cambiamos de 2 a 3 en const.  Obj.b es 2. Porque cuando lo inicializamos ese era su valor y como todavía lo tenemos primero busca en Obj. Pero si borraramos b y volvemos a buscar, no encotrariamos con que ahora resultaría el valor 3. ¿Por qué? Porque ahora tuvo que viajar al prototipo y buscar si existía la clave, la cual seguía existiendo pero con diferente valor.

Asi que vamos a crear objetos y lo haremos de diferentes maneras

Objeto Literal.- var obj = {a:1}; En este ejemplo hemos creado un objeto con un prototipo nulo, es decir ha llegado al final, si abrimos en la consola y ponemos obj solamente nos dara el objeto, le damos abrir al proto y nos dara un conjunto de funciones básicas como toString, valueOf, etc, pero hasta ahí, no más cadena. Si después una línea abajo creamos otro objeto pero ahora de esta manera var newObj = Object.create(obj); tendremos que newObj tiene de prototipo a Obj que tiene a Object.prototype y hasta ahí llega la cadena. newObj -> Obj -> Object.prototype -> null. En suma usaremos Object.create para crear un objeto con un prototype especifico.

 

Constructor.- En javascript el constructor es una función que se usa con el operador new para crear una instancia del objeto. Aunque hoy en dia no es tan visible y obvia con el nuevo estándar ES6 es bueno saberlo. Pondre un ejemplo al respecto del antes y ahora.

function persona(_nombre,_apellido){
     this.nombre = _nombre;
     this.apellido = _apellido;
}
persona.prototype.dameNombre = function(){
    return this.nombre+" "+this.apellido;
}
var estudiante = new persona("Maria", "Perez");
console.log(estudiante.dameNombre())

 

Hoy es más sencillo y estructurado:

 

class Persona{
    constructor(_nombre,apellido){
        this.nombre = _nombre;
        this.apellido = _apellido;
    }
   dameNombre(){
       return this.nombre+" "+this.apellido;
   }
}

var estudiante = new Persona("Juan", "Perez")

console.log(estudiante.dameNombre());

 

Con esto nos acercamos un poco a la comprensión de que son los objetos y de como trabajan, sin embargo hay mucho todavia detras de bambalinas, para lo que estaré haciendo otras entradas en sobre este tema en mis próximas publicaciones.