6

Quería saber el motivo por el cual me da el error de que no puede leer la propiedad this.marca . Os pongo el ejemplo:

(function (){

    'use strict';

    var coche = {
        marca: "Audi",
        descripcion: function() {
            return "El coche con marca " + this.marca + " es alemán"; 
        }
    };

    var y = coche.descripcion;
    console.log(y())

})();

Aún guardando el método en una variable y después ejecutándolo con y() ¿no debería sacar el valor de this.marca o cómo se ejecuta más tarde ya no puede acceder a esa propiedad?

5 respuestas 5

5

Deberías de utilizar el nombre del objeto, es decir coche.marca

Tu ejemplo modificado:

(function (){

    'use strict';

    var coche = {
        marca: "Audi",
        descripcion: function() {
            return "El coche con marca " + coche.marca + " es alemán"; 
        }
    };

    var y = coche.descripcion;
    console.log(y())

})();

EXPLICACIÓN

La diferencia principal y que es la que te causa el error es que la siguiente sentencia

var y = coche.descripcion;

devuelve la definición de la función y, al ponerle los paréntesis, la evalúa.

Es una gran diferencia ya que la primera opción, al guardarla en una variable e ir a evaluarla después, como es simplemente la definición de la función, no podrá obtener el valor de this ya que no haces referencia a nada, por lo que obtienes undefined.

En cambio, si la evalúas directamente (segunda opción, con paréntesis), al estar evaluándola directamente en el objeto, puedes acceder al propio objeto mediante la palabra reservada this.

Esto se ve claramente con un ejemplo:

(function (){

    'use strict';

    var coche = {
        marca: "Audi",
        descripcion: function() {
            return "El coche con marca " + this.marca + " es alemán"; 
        }
    };

    console.log(" <-- Probamos con paréntesis -->");
    var z = coche.descripcion();
    console.log(" Tipo de variable: " + typeof(z));
    console.log(" ~~ Valor de la variable ~~ ");
    console.log(z);
    console.log(" ~~ Resultado ~~ ");
    console.log(z);
    console.log("--------------------------------");
    
    console.log(" <-- Probamos sin paréntesis -->");
    var y = coche.descripcion;
    console.log(" Tipo de variable: " + typeof(y));
    console.log(" ~~ Valor de la variable ~~ ");
    console.log(y);
    console.log(" ~~ Resultado ~~ ");
    console.log(y());
})();

En el caso de mi respuesta, al hacer referencia a coche.marca, es decir, directamente al nombre del objeto coche, no tenemos el problema que se da en el caso de this.marca. Esto se debe a que hacemos referencia a un objeto que si que existe y que hemos creado previamente, por lo que, a pesar de no haber indicado los paréntesis, al ir a evaluar la función guardada en la variable, si que sabe referenciar a coche y por tanto obtener su propiedad marca.

4
  • Gracias por la respuesta! También me gustaría saber porque yo no puedo acceder o porque me da error haciendo: var y = coche.descripcion; console.log(y())
    – rubotero
    el 14 mar. 2018 a las 20:58
  • @rubotero El problema es que no puedes hacer referencia a this dentro de un bloque de código, si no de una función. Entonces es por eso por lo que no te deja acceder a this.marca tal y como lo estás realizando. Lo que hace Shadow es añadirle los paréntesis para que tome coche.descripcion como que estás haciendo referencia a la función y entonces poder acceder a this. En mi caso lo que he hecho ha sido acceder al propio objeto directamente. el 14 mar. 2018 a las 21:23
  • Es decir, que la variable 'y' al llamar a una función y más tarde ejecutándola no reconoce el comando 'this' porque es un bloque de código y no una función del objeto. ¿Es así? Espero haber entendido bien la respuesta :)
    – rubotero
    el 14 mar. 2018 a las 22:30
  • @rubotero He añadido una explicación en mi respuesta que espero que te sea de ayuda. He añadido también un pequeño ejemplo con el que creo que queda más claro. el 15 mar. 2018 a las 19:46
4

Saludos el detalle es que dentro del objeto coche intentas acceder a una propiedad que como valor tiene un método entonces cuando asignas ese acceso a una variable lo tienes que declarar como método es decir con paréntesis; del modo siguieente es totalmente funcional saludos

(function (){
    
        'use strict';
    
        var coche = {
            marca: "Audi",
            descripcion: function() {
                return "El coche con marca " + this.marca + " es alemán"; 
            }
        };
    
        var y = coche.descripcion()
        console.log(y)
    
    })();

2
  • Gracias por la respuesta! También me gustaría saber porque yo no puedo acceder o porque me da error haciendo: var y = coche.descripcion; console.log(y())
    – rubotero
    el 14 mar. 2018 a las 20:57
  • bueno mi respuesta proxima es por que en vez de acceder al valor de este modo coche.marca lo haces con this.marca y el alcance de this se queda dentro de la función por lo cual cuando lo mandas llamar fuera de, marca un error por que no sabe a que hace referencia
    – user75901
    el 14 mar. 2018 a las 21:14
2

Otra opción es 'bindear coche'. Cuando quieres hacer uso de this.marca, busca esa variable en el contexto global, con bind le cambias el contexto y ahora lo busca dentro del objeto coche

(function (){

    'use strict';

    var coche = {
        marca: "Audi",
        descripcion: function() {
            return "El coche con marca " + this.marca + " es alemán"; 
        }
    };

    var y = coche.descripcion.bind(coche);
    console.log(y())

})();
1

He encontrado la solución a mi respuesta. Exactamente el motivo de porqué daba error es debido a qué si accedo a la propiedad del objeto sin () me devolverá la definición de la función. Es decir:

<script>
 var person = {
     firstName: "John",
     lastName : "Doe",
     id       : 5566,
     fullName : function() {
        return this.firstName + " " + this.lastName;
     }
 };

 document.getElementById("demo").innerHTML = person.fullName;
</script>

y el resultado que da esto es:

function () { return this.firstName + " " + this.lastName; }

Por lo tanto al devolver la función y ejecutarla más tarde no tendrá acceso a la variable 'this'

Dejo el enlace de donde lo he encontrado

http://www.w3im.com/es/js/js_objects.html

0

Como realizas el llamado de tu variable en la misma función, sólo tienes que acceder al valor de la variable, por ejemplo:

return "El coche con marca " + coche.marca + " es alemán";

... this hace referencia al objeto global (fuera de cualquier función), por ejemplo:

var coche_global = {marca: "Audi"};

    (function (){
    var coche = {
        /*marca: "Audi",*/
        descripcion: function() {
            return "El coche con marca " + this.coche_global.marca + " es alemán"; 
        }
    };

    var y = coche.descripcion;
    console.log(y())

    })();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.