Crear un objeto en JavaScript

Objetos en JavaScript

En un lenguaje de programación como JavaScript, un objeto consiste de pares clave : valor, lo que en otros lenguajes de programación conocemos como Hash o Dictionary. Para crear objetos en JavaScript, podemos hacerlo de diferentes maneras, ya sea a través de un Object Literal, mediante el método Object.create o por instanciación con el operador new.

Al igual que en los artículos anteriores de JavaScript, en este post utilizaremos la sintaxis definida en ECMAScript 5.1

Recordemos que JavaScript es un lenguaje basado en prototipos, lo cual quiere decir que todos los objetos que usemos se basan en un objeto pre-existente que le sirve de prototipo (o plantilla). Recomiendo leer el artículo POO en JavaScript – Prototipos.

Ahora veamos los métodos más comunes para la creación de objetos:

Object Literal

La notación literal de un objeto se describe en pares de clave : valor contenidos entre corchetes { }. El nombre de la clave puede ser un String con caracteres especiales.

    //nuevo objeto vacío
    var obj = {};

    //nuevo objeto con propiedades
    var Types = {
        text: "text",
        email: "email"
    };

    //nuevo objeto con propiedades
    var field = {
        name: "username",
        content: { type: Types.text, required: true },
        "is-hide": false
    };

Object.create

El método Object.create() crea un nuevo objeto a partir de un prototipo especificado. Para ver este método en detalle, sugiero que lean el artículo Definir propiedades de un objeto en JavaScript

    //nuevo objeto vacío
    var obj = Object.create(null);

    //nuevo objeto a partir de otro objeto
    var field = Object.create({
            name: "username",
            content: { type: Types.text, required: true }
        });

    function Person() { this.age = 0; }
    Person.prototype.name = "unnamed";

    //nuevo objeto a partir de un prototipo:
    //para este caso, Person es un constructor,
    //y sus métodos y propiedades se definen en su prototipo
    var mario = Object.create(Person.prototype);

Debemos tener en cuenta que con el método Object.create, las propiedades del nuevo objeto serán creadas a partir del prototipo copiado, es decir que no tiene propiedades definidas en el constructor sino las compartidas en el prototipo, veamos:

    //vamos a comparar dos objetos:
    //a) creado a partir de un object literal
    console.log("Object literal:", Types);

    //b) creado a partir de Object.create()
    console.log("Object.create:", mario);

    //ahora preguntamos por una propiedad
    Types.hasOwnProperty("text"); //true
    mario.hasOwnProperty("name"); //false

En en ejemplo anterior notamos lo siguiente: al imprimir el objeto mario, vemos que no existe la propiedad age la cual fue definida en el constructor Person; esto ocurre porque Object.create crea un objeto a partir de un prototipo, y no de una función constructor. Otra cosa que podemos notar es que al determinar si la propiedad name pertenece a mario, el método hasOwnProperty() retorna false, y esto es porque la propiedad name esta definida en el prototipo a partir del cual se creo el objeto mario.

Nota: es una buena práctica incluir el polyfill del método Object.create en caso de que lo utilicemos en nuestra aplicación, para asegurarnos que el código no vaya a fallar si el navegador no lo soporta (tenga en cuenta shimming Object.create y closures).

    //Polyfill para Object.create()
    if (typeof Object.create !== 'function') {
	    Object.create = (function (undefined) { //closure IIFE
	        function F() {} //objeto en cache

	        return function create (proto) {
	            if (proto === null)
	                return {};
	            if (typeof proto != 'object')
	                throw TypeError('First argument must be an object');
	            if (arguments.length > 1)
	                throw Error('Second argument is not supported'); 
	            F.prototype = proto;
	            var newObj = new F();
	            F.prototype = undefined;
	            return newObj;
	        }
	    }()); //end IIFE
    }

El operador new

Al utilizar el operador new creamos una instancia de un objeto basado en el constructor provisto. Debemos tener en cuenta que el constructor es una función a partir de la cual creamos una nueva copia de un objeto específico. Por lo tanto la función constructora es lo que en otros lenguajes de programación llamamos clases. Recomiendo leer el artículo POO en JavaScript – Prototipos ya que abarca una parte sustancial de la programación orientada a objetos en JavaScript.

    //nuevo objeto vacío
    var field = new Object();

    //define las propiedades
    field.name = "email-address";
    field.content = { type: Types.email, required: true };

Aunque podemos crear objetos de la forma anterior, es una buena práctica hacerlo mediante un Object Literal, a menos que necesitemos crear siempre el mismo tipo de objeto, en cuyo caso es mejor definir un constructor que sirva de plantilla para tal fin, por ejemplo:

    //definimos el constructor
    function View(name, template) {
        this.name = name || "index";
        this.template = template || "";
    }

    //creamos las instancias
    var aboutView = new View("about");
    var productsView = new View("products");

En el ejemplo anterior tenemos un constructor flexible con el cual establecemos valores predefinidos a los argumentos de la función, sacando provecho de la coerción.

Para conocer un poco más sobre constructores, recomiendo que lean el artículo POO en JavaScript – Prototipos. En un futuro artículo veremos constructores avanzados. Por ahora si quieren ver un ejemplo del patrón constructor, pueden revisar estos stackoverflow: Javascript constructor pattern y Different way of creating a Javascript Object.

Para concluir, quiero recomendar la lectura de la segunda parte de este artículo, Definir propiedades de un objeto en JavaScript.

Happy reading!

One thought on “Crear un objeto en JavaScript

Comentarios

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s