Seleccionar página
Cómo hemos podido observar en Propiedades propias o heredadas en los objetos y Propiedades enumerables y no enumerables, Javascript define un conjunto de condiciones que definen que resultado obtendremos con los diferentes métodos que tenemos para obtener la propiedades de un objeto.

  • for in obtiene las propiedades enumerables propias o heredadas del objeto y no obtiene las propiedades no enumerables.
  • Object.getOwnPropertyNames(objeto) obtiene las propiedades enumerables y no enumerables propias del objeto y no obtiene las propiedades heredadas.

  • Object.keys(objeto) obtiene las propiedades enumerables propias del objeto y no las propiedades no enumerables o aquellas que siendo enumerables son heredadas por la cadena de prototipos.

Parece un galimatías, pero es más sencillo de lo que parece. Hay un interesante cuadro al final de esta página de MDN donde se muestra las diferentes situaciones.

Pero, ¿cómo podemos obtener absolutamente todas las propiedades de un objeto? No disponemos de un método nativo para este propósito, pero en unas pocas lineas podemos conseguir una función para nuestro propósito.

function getPropertyNames(obj) {
    var proto = Object.getPrototypeOf(obj);
    return (
        (typeof proto === 'object' && proto !== null ? getPropertyNames(proto) : [])
        .concat(Object.getOwnPropertyNames(obj))
        .filter(function(item, pos, result) { return result.indexOf(item) === pos; })
        .sort()
    );
}

Esta compacta función permite obtener todos las propiedades efectivas de un objeto, sean o no enumerables, sean propias o heredadas. Paso a paso, esta función:

  • obtiene el prototipo del objeto por medio de Object.getPrototypeOf(obj) (función de EMCAScript 5.1 que está disponible el la mayoría de los entornos, incluido IE9 en adelante)
  • si existe el prototipo se llama recursivamente a la función
  • se obtienen una matriz con las propiedades enumerables y no enumerables propias del objeto por medio de Object.getOwnPropertyNames(obj)
  • se filtra la matriz para eliminar duplicados
  • se ordena la matriz

Vamos a ver varios ejemplos de utilización de getPropertyNames(). En este primer caso se consultan las propiedades de un objeto construido como literal y se obtienen las propiedades de Object y las propiedades definidas en el objeto.

var o = {
    a: 1, b: 2, c: 3
};
console.log(getPropertyNames(o));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'a',
//   'b',
//   'c',
//   'constructor',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Si se utiliza una función como constructor de un objeto se obtendrá igualmente las propiedades de Object y las propiedades definidas en el constructor con this.

function Person(firstname, lastname, birthday) {
        this.firstname = firstname;
        this.lastname = lastname;
}
var p = new Person('Pablo', 'Almunia', '07-08-1966');
console.log(getPropertyNames(p));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'birthday',
//   'constructor',
//   'firstname',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'lastname',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Si se utilizan clases y herencia de ECMAScript 6 nuestra pequeña función sigue devolviendo todas las propiedades definidas en los constructores, las definidas por medio de get o set, tanto de la clase instanciada como de todas las clases de las que se hereda.

class Person {
    constructor(firstname, lastname, birthday) {
        this.firstname = firstname;
        this.lastname = lastname;
        this.birthday = new Date(birthday);
    }
    get age() {
        var ageDifMs = Date.now() - this.birthday.getTime();
        var ageDate = new Date(ageDifMs);
        return Math.abs(ageDate.getUTCFullYear() - 1970);
    }
}
class Employee extends Person {
    constructor(firstname, lastname, birthday, position) {
        super(firstname, lastname, birthday);
        this.position = position;
    }
}
var p = new Employee('Pablo', 'Almunia', '07-08-1966', 'Architect');

console.log(getPropertyNames(p));
// Mostrará más o menos
// [ '__defineGetter__',
//   '__defineSetter__',
//   '__lookupGetter__',
//   '__lookupSetter__',
//   '__proto__',
//   'age',
//   'birthday',
//   'constructor',
//   'firstname',
//   'hasOwnProperty',
//   'isPrototypeOf',
//   'lastname',
//   'position',
//   'propertyIsEnumerable',
//   'toLocaleString',
//   'toString',
//   'valueOf' ]

Es cierto que en muchas ocasiones nos bastará con utilizar for in, Object.getOwnPropertyNames(objeto) o Object.keys(objeto), pero esta pequeña y sencilla función nos permite obtener en cualquier momento una matriz con todas las propiedades de un objeto, sin excepción.

Si quieres conocer más sobre la cadena de prototipos y conocer que clases han a portado cada una de las propiedades, consulta cómo inspeccionar la herencia en Javascript.

Novedades

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

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

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()

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.

breves

Descrubir algunas características de console

En el día a día nos encontramos muy a menudo utilizando console. Es una navaja multiusos que nos facilita la vida a la hora de depurar nuestro código. La mayoría de nosotros ha utilizado console.log(), pero tiene otras muchas funcionalidades.

Matrices dispersas o sparse arrays en JS

Una característica que puede producir algunos problemas, si no lo tenemos en cuenta, es la posibilidad de tener matrices con huecos, es decir, con algunos de sus elementos sin definir. Es lo que se suele denominar una matriz dispersa o sparse array. Veamos cómo trabajar con esta características de las matrices.

Operadores de bits usados con asiduidad

Cada día más a menudo podemos encontrar operadores binarios utilizados como formas abreviadas de algunas operaciones que de otra forma sería algo menos compactas y, quizás, más comprensibles. Veamos algunos casos en detalle.

Propiedades enumerables y no enumerables

En Javascript las propiedades de los objetos pueden definirse como enumerables o no enumerables, es decir, si deben ser obtenidas for in o Object.keys(objeto) o no, aunque estén presentes en el objeto. Veamos cómo se hace.