5

Dando uma olhada em um tutorial sobre JavaScript me deparei com o seguinte trecho de código:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user.f = sayHi;  // dúvida
user.f();  // retorna Hello John

Percebi que se retirar o f da associação da função ao user me é retornado Hello e o this.name é retornado como um id ou hash ou alguma coisa do tipo aleatoriamente:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user = sayHi;
user();  // retorna Hello ...

Então as minhas dúvidas são as seguintes:

  • o que seria este f
  • como ele associa o objeto a função
  • o que seria os valores aleatórios quando não utilizo o f
5
  • 1
    .f poderia ser qualquer coisa (ter qualquer valor), é basicamente o mesmo que fazer isto: let user = { name: "John", f: sayHi };, mas no caso .f = você está setando a propriedade posteriormente. Note que o uso da função sayHi é "referenciado", e ele pode ser declarado depois, leia em: pt.stackoverflow.com/q/13364/3635 sobre funções.
    – Syzoth
    Commented 13/11/2019 às 14:10
  • ps: Vale lembrar que se passar um objeto por um parâmetro poderá alterar o valor das propriedades em referencia, atualizando o objeto setado no parâmetro, mas isto é outra história.
    – Syzoth
    Commented 13/11/2019 às 14:15
  • Blza @GuilhermeNascimento entendido. Valeu man!
    – LeAndrade
    Commented 13/11/2019 às 14:20
  • Parece ser um atributo criado que representaria um novo método: funcao (f) tipo: obj.func = function() { ...}. Só uma obs: se você tiver várias instâncias do mesmo objeto, melhor colocar no prototype. Senão cada objeto terá sua própria cópia do método, geralmente é um desperdício de recurso. Commented 13/11/2019 às 15:16
  • @IvanFerrer certo, no tutorial é abordado sobre isto também.
    – LeAndrade
    Commented 13/11/2019 às 16:37

2 Respostas 2

8

1°: o que seria este f?

Nesse exemplo:

let user = {
  name: "John"
};

function sayHi() {
  console.log(`Hello ${this.name}`);
}

user.f = sayHi;  // dúvida
user.f();  // retorna Hello John

Ao fazer user.f = sayHi, você diz pro Javascript: atualiza pra mim a propriedade f que está dentro do objeto user, caso não haja essa propriedade, crie essa propriedade f e atribua à ela o valor sayHi, que nesse caso seria uma função. Por isso ao user user.f(), ele retorna "Hello".

2°: como ele associa o objeto a função?

Está na resposta acima, ele cria essa nova propriedade f e associa a essa propriedade, a função sayHi, no primeiro exemplo. No segundo exemplo, ele sobrescreve a variável user com o valor da função sayHi.

3°: o que seria os valores aleatórios quando não utilizo o f?

Nesse caso você associou ao user, a uma "refêrencia da memória" do sayHi, os caracteres aleatórios seriam por causa do this.name, que nesse caso não não tem mais referencia, seria um "lixo"*, porque não existe mais a propriedade name no user.

*UPDATE: O @bfavaretto explicou o que seria o "hash" ou "lixo":

O que vocês estão chamando de lixo ou hash é na verdade o name de um elemento HTML (iframe) usado no preview de código aqui . Se isso for executado numa janela normal vai vir undefined. Porque quando você executa uma função fora do contexto de objeto, this dentro dela aponta para a janela.

10
  • Boa resposta man, vou aceitar a do Maniero por uma questão cronológica, ele respondeu um pouco antes, mas, as duas explicam muito bem. Valeu!
    – LeAndrade
    Commented 13/11/2019 às 14:22
  • Na verdade a minha foi antes hahah mas de boas, o importante é que te ajudou! Commented 13/11/2019 às 14:23
  • Kkkk verdade man, agora que vi ;)
    – LeAndrade
    Commented 13/11/2019 às 14:23
  • 1
    Isto ele cria uma nova propriedade e associa a essa propriedade deveria ser ele cria uma nova propriedade e associa a essa função? Isto está confuso nesse caso você teria a função sayHi(), ele teria a função ou teria o valor retornando por um possivel return? Afinal ele está já "executando"
    – Syzoth
    Commented 13/11/2019 às 14:32
  • 2
    O que vocês estão chamando de lixo ou hash é na verdade o name de um elemento HTML (iframe) usado no preview de código aqui . Se isso for executado numa janela normal vai vir undefined. Porque quando você executa uma função fora do contexto de objeto, this dentro dela aponta para a janela.
    – bfavaretto
    Commented 13/11/2019 às 15:39
5

o que seria este f

Um membro de um objeto criado neste momento, como qualquer outro sem nada especial. Ou se preferir é um elemento de um array associativo que se passa como objeto, que é o que são objetos em JS. Ele é só uma variável normal dentro de um objeto/array, não existe uma característica que o difira de outras coisas, não tem nada mágico nele, é igual ao name só que em name você guardou uma string e em f guardou uma função (sim, você pode guardar funções em variáveis). veja mais em Qual a diferença entre as funções var name = function() e function name()?.

como ele associa o objeto a função

A atribuição que está fazendo nesse membro do objeto está fazendo essa associação, está pegando o nome da função (sem parenteses que chamaria a função) e este nome é uma referência para a função efetiva, e está guardando na variável f que pertence a user.

o que seria os valores aleatórios quando não utilizo o f

Aí no segundo exemplo aconteceu outra coisa, você redefiniu o objeto user completamente e não tem mais o que tinha, ou seja, nem tem o campo name, agora user só tem a referência para a função sayHi e mais nada. Quando chama ele com user() está mandando imprimir um elemento que não existe, ou seja this.name não existe mais, então pega um valor lixo na memória (no sentido de algo que está lá mas não deveria, na minha opinião). Eu acho que não deveria acontecer esse comportamento, mas é JS, sabe como é.

Isto ocorre porque ali tem uma closure, mas no caso não tem um valor associado com aquela variável, mas JS tenta sempre dar algum resultado, então ele considera que deve ter algo ali, de fato segundo o comentário do bfavaretto ele acha esse nome no elemento iframe que fica exposto (na minha opinião já exposta, indevidamente, mas é assim que o JS é).

5
  • Valeu Maniero, mais uma vez!
    – LeAndrade
    Commented 13/11/2019 às 14:24
  • 3
    Não é lixo, JS nunca expõe memória (seria grave se fizesse isso). Ver pt.stackoverflow.com/questions/421218/…
    – bfavaretto
    Commented 13/11/2019 às 15:39
  • @bfavaretto dei uma editada, não quis dizer no mesmo sentido do do lixo de C, apenas algo que não deveria estar disponível, editei, veja se ficou mais claro.
    – Maniero
    Commented 13/11/2019 às 15:50
  • 1
    Entendi, realmente eu achei que estava falando do lixo "clássico" :) Ficou melhor com o edit. Aproveitando o relaxamento de conceitos, tem um certo comportamento indefinido nessas referências a this fora de contextos em que ele faça sentido. No strict mode isso não ocorre, this vira null em vez de apontar pro objeto global.
    – bfavaretto
    Commented 13/11/2019 às 15:54
  • Bom saber, ainda não gosto do null, mas já é melhor
    – Maniero
    Commented 13/11/2019 às 16:09

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 .