Duda JS con funciones flecha

pantocreitor #1 Nov '19

Estoy haciendo una práctica y llegado x punto estaba liado con una función a la cual se le pasan 2 fechas y me devuelve un listado de compras, la cual está compuesta por las clases cliente y vehículo y los atributos importe y fecha.

He estado un rato largo mirando por qué me salía el típico fallo de noob de uncaught type error undefined pero no daba con la tecla.
En este listado se llamaba a una función de busqueda y era esta la que me tiraba el error.

El tema ha sido que un compañero me ha comentado que lo cambiase a función flecha una función hecha de la manera clásica y ha empezado a funcionar bien, pero no ha sabido explicarme por qué.

Cómo este tipo de cosas no pasan por obra y gracia del espíritu santo estoy con la duda de que diferencia hay entre el acceso de una función clásica y una función flecha para que con el mismo código una me diga que la función a la que llamo es undefined y y la otra esté bien.

spoiler

En la función listadoVendidosperiodo(fechaInicio, fechaFin), un poco mas abajo hay un this.ventas.foreach, ahí es dónde la función normal no funcionó y la función flecha si.

"use strict";
class Cliente {
    constructor(nif, nombre, apellidos, telefono) {
        this.nif = nif;
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.telefono = telefono;
    }

    toHtmlRow() {
        let row = "<tr>";
        row += "<td>" + this.nif + "</td>";
        row += "<td>" + this.nombre + "</td>";
        row += "<td>" + this.apellidos + "</td>";
        row += "<td>" + this.telefono + "</td>";
        row += "</tr>";
        return row;
    }
}

class Venta {
    constructor(cliente, vehiculo, importe, fechaVenta) { //importe es float
        this.cliente = cliente;
        this.vehiculo = vehiculo;
        this.importe = importe;
        this.fechaVenta = fechaVenta;
    }

    toHtmlRow() { // Necesita acceso a las compras
        let row = "<tr>";
        row += "<td>" + this.nif + "</td>";
        row += "<td>" + this.nombre + "</td>";
        row += "<td>" + this.apellidos + "</td>";
        row += "<td>" + this.telefono + "</td>";
        row += "<td>" + this.matricula + "</td>";
        row += "<td>" + this.marca + "</td>";
        row += "<td>" + this.modelo + "</td>";
        row += "<td>" + this.combustible + "</td>";
        row += "<td>" + this.importe + "</td>";
        row += "<td>" + this.fechaVenta + "</td>";
        row += "</tr>";
        return row;
    }
}

class Compra {
    constructor(cliente, vehiculo, importe, fechaCompra) {
        this.cliente = cliente;
        this.vehiculo = vehiculo;
        this.importe = importe;
        this.fechaCompra = fechaCompra;
    }

    toHtmlRow() { // Necesita acceso a las ventas
        let row = "<tr>";
        row += "<td>" + this.nif + "</td>";
        row += "<td>" + this.nombre + "</td>";
        row += "<td>" + this.apellidos + "</td>";
        row += "<td>" + this.telefono + "</td>";
        row += "<td>" + this.matricula + "</td>";
        row += "<td>" + this.marca + "</td>";
        row += "<td>" + this.modelo + "</td>";
        row += "<td>" + this.combustible + "</td>";
        row += "<td>" + this.importe + "</td>";
        row += "<td>" + this.fechaCompra + "</td>";
        row += "</tr>";
        return row;
    }
}

class Vehiculo {
    constructor(matricula, marca, modelo, combustible) {
        this.matricula = matricula;
        this.marca = marca;
        this.modelo = modelo;
        this.combustible = combustible;
    }

    toHtmlRow() {
        let row = "<tr>";
        row += "<td>" + this.matricula + "</td>";
        row += "<td>" + this.marca + "</td>";
        row += "<td>" + this.modelo + "</td>";
        row += "<td>" + this.combustible + "</td>";
        row += "</tr>";
        return row;
    }
}

class Turismo extends Vehiculo {
    constructor(matricula, marca, modelo, combustible, abs, descapotable, numPuertas) {
        super(matricula, marca, modelo, combustible);
        this.abs = abs;
        this.descapotable = descapotable;
        this.numPuertas = numPuertas;
    }

    toHtmlRow() {
        let row = "<tr>";
        row += "<td>" + this.matricula + "</td>";
        row += "<td>" + this.marca + "</td>";
        row += "<td>" + this.modelo + "</td>";
        row += "<td>" + this.combustible + "</td>";
        row += "<td>" + this.abs + "</td>";
        row += "<td>" + this.descapotable + "</td>";
        row += "<td>" + this.numPuertas + "</td>";
        row += "</tr>";
        return row;
    }
}

class V4x4 extends Vehiculo {
    constructor(matricula, marca, modelo, combustible, pendienteMax) {
        super(matricula, marca, modelo, combustible);
        this.pendienteMax = pendienteMax;
    }

    toHtmlRow() {
        let row = "<tr>";
        row += "<td>" + this.matricula + "</td>";
        row += "<td>" + this.marca + "</td>";
        row += "<td>" + this.modelo + "</td>";
        row += "<td>" + this.combustible + "</td>";
        row += "<td>" + this.pendienteMax + "</td>";
        row += "</tr>";
        return row;
    }
}

class QuintoCar {
    constructor() {
        this.clientes = [];
        this.ventas = [];
        this.compras = [];
        this.vehiculos = [];
    }

    altaCliente(cliente) {
        if (this.clientes.filter(clienteTemp => clienteTemp.nif == cliente.nif).length == 0) {
            this.clientes.push(cliente);
            return "Cliente dado de alta";
        }
        return "El cliente ya existe";
    }

    altaVehiculo(vehiculo) {
        if (this.vehiculos.filter(vehiculoTemp => vehiculoTemp.matricula == vehiculo.matricula).length == 0) {
                this.vehiculos.push(vehiculo);
                return "Vehiculo dado de alta";
        }
        return "El vehiculo ya existe";
    }

    buscarCliente(nif) {
        this.clientes.forEach(compara);

        function compara(cliente, index) {
            if (cliente.nif == nif) {
                return cliente;
            }
        }
    }

    buscarCompra(vehiculo) {
        let c;
        this.compras.forEach(compara);
        function compara(compra, index) {
            if (compra.vehiculo.matricula == vehiculo.matricula) {
               c = compra;
            }
        }
        return c;
    }

    buscarVenta(vehiculo) {
        let v;
        this.ventas.forEach(compara);
        function compara(venta, index) {
            if (venta.vehiculo.matricula == vehiculo.matricula) {
               v = venta;
            }
        }
        return v;
    }

    comprar(matricula, nif, importe, fecha) {
        return String;
    }

    vender(matricula, nif, importe, fecha) {
        return String;
    }

    listadoALaVenta() {

        let tabla = "<table class='table'><thead class='thead-dark'><tr><th scope='col'>Matricula</th><th scope='col'>Marca</th><th scope='col'>Modelo</th><th scope='col'>Combustible</th><th>ABS</th><th>Descapotable</th><th>Nº Puertas</th><th>Pendiente Máxima</th></tr></thead><tbody>";
        this.vehiculos.forEach( function(vehiculo) {
           tabla += "<tr><td scope='col'>"+vehiculo.matricula+"</td><td scope='col'>"+vehiculo.marca+"</td><td scope='col'>"+vehiculo.modelo+"</td><td scope='col'>"+vehiculo.combustible+"</td>";
           if(vehiculo instanceof Turismo)
           {
            tabla+="<td>"+(vehiculo.abs?"Sí":"No")+"</td><td>"+(vehiculo.descapotable?"Sí":"No")+"</td><td>"+vehiculo.numPuertas+"</td><td></td>";
           }
           else
           {
            tabla+="<td></td><td></td><td></td><td>"+vehiculo.pendienteMax+"</td>";
           }
        });
        tabla += "</tbody></table>";
        return tabla;
    }

    listadoVendidosperiodo(fechaInicio, fechaFin) {
        // Cabecera de la tabla
        let tabla = "<div class='table-responsive'><table class='table'><thead class='thead-dark'><tr><th scope='col'>Matricula</th><th scope='col'>Marca</th><th scope='col'>Modelo</th><th scope='col'>Combustible</th><th>ABS</th><th>Descapotable</th><th>Nº Puertas</th><th>Pendiente Máxima</th><th>Fecha Compra</th><th>Importe Venta</th><th>Importe Compra</th><th>Fecha Venta</th><th>Beneficio</th></tr></thead><tbody>";
        // Línea de cada venta
        this.ventas.forEach( (venta) => {
            let compraCoche = this.buscarCompra(venta.vehiculo); // Busca la compra del coche que se ha vendido
            if(venta.fechaVenta > fechaInicio && venta.fechaVenta < fechaFin){ // Comprueba si se vendió en el periodo dado
                tabla += "<tr><td>"+venta.vehiculo.matricula+"</td><td>"+venta.vehiculo.marca+"</td><td>"+venta.vehiculo.modelo+"</td><td>"+venta.vehiculo.combustible+"</td>"; // Añade los datos básicos de vehículo
                if(venta.vehiculo instanceof Turismo){ // Añade los datos específicos de su tipo
                    tabla+="<td>"+(venta.vehiculo.abs?"Sí":"No")+"</td><td>"+(venta.vehiculo.descapotable?"Sí":"No")+"</td><td>"+venta.vehiculo.numPuertas+"</td><td>-</td>";
                }
                else{ // Deja vacías las celdas que no son de su tipo
                    tabla+="<td></td><td></td><td></td><td>"+venta.vehiculo.pendienteMax+"</td>";
                }
                tabla+="<td>"+compraCoche.fechaCompra.toLocaleDateString()+"</td><td>"+venta.fechaVenta.toLocaleDateString()+"</td><td>"+compraCoche.importe+"</td><td>"+venta.importe+"</td><td>"+(venta.importe - compraCoche.importe)+"</td></tr>";
           }
        });
        tabla += "</tbody></table></div>";
        return tabla;
    }

    listadoComprasperiodo(fechaInicio, fechaFin) {
        return "listadoComprasperiodo";
    }

    listadoVehiculos() {
        return table;
    }

    listadoClientes() {
        this.clientes.sort(function(cliente,otroCliente)
        {
            if (cliente.apellidos > otroCliente.apellidos) {return 1;}
            if (cliente.apellidos < otroCliente.apellidos) {return -1;}
            return 0;
        });

        let tabla = "<table class='table'><thead class='thead-dark'><tr><th scope='col'>NIF</th><th scope='col'>Nombre</th><th scope='col'>Apellidos</th><th scope='col'>Teléfono</th></tr></thead><tbody>";
        this.clientes.forEach( function(cliente) {
            tabla+=cliente.toHtmlRow();
        });
        tabla += "</tbody></table>";
        return tabla;
    }
}
```[/spoiler]

Nedaim #2 Nov '19

Es porque las funciones de flecha tienen el mismo contexto que el lugar en el que se definen. Tu variable estaba declarada fuera de la declaración de la función y por tanto no existía en ella. Mirate esto:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/bind

Para que te hagas una idea te pongo un ejemplo:

(args)=>{[code]}

Es equivalente a:

(function (args){[code]}).bind(this)

No es algo intuitivo de entender e igual no lo he explicado de la mejor manera así que si tienes alguna duda pregunta.

1 1 respuesta

pantocreitor #3 Nov '19

#2 Voy a echar un ojo a ver si lo pillo, porque e estado buscando info pero cuando parece que lo tengo claro... NOPE xD

ReloaD1010 #4 Nov '19

Es normal que te líes porque en JS el tema de los objetos y closures tiene su gracia, y viendo las clases y tal como por ejemplo en Java pues es normal haber hecho suposiciones.
Como lo entendí yo en su momento es que cuando usas una arrow function, todo lo que tenías en this fuera lo pasabas al this dentro de la función. Es muy de ir por casa pero a partir de ahí pude seguir investigando.

Si tienes alguna duda concreta en alguna línea, pregunta.

Duda JS con funciones flecha

Usuarios habituales

Tags