Comprende JS: Function constructors

Bruno Pineda
sngular-devs
Published in
4 min readOct 28, 2018

--

Parte XII de la serie Comprende JS

Ahora que ya entendemos que es la herencia prototipal en Javascript, pasamos a comprender…

Function constructors

El lado conceptual de esto, es una función que crea un objeto a partir de un prototipo vacío.

Veamos con ejemplos, para ello considera el siguiente código.

Podríamos decir que es otra forma de crear objetos en Javascript ademas de const obj = {} //Object literalso const obj = new Object() //Function constructors built-in, pero con características adicionales.

Primero vemos creamos una función a través de una “Function statement”, dentro de esta función estoy utilizando la palabra reservada this, que vimos en este episodio anterior de esta serie y agrego las propiedades name, lastname, al objeto que vaya a representar this, al momento de invocar.

Bien, pero justo antes de invocar la función Person(), vemos que usamos una palabra reservada…

new keyword

Javascript, escrito por Brendan Eich, fue “victima” de las guerras comerciales de las grandes empresas, por tener mas popularidad en sus lenguajes de programación unos mas que otros, pero en el caso de Javascript, el nombre que tiene hoy en día es gracias al gran Marketing que se hizo por popularizar el lenguaje, ya que en aquellos días, había mas desarrolladores de Java, al ser el mas popular en dichos tiempos, por lo que parte de la campaña de Marketing, fue poner un nombre como Java o que lo relacionaran y de ahí nació Javascript, no hombre, unos genios!, jaja, chiste local en México, pero también parte de dicho Marketing es hacer creer a los desarrolladores de Java que Javascript era muy similar…

Hey mira, Javascript es muy similar a Java, mira esto:

var person = new Person();

Y es que en Java una clase no es un objeto, sino define un objeto, es por ello que en Javascript no existen las clases, sin embargo al ser victima de este Marketing, tenemos como resultado el uso de la palabra new.

Retrocedamos un poco y recordemos la tabla de precedencia y asociatividad de operadores en Javascript, la cual nos indica si, así es, que new es un operador y por lo tanto si recordamos un operador es una función.

Teniendo eso en cuenta podemos ver que nuestra tabla nos indica que podemos utilizar a new sin los paréntesis y en seguida espera el resultado de una función, pero espera no se supone que una función para que devuelva un valor es necesario utilizar return, bueno así es, pero cuando anteponemos la palabra clave new, JS se encarga primero de crear un objeto vacío, es decir, cuando ejecutamos el operador (función) new, se crea un nuevo objeto el cual va a envolver o ser el Lexical environment de la función que se invoca después de esta palabra y cuando termina de ejecutarse la función en este caso Person(), new, se encarga de devolver el objeto pero con las definiciones que le dimos a this. Si no anteponemos new a nuestra función veremos que nuestra variable bruce, vale undefined, por lo tanto si tratase de usar la propiedad name, de dicho objeto mandaría un error.

Error

Lo anterior debido a la falta de new o en su defecto de return.

Sabemos que cuando se ejecuta una función se crea un nuevo contexto de ejecución en la pila y este a su vez genera un Lexical enviroment en conjunto con su variable environment y this, pero este ultimo va a hacer referencia al objeto vacío que genero la palabra new.

Si pudiéramos ver que sucede al ejecutar una función, anteponiendo el operador new, es decir una función constructora, veríamos que genera algo así…

Empty object created by new keyword

La otra característica adicional que diferencia de los demás métodos que existen en Javascript para crear objetos, es que una función constructora crea y asocia el prototipo por ti.

Si observamos tanto this de Person, como bruce, en su __proto__, apuntan al mismo objeto vacío que new ha creado, por lo que asocio a bruce el prototipo del objeto vacío Person.

Desventajas de new

Bueno aqui vamos, este es un tema muy discutido entre muchos desarrolladores, ya saben de esas cosas que solo los geeks sabemos que nos gusta desgastarnos en defender como aquello de usar espacios en vez de tabs, en fin, sin embargo solo tocare la mas aclamada por muchos que trae consigo new.

Acoplamiento forzoso

Existe el peligro que si olvidas la palabra new, tengas errores al querer utilizar o implementar tu “clase”, por lo que genera un acoplamiento “a huevo” usar new siempre para crear una instancia de tu clase, aunque existen boilerplate’s para solventar eso, como…

function Person() {
if (!(this instanceof Person)) { return new Person(); }
}

Pero aun así, supone acoplamiento.

Conclusión

Esta característica que tiene Javascript para crear objetos a partir de un prototipo vacío, es muy atractiva para aquellos que vienen de otros lenguajes, sin embargo existen mejores patrones para crear objetos a partir de prototipos como Factories.

<< episodio anterior || episodio siguiente >>

--

--