Aprendiendo Javascript: Objetos.

Hace ya algún tiempo que empecé mi camino en la programación a través de JAVA, PHP y algo de Javascript.

No fue hasta hace unos años que me atrajo Javascript de una manera más profunda en lugar de las simple modificaciones que realizaba hasta el momento con JS, así que me dediqué de forma exclusiva a aprender este lenguaje que para unos es considerado el futuro del FrontEnd y el Backend y para otros es lo más desordenado que hay.

No me considero un experto, ni mucho menos, aunque si que disfruto con este lenguaje como el que más. Empecemos con los Objetos.

El diseño de los Objetos.

Si venís de otro lenguaje orientado a Objetos es normal que veáis Javascript como el caos personificado, con lo cual es muy fácil crear aplicaciones pero también hacerlo sin ningún tipo de orden ni posibilidad de reusarlos, si no tenéis en cuenta diferentes patrones.

Creación de Objetos en Javascript.

Curly Braces

var obj = {}; //creado el objeto ‘obj’;

Object.create

var obj = Object.create(Object.prototype); 

New Object()

var obj = new Object();

Las tres formas de crear objetos son válidas, aunque la primera y la segunda son las más usadas.

Asignar y leer valores con objetos

 

Dot Notation

var obj = {};
obj.name = “Mario”;//creación de valores
console.log(obj.name); //leer valores

Square Bracket

var obj = {};
obj[‘name’] = “Mario”;//creación de valores
console.log(obj[‘name’]); //lear valores

Definir propiedades

Anteriormente hemos visto como se asignan y se leen los valores en un objeto, pero esta vez definiremos propiedades, que nos permitirán configurarlas una a una y que más adelante nos servirá para heredar de otros objetos.

Crearemos un objeto llamado obj con los atributos nombre y edad además de una función para mostrar esos datos, llamada toString.

var obj = {name: 'Mario', age: '25'};
obj.toString = function(){return this.name +' '+this.age};

Hasta aquí todo normal, se ha creado un objeto y se añade una función para mostrar los atributos. A continuación haré algo muy parecido, prácticamente igual en esencia pero con más configurable y reusable en un futuro.

var obj = {name:'Mario', age:'25'};

Object.defineProperty(obj, 'toString', {
   value: function(){return this.name + ' '+this.age},
   writable: false,
   enumerable: true,
   configurable: true
});

He creado el mismo objeto con las mismas propiedades, hasta aquí igual, pero añado la función toString a obj usando Object.defineProperty. Además me permite definir 4 opciones:

Writable

obj.toString = "Hola";

Si intento reescribir toString no me dejará aunque no mostrará ningún error.

Enumerable

Enumerable me permite esconder toString en un for-in por ejemplo. Si está a true aparecerá como se ve a continuación, pero si está a false no.

console.log(Object.keys(obj)) //['name','age','toString']

Configurable

Esta opción a false impide que a partir de ese momento no se puedan modificar las opciones de toString, mostrando un error que dice que es imposible redefinir toString.

var obj = {};

Object.defineProperty(obj, 'toString',{ 
  value: function(){ return this.name + ' '+this.age}
  writable: true,
  enumerable: true,
  configurable: false
});

Una vez he definido la función toString si intento modificar las opciones (value, writable o enumerable) mostrará error.

Object.defineProperty(obj, 'toString',{
  writable: false
})

Uncaught TypeError: Cannot redefine property: toString(…)

Como usar Object.create para hacer herencia

De las tres opciones para crear objetos, la mas interesante y sencilla para crear herencia es la de Object.create.

var persona = {nombre: 'Juan', apellido: 'Garcia'}

Object.defineProperty(persona, 'toString',{
   value: function(){return this.nombre + ' '+this.apellido},
   writable: false,
   enumerable: false,
   configurable: false
});

var estudiante = Object.create(persona);

Object.defineProperty(estudiante, 'carrera',{
   value: 'Ingeniería Informática',
   writable: false,
   enumerable: true,
   configurable: false
});

console.log(estudiante.nombre); //Juan
console.log(estudiante.apellido); //Garcia
console.log(estudiante.carrera); //Ingeniería Informática
console.log(estudiante.toString()); //Juan Garcia

Como se puede ver en el ejemplo anterior, tenemos acceso a todos los valores que contiene persona e incluso al toString, que hemos declarado posteriormente. Si intentamos acceder al valor de carrera desde persona nos mostrará undefined.

Constructores

Son métodos que nos permiten crear instancias. La mejor forma de crear constructores es usar prototype en lugar de añadir la función directamente al constructor una vez lo creamos.

Como vemos en este ejemplo, por cada instancia que creamos podemos acceder tanto a los valores que le pasamos como a la función toString.

var Persona = function(name,age){
  this.name = name;
  this.age = age;
}

Persona.prototype.toString = function(){
  return this.name + ' '+this.age;
}

var persona1 = new Persona('Mario',25);
console.log(persona1.toString());

Fuente : https://medium.com/@mariodev_/aprendiendo-javascript-objetos-55634f065b09