0

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 .?

2
  • Como assim acessíveis fora do contexto?
    – bfavaretto
    Commented 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.
    – Sam
    Commented 11/07/2018 às 1:49

2 Respostas 2

2

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();

4
  • No segundo exemplo você está sobrescrevendo a função Guilherme com o objeto.
    – bfavaretto
    Commented 11/07/2018 às 2:29
  • @bfavaretto desculpe, sono, apaguei o prototype xD
    – Syzoth
    Commented 11/07/2018 às 2:31
  • 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.
    – bfavaretto
    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
1

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>

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 .