Cómo diferenciar arrow function de function

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.