Estava observando que o $
do jQuery é uma função, mas se eu fizer $.
eu consigo acessar varias outras funções, que são atributos da função $
. Como é possível uma funcão ter atributos que são acessíveis fora do contexto através do .
?
-
Como assim acessíveis fora do contexto?– bfavarettoCommented 10/07/2018 às 23:00
-
Acho que você devia era analisar as suas outras perguntas que possuem respostas e nenhuma foi marcada como resolvida.– SamCommented 11/07/2018 às 1:49
2 Respostas
Se fizer isso já vai funcionar:
function Guilherme() {
console.log('Chamou o Foo');
}
Guilherme.falar = function (msg) {
console.log('Guilherme diz:', msg);
};
Guilherme();
Guilherme.falar('olá mundo');
Guilherme.falar('Tchau!');
Isto ocorre porque quando você usa a expressão function
o JavaScript cria um objeto, em JavaScript é praticamente tudo acessivel como objeto (depois vou melhorar essa parte da explicação).
Você também pode criar um objeto simples com prototype
seria como classes em outras linguagens (não vou falar de ES6 agora porque vai fugir da intenção da pergunta), por exemplo um exemplo de um "jQuery proprio seu", assim:
(function () {
function $(seletor) {
//Checa se é um objeto
if (this instanceof $) {
this.elementos = document.querySelectorAll(seletor);
this.length = this.elementos.length;
} else {
//Se chamar `new $` vai direto, se chamar $() então a propria função instancia o objeto e retorna ele
return new $(seletor);
}
}
$.prototype = {
"length": 0,
"html": function () {
if (this.length) return this.elementos[0].innerHTML;
},
"text": function () {
if (this.length) return this.elementos[0].textContent;
}
};
window.$ = $;
})();
console.log("html retornado:", $("#test").html() );
console.log("texto retornado:", $("#test").text() );
<div id="test">
Olá mundo <b>novo</b>!
</div>
Se você quer "estender" tipos de objetos existentes, como String
ou Number
, você pode usar .prototype
, assim terá acesso ao this
e poderá pegar o valor:
String.prototype.foobar = function () {
console.log('String.foobar pegou:', this);
};
Number.prototype.foobar = function () {
console.log('Number.foobar pegou:', this);
};
var testestr = "exemplo de string";
var testenum = 2018;
testestr.foobar();
testenum.foobar();
-
No segundo exemplo você está sobrescrevendo a função
Guilherme
com o objeto. Commented 11/07/2018 às 2:29 -
-
Melhor ir dormir e rever amanhã rs. <strike>Porque esse segundo bloco continua com problema, os métodos do prototype só seriam acessíveis por instâncias geradas pelo uso como construtor.</strike> A pergunta é complicada, dá margem a muitos temas relacionados mas diferentes, melhor burilar sua resposta com calma depois. Commented 11/07/2018 às 2:36
-
1@bfavaretto exato, hehehe, com certeza estou confuso, vou remover e no futuro vejo de onde tirei isso :) obrigado!– Syzoth ♦Commented 11/07/2018 às 2:37
Em JavaScript as funções têm semelhanças a objetos. A palavra "atributos" não é correta aqui, mas sim "propriedades", e portanto as funções podem ter propriedades que no caso de elas serem funções se chamam "métodos".
Assim podes criar uma função com o nome que quiseres, incluíndo com o nome de $
como o jQuery fez. Depois podes juntar propriedades ou métodos a essa função específica (a essa instância específica) ou ao protótipo de uma função, o que faz com que esses métodos e propriedades fiquem disponíveis em todas as funções desse protótipo.
Repara no exemplo onde crio duas funções, e maneiras diferentes de lhes adicionar propriedades e como adicionar propriedades "globalmente" a todas as funções
// declaração da função
function $_$(seletor) {
return [...document.querySelectorAll(seletor)];
}
// declaração de outra função
function qqCoisa() {
return 'Qualquer coisa...';
}
// adicionar uma propriedade à instância
$_$.descricao = 'Uma função minha...';
console.log($_$.descricao); // Uma função minha...
console.log(qqCoisa.descricao); // "undefined" - nada, esta função não tem esta propriedade
Function.prototype.metodoGlobal = function() {
return 'Eu sou global...';
}
console.log($_$.metodoGlobal()); // Eu sou global...
console.log(qqCoisa.metodoGlobal()); // Eu sou global...
O que acontece no jQuery é que se cria uma instância única, mais específica, que recebe uma série de métodos. E para poderes ter o contexto interno (usar o this
e dar-lhe valores que só afetam essa instância) tens de usar o construtor de funções new
.
Exemplo:
const $_$ = (function() {
// defenição da função principal que retorna a instância para se poder usar outros métodos encadeados
function $_$_proto(seletor) {
this.conteudo = [...document.querySelectorAll(seletor)];
return this;
}
// um método adicionado ao protótipo para que todas as intâncias venham com ele
$_$_proto.prototype.buscarTags = function() {
return this.conteudo.map(el => el.tagName.toLowerCase());
}
// a função "fábrica" que retorna uma nova instância (com o seu "this" único) para se poder consumir
return function(seletor) {
return new $_$_proto(seletor);
}
})();
console.log($_$('.teste').buscarTags()); // ["div", "p"]
<div class="teste">Uma div</div>
<p class="teste">Um p</p>