Enlace Patrocinado
Enlace Patrocinado
Hace algo de tiempo 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.
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
Enlace Patrocinado
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());