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
No hay comentarios:
Publicar un comentario