Seleccionar página
En el interesante artículo La función que no lo era, de Javier Vélez Reyes, se hace patente una singular e importante diferencia entre la tradicionales function y las arrow function. Sin duda Javier ha dado en el clavo sobre una de las principales diferencias entre ambos modelos y pone de manifiesto la importancia de conocer que ambos modelos no son equivalentes e intercambiables, ya que el uso de uno u otro tiene consecuencias muy significativas en la contextualización de this.

Veamos cómo es posible saber si una función ha sido construida por medio de la instrucción function o como una arrow function. Es primer lugar debemos descartar algunas estrategias, que aunque parezcan evidentes, no van a funcionar en ningún caso:

var f = function () { return 1; };
var g = () => 1;

console.log (
    f === g,
    typeof (f) === typeof (g),
    f instanceof Function,
    g instanceof Function
);

Todos estos intentos de comparar una función tradicional y una función flecha no ofrecen una solución válida. Tenemos dos métodos para conocer si una función ha sido construida de la forma tradicional o como función flecha:

Prototype

El primer método es preguntar por el prototipo de la función en cuestión. Las arrow function no tienen prototipo y por lo tanto typeof de esta propiedad devuelve el undefined. Podemos aprovechar esta característica para escribir una breve y sencilla función isArrowFunction:

function isArrowFunction(x) {
    return typeof x.prototype === 'undefined';
}

var f = function () { return 1; };
var g = () => 1;

console.log('isArrowFunction(f) = ', isArrowFunction(f));
console.log('isArrowFunction(g) = ', isArrowFunction(g));

Actualización: hemos visto que esta aproximación tiene un problema en varios casos: con las funciones nativas de los objetos Javascript y con los métodos de las clases, ya que estas tampoco tienen un prototipo y por lo tanto se confunden con las arrow function si usamos esta función.

class C {
  m() {}
}
const c = new C();

console.log('isArrowFunction(Object.create) = ', isArrowFunction(Object.create));
console.log('isArrowFunction([].splice)     = ', isArrowFunction([].splice));
console.log('isArrowFunction(c.m)           = ', isArrowFunction(c.m));

toString

El segundo método es analizar el código de la función por medio del método toString() que tienen todos los objetos en Javascript y, cómo las funciones también son objetos, podemos utilizar para las funciones y funciones flecha. Las funciones tradicionales empiezan siempre con el texto 'function' y las funciones flecha no. Podemos aprovechar esta característica para rescribir nuestra función isArrowFunction:

function isArrowFunction(x) {
    return x.toString().indexOf('function') !== 0;
}

var f = function () { return 1; };
var g = () => 1;

console.log('isArrowFunction(f) = ', isArrowFunction(f));
console.log('isArrowFunction(g) = ', isArrowFunction(g));

Aunque no son evidentes, tenemos dos formas de conocer si una función ha sido construida de la forma tradicional o como función flecha, por lo que nuestras librerías o framework pueden establecer algún tipo de medida defensiva ante los comportamientos no deseados del uso de funciones flecha al no tener en cuenta el funcionamiento de this en este tipo de funciones.

Novedades

¿Qué pasa con import y los web components?

¿Qué pasa con import y los web components?

Uno de los más controvertidos pilares de los componentes web ha sido el HTML Import. Considerado en estos momentos como una funcionalidad discontinuada, debemos conocer como sacar el máximo partido la instrucción import de Javascipt para gestionar la carga de nuestros componentes.
Template a fondo

Template a fondo

Hay dos formas estándar de crear contenido en un componente de forma flexible: la etiqueta template, que se considera como uno de los pilares de los Web Components y las template string de Javascript, que son una buena alternativa para generar el Shadow DOM con interpolación de datos.
Light DOM a fondo

Light DOM a fondo

El Light DOM es un espacio compartido entre nuestro componente web y el DOM general, que podemos utilizar para insertar contenido o configurar nuestro componente. Es una muy interesante característica que debemos conocer.
Shadow DOM a fondo

Shadow DOM a fondo

Para que los componentes web no colisionen unos con otros es muy útil utilizar el Shadow DOM para aislar el DOM y el CSS de cada componente. Esta característica se puede aplicar también a elementos HTML sin necesidad de utilizar Custom Elements, pero es con estos donde cobra todo su potencial. Demos un repaso profundo a las capacidades del Shadow DOM.