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 é).
.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çãosayHi
é "referenciado", e ele pode ser declarado depois, leia em: pt.stackoverflow.com/q/13364/3635 sobre funções.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.