2

Eu tenho uma função:

let comparaComThis = function (param) {
    console.log (this === param)
}

E tenho um objeto que chama essa função:

const obj2 = {  
    consta(){ 
        comparaComThis(obj2)
    }
}

A questão é que quando eu chamo a função do objeto, o this aponta para o global. Por quê?

0

2 Respostas 2

2

Segundo a documentação:

Inside a function (...) this will default to the global object.

Ou seja, o código abaixo (rodando em um browser) imprimirá "true":

function f() {
    // no browser, this é igual a window
    console.log(this == window);

    // no Node, this é igual ao objeto global
    //console.log(this == globalThis);
}

f();

E neste caso não importa onde a função é chamada, o this dela continua sendo o mesmo:

function f() {
    console.log('dentro de f =', this === window);
}

let obj = {
    chama_f() {
        console.log('dentro de obj.chama_f =', this === obj);
        f();
    }
};

obj.chama_f();

A saída deste código é:

dentro de obj.chama_f = true
dentro de f = true

Ou seja, dentro da função chama_f, o this é igual a obj, mas dentro da função f, o this continua sendo o window. Mesmo que f tenha sido chamada dentro de chama_f, não importa, o this dela não é afetado pelo this de quem a chamou.


É isso que está acontecendo no seu caso. Dentro da função consta, o this refere-se a obj2, mas dentro de comparaComThis, o this é o window.

let comparaComThis = function (param) {
    console.log('comparaComThis =', this === window);
}

const obj2 = {  
    consta(){
        console.log('consta =', this === obj2);
        comparaComThis(obj2);
    }
};
obj2.consta();

A saída do código acima é:

consta = true
comparaComThis = true

Se quer mudar o this que comparaComThis enxerga, uma alternativa é usar call (que é explicado em mais detalhes aqui):

let comparaComThis = function (param) {
    console.log('comparaComThis =', this === param);
}

const obj2 = {  
    consta(){
        // aqui o "this" é obj2, e com call() eu informo que também será o "this" da função comparaComThis
        console.log('consta =', this === obj2);
        comparaComThis.call(this, obj2);
    }
};
obj2.consta();

O primeiro argumento de call é o objeto que será visto como this dentro de comparaComThis. No caso, eu passei o this referente à função consta, que já vimos no exemplo anterior que é obj2. E do segundo argumento em diante é o que será passado para a função comparaComThis (no caso, eu passei obj2, ou seja, dentro da função, param será obj2).


Sim, é confuso. Mas é assim que o this funciona, cada hora ele pode ser uma coisa diferente...


E não diretamente relacionado, mas nesse caso você também poderia declarar a função como:

function comparaComThis(param) {
    etc...
}

Neste caso não há ganho nenhum em usar uma function expression, mas como é um exemplo simples, também não faz diferença. Mas há casos em que faz, saiba mais lendo aqui.

2
  • Mas nesse caso em específico, no meu,como não é Arrow, o this mesmo assim não muda pelo contexto de chamada?
    – Arthur
    Commented 20/08/2020 às 1:45
  • @Arthur Mas eu mostrei que o this muda. Dentro de consta, o this é igual a obj2, e dentro de comparaComThis, o this é o objeto global (window se rodar em um browser, globalThis se rodar no Node). Não entendi o que vc não entendeu :-)
    – hkotsubo
    Commented 20/08/2020 às 12:09
0

Este é o comportamento padrão da linguagem. O this se comporta diferente no js do que em outras linguagens.

Segue um bom link explicando as diferenças: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/this

1
  • Vi o link e não achei nenhum topico em que ele aborda o mesmo caso que o meu
    – Arthur
    Commented 19/08/2020 às 15:18

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 .