2

O this do carro2 não deveria apontar para o contexto no qual ele foi criado (no caso dentro de carro2)?

Segue um exemplo com o this de function normal e outro com arrow function:

    const carro = {
        modelo: 'Fiesta',
        fabricante: 'Ford',
        nomeCompleto: function(){ 
            return `${this.fabricante} ${this.modelo}`
        } } 

        console.log(carro.nomeCompleto()) // Imprime normalmente
    
    
    const carro2 = {
        modelo: 'Fiesta',
        fabricante: 'Ford',
        nomeCompleto: () => {
            return `${this.fabricante} ${this.modelo}`
        } }
    
    console.log(carro2.nomeCompleto()) // Imprime Undefined

1 Resposta 1

3

Segundo este trecho da documentação:

When a function is called as a method of an object, its this is set to the object the method is called on.

Em tradução livre:

Quando uma função é chamada como um método de um objeto, o this desta é setado para o objeto no qual o método é chamado.

Por isso que o primeiro caso funciona, pois dentro da função nomeCompleto, o this refere-se ao objeto carro:

const carro = {
    modelo: 'Fiesta',
    fabricante: 'Ford',
    nomeCompleto: function () {
        console.log(this === carro); // true
        return `${this.fabricante} ${this.modelo}`;
    }
};

console.log(carro.nomeCompleto()); // Ford Fiesta


Já para o segundo caso, a documentação sobre arrow functions diz claramente que elas não são adequadas para serem usadas como métodos ("Arrow function expressions are ill suited as methods"), justamente por não setarem o this para o objeto no qual elas estão, e neste trecho há um exemplo explicando que o this não é setado para o objeto.

Para entendermos melhor, considere o objeto abaixo:

const obj = {
    valor: this
}

console.log(obj.valor == globalThis); // true

Dentro do objeto obj, o this é o objeto global. E como uma arrow function não tem o seu próprio this e usa o this do escopo no qual ela está, então uma arrow function dentro deste objeto usará o objeto global como this. E é isso que acontece no segundo caso:

const carro2 = { // não cria um novo escopo, this é o objeto global
    modelo: 'Fiesta',
    fabricante: 'Ford',
    nomeCompleto: () => { // aqui o this é o objeto global
        console.log(this == globalThis); // true
        return `${this.fabricante} ${this.modelo}`;
    }
};

console.log(carro2.nomeCompleto()); // undefined

Ou seja, você está tentando acessar as propriedades fabricante e modelo do objeto global, e como elas não foram definidas, o resultado é undefined.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .