Seleccionar página

Las de propiedades de los objetos se crean y utilizan con facilidad en Javascript, pero se suelen desconocen algunas de sus más interesantes características que nos pueden permitir un mayor control sobre ellas. En este mismo sentido, los métodos de Object son unos grandes desconocidos. Son soportados por todos los navegadores modernos (incluido IE9), pero siguen siendo poco aprovechados. Varios de estos métodos nos van a ayudar a entender las principales características de las propiedades de los objetos en Javascript y sacarles todo el partido.

Veamos la diferencia entre las propiedades propias y las propiedades heredadas. Las propiedades propias son las creadas directamente en un objeto. Cuando las propiedades son creadas en el constructor por medio de this o asignadas dinámicamente sobre el objeto, son propiedades propias del objeto, ya que se crean sobre la instancia directa del objeto.

function Triangulo() {
    // Propiedades creadas en el contructor sobre el objeto
    this.a =  60;
    this.b =  60;
    this.c =  60;
}

var equilatero = new Triangulo();
equilatero.tipo = "equilátero"; // Propiedad creada sobre el propio objeto

for (var prop in equilatero) {
    if (!equilatero.hasOwnProperty(prop)) continue;
    console.log(prop); // muestra nada a, b, c y tipo
}

Las propiedades heredadas son creadas en la cadena de prototipos de objeto. Cuando se crean por medio de prototype no pertenecen como tal al objeto y se consideran heredadas.

function Triangulo() {
}
// Propiedades creadas en el prototipo
Triangulo.prototype.a =  60;
Triangulo.prototype.b =  60;
Triangulo.prototype.c =  60;

function Equilatero() {
}
// Aumentar la cadena de prototipos
Equilatero.prototype = Triangulo.prototype;
Equilatero.prototype.tipo = "equilátero";

var equilatero = new Equilatero();

for (var prop in equilatero) {
    if (!equilatero.hasOwnProperty(prop)) continue;
    console.log(prop); // no muestra nada
}

Como se habrá podido observar, for in recorre las propiedades propias y heredadas de un objeto y por medio de hasOwnProperty podemos diferenciar unas de otras.

La recomendación de utilizar hasOwnProperty en los bucles for in viene dada por este hecho, ya que si algún paquete o librería poco cuidadosa modifica el prototipo de, por ejemplo, Object, todos nuestros bucles encontrarán esta propiedad y, muy probablemente, tengan un comportamiento no controlado.

function Triangulo() {
    this.a =  60;
    this.b =  60;
    this.c =  60;
}
var equilatero = new Triangulo();
equilatero.tipo = "equilátero";

// Se añade un método a todos los objetos
Object.prototype.debug = function() {
    //...
};

for (prop in equilatero) {
    console.log(prop); // a, b, c, tipo y debug
}

Una forma alternativa para poder obtener sólo las propiedades propias de un objeto es utilizar Object.getOwnPropertyNames(objeto). Este es un método disponible desde ECMAScript 5.1 y devuelve una matriz con los nombres de las propiedades propias del objeto, sin incluir las propiedades heredadas.

function Triangulo() {
    this.a =  60;
    this.b =  60;
    this.c =  60;
}
var equilatero = new Triangulo();
equilatero.tipo = "equilátero";

Object.getOwnPropertyNames(equilatero).forEach(function(prop) {
    console.log(prop); // a, b, c y tipo
});

Object.prototype.debug = function() {
    //...
};

Object.keys(equilatero).forEach(function(prop) {
    console.log(prop); // a, b, c y tipo
});

Una ventaja adicional de Object.keys(objeto) es que podemos utilizar los métodos de manejo de matrices como forEach(), filter(), map() o reduce().

Novedades

customElements a fondo

customElements a fondo

Vamos a dar repaso general a customElements y todos sus métodos. Esta es una pieza clave para la creación de Custom Tag, uno de los pilares de los Web Components. Hemos intentado empezar por lo más básico e ir avanzando hasta describir algunos de sus comportamientos más complejos, además de describir algunas de las características más importantes de los Web Components.

Uso de jsRPC en una aplicación de ejemplo

Uso de jsRPC en una aplicación de ejemplo

Para poder comprender mejor cómo podemos utilizar la librería jsRPC hemos creado una aplicación de ejemplo en la que hemos utilizado el modelo RPC para que el front invoque funciones del servidor y para que los diferentes microservicios invoquen de forma remota funciones entre ellos.

Un completo sistema RPC en Javascript con sólo 100 líneas

Un completo sistema RPC en Javascript con sólo 100 líneas

La aparición de gRPC de Google ha hecho que vuelva a ponerse de moda los sistemas de Remote Procedure Calls. La mayoría de las implementaciones de RPC se han ajustado muy poco a las características idiomáticas de Javascript. Con jsRPC mostramos cómo desarrollar un completo sistema RPC utilizando las características de Javascript.

Usar correctamente el método sort()

Usar correctamente el método sort()

En general no se hace un uso habitual del método .sort() de los Array y muchas ocasiones se desconoce cómo hacer funcionar este método de forma correcta. En este artículo os contaremos cómo funciona y cómo sacar partido a sus características.