12

Eu percebi que no jQuery, os parâmetros muitas vezes podem ser passados ou omitidos, e, independente da ordem, eles funcionando como esperado.

O que quero dizer é o seguinte. Veja os seguintes códigos abaixo:

 $('#x').fadeOut(function(){ alert('complete') }); 
 $('#x').fadeOut(400, function(){ alert('complete') });
 $('#x').fadeOut(400);

Perceba que o primeiro exemplo, a função fadeOut, recebe uma closure como primeiro argumento. A segunda, recebe um Number no primeiro argumento e uma closure, no segundo. A Terceira recebe um Number.

Perceba que os três casos funciona normalmente.

Mas se uma função é declarada para aceitar um determinado valor no primeiro parâmetro, como é que o jQuery consegue "modificar isso" em tempo de execução?

Como eu poderia a mesma operação numa função que eu criei?

Exemplo:

function sum_with_callback(intA, intB, closure)
{
    // Faz a mágica aqui
}

Quero que seja possível fazer assim:

sum_with_callback(1, 2, function (){});

sum_with_callback(1, function(){}); // Quero que o intB seja 0, sem passá-lo

sum_with_callback(1, 2); // Sem o callback, a função tem que funcionar
1

4 Respostas 4

12

Você não precisa nomear nenhum parâmetro da função. Quando ela é invocada, todos os argumentos recebidos ficam disponíveis no objeto arguments. Você pode examinar o que tem lá e tratar da maneira que for mais conveniente.

Um exemplo simples que parece atender aos seus requisitos, com suporte a dois ou mais argumentos:

function f() {
    // não faz nada se não tiver recebido 2+ argumentos (opcional)
    if(arguments.length < 2) return;

    // converte arguments em array (mais versátil)
    var args = Array.prototype.slice.call(arguments);

    // só verificando o que recebemos
    console.log('f recebeu ' + args);

    // chegou uma função no fim? 
    // usa o pop para tirar essa função de args;
    // se não, cria callback vazio (dá pra melhorar isso)
    var callback = typeof args[args.length-1] == 'function' ? args.pop() : function(){};
 
    // chama a função com o restante dos argumentos
    callback.apply(null, args);
}

// Testando
f(1, 2, 3, function(){
    console.log(arguments);
}); 

f(1, function(){
    console.log(arguments);
}); 

f(1, 2);

Eu acho essa uma maneira elegante de tratar esses casos. Você não nomeia nenhum argumento da função, apenas verifica se o último é um callback, e age de acordo com o que recebeu. Se o último for um callback, executa esse callback, repassando a ele os demais argumentos recebidos (o apply faz isso, executando a função com N argumentos passados como array).

4
  • Olá, como já eu disse, o JS não é o meu forte. No caso de receber 0, ou 1 argumento esta função funciona ? Ou funciona apenas com 2 ou mais argumentos ?
    – Edilson
    Commented 21/10/2015 às 1:40
  • A única coisa que limita a 2+ argumentos é a primeira linha. Se você retirar, funciona para qualquer quantidade. Eu restringi a 2+ porque a pergunta parecia pedir isso.
    – bfavaretto
    Commented 21/10/2015 às 2:06
  • +1 muito inteligente a codificação interna Commented 21/10/2015 às 10:47
  • +1, fiz um teste agora, e é realmente prática. Desconhecia o objecto arguments no js, aliás conhecia, mas ignorei o seu uso, talvez por não andar a explorar a àrea, vi este exemplo que acabaste de escrever, e também o original na página do firefox, assim consegui entender melhor, vou agora tentar reescrever a função acima usando o objecto arguments e os outros métodos.
    – Edilson
    Commented 21/10/2015 às 11:25
11

"Antes de mais, obrigado pelo exercício mental".

A princípio foi complicado, por causa da lógica, uma vez que tinha que definir para false sempre que assinava um novo valor, ou mesmo se deixasse parâmetros à falta.

No final obtive isto aqui:

<script>
function bar(){
    //foo(4); // 4
    //foo(4, 4) // 8
    //foo(4, function(soma){alert(soma);}) // alert(4)
    foo(4, 4, function(soma){alert(soma);}) // alert(8)
}

function foo(argA, argB, callback){
    var soma;
    var argA = (typeof argA !== 'undefined') ? argA : 0;
    var argB = (typeof argB !== 'undefined') ? argB : 0;
    var callback = (typeof callback !== 'undefined') ? callback : false;

    if(argA && argB && callback === false){
       if(typeof argB === "function"){
          callback = argB;
          soma = argA;
       } else {
          soma = argA + argB;
       }
    } else if(argA && argB && callback) {
      soma = argA + argB;
    } else {
      soma = argA;
    }


    if(callback && typeof callback === "function"){
        return callback(soma);
    } else {
        return soma;
    }
}
</script>

A função foo no caso, é a função responsável pela soma, sendo:

foo(arg1,[arg2],[callback]) { // magia }

Ao criar funções deste tipo, deves ter em conta que as funções javascript:

  • Não especificam o tipo de dado para os argumentos.
  • Não verificam quais tipos de argumentos foram passados.
  • Não verificam número de argumentos recebidos.

Predefinição dos não assinados:

  • Se a função é chamada com menos argumentos do que os declarados, os elementos em falta são definidos para : undefined.

O primeiro parâmetro é obrigatório, ou a função falha, neste exemplo eu não criei condições para o caso de o primeiro parâmetro não ter sido fornecido, por isso em vez de retornar false caso nenhum parâmetro seja fornecido, a função vai retornar 0 como valor da soma.

O JS não é o meu forte, contudo, acho que a função está bem reduzida e a lógica está correta.

Exemplo de uso:

function bar(){
    //foo(4); // 4
    //foo(4, 4) // 8
    //foo(4, function(soma){alert(soma);}) // alert(4)
    foo(4, 4, function(soma){alert(soma);}) // alert(8)
}

function foo(argA, argB, callback){
    var soma;
    var div = document.getElementById('demo');
    var argA = (typeof argA !== 'undefined') ? argA : 0;
    var argB = (typeof argB !== 'undefined') ? argB : 0;
    var callback = (typeof callback !== 'undefined') ? callback : false;

    if(argA && argB && callback === false){
       if(typeof argB === "function"){
          callback = argB;
          soma = argA;
       } else {
          soma = argA + argB;
       }
    } else if(argA && argB && callback) {
      soma = argA + argB;
    } else {
      soma = argA;
    }
    
    
    if(callback && typeof callback === "function"){
    	return callback(soma);
    } else {
        //return soma;
        div.innerHTML = soma;
    }
}
<body>

<button id="bt" onclick="bar();">Clica-me</button>   

<p id="demo"></p>

</body>

Abaixo a mesma função, com a mesma finalidade, usando o objecto arguments para passar os parâmetros, como o exemplo do @bfavarreto, ou ainda como o @Guilherme Lautert sugeriu, dinamizar também a ordem das funções:

Utilizando o método sort(), pode-se criar o mesmo efeito, colocando a função sempre na última posição, fazendo com que a função tenha o seu curso normal.

<script>
  function foo(){
  	var div = document.getElementById('sum');
  	div.innerHTML = soma(2,3,4,3); // Retorna: 8
  	//return soma(2,2,function(i){alert(i);}); // Retorna: alert(4)
  	//return soma(); // Retorna: 0
        //return soma(1,function(i){alert(i);},5); // Retorna: alert(6)
  	//return soma(1,5, function(i){alert(i);}); // Retorna: alert(6)
  }

  function soma(){
  	var array = Array.prototype.slice.call(arguments);
  	var len = arguments.length;
  	//console.log(array.length); // Retorno: (int)N argumentos contando com o callback;
        var array = array.sort(); // utilizando o método sort() a função vai estar sempre na última posicao
  	var callback = typeof array[len-1] == 'function' ? array.pop() : false;
  	var Newlen = array.length;
  	var soma = 0;
  	// Somar os valores
  	for(i=0; i<Newlen;++i){
  		soma += Number(array[i]);
  	}
  	//console.log(array.length); // Retorno: (int)N argumentos sem o callback;
  	
    //Controlar o retorno
  	if(callback){
  		// Com callback
  		return callback(soma);
  	} else {
  		// Sem callback
  		return soma;
  	}
  	
  }
  </script>
<body>
  <div id="sum"></div>
  <button onclick="foo();">Somar</button>
 </body>

O objecto arguments é semelhante a uma array, mas não é uma array, a única propriedade de array que possui é o tamanho (length). Utilizando o método slice nele, impede otimizações em motores Javascript. Recomenda-se criar uma array iterando o objecto arguments.

7

Isso é chamado de function overloading.

Estritamente, não existe overloading em JavaScript já que é permitido passar qualquer número de parâmetros de qualquer tipo para as funções. Mas isso é frequentemente simulado verificando quantos tipos de argumentos foram passados e de que tipo eles são. A implementação depende das type signatures desejada.

A função que você deu de exemplo seria mais ou menos assim:

function sum_with_callback(intA, intB, closure) {

    if (typeof intB != 'number')
        if (typeof intB == 'function')
            closure = intB;
        intB = 0; // "argumento padrão";

    var resultado = intA + intB;

    if (typeof closure != 'undefined')
        // executa o callback se ele tiver sido passado
        return closure(resultado);

    return resultado;
}

A função fica, portanto, com duas signatures:

sum_with_callback(intA [, intB] [, closure])
sum_with_callback(intA [, closure])
3

Apenas adicionando um exemplo mais complexo a resposta do @bfavaretto.

function f(){

    var n = null; // name
    var t = null; // timer
    var c = null; // function

    for (var i = 0; i < arguments.length; i++){
        if(n == null && typeof(arguments[i]) == 'string'){
            n = arguments[i];
        }

        if(t == null && typeof(arguments[i]) == 'number'){
            t = arguments[i];
        }

        if(c == null && typeof(arguments[i]) == 'function'){
            c = arguments[i];
        }
    }

    t = (t == null) ? 1000 : t;
    n = (n == null) ? 'default' : n;
    c = (c == null) ? function(){ alert('callback Default')} : c;

    setTimeout(function(){
        alert(n);
        c();
    }, t);
}

f();
f('Guilherme', 2000, function(){ alert('callback1')});
f(function(){ alert('callback2')}, 'Guilherme', 4000);
f(6000, function(){ alert('callback3')}, 'Guilherme');
5
  • A resposta do @bfavaretto, diz praticamente que se pode assinar n argumentos, não importando quantos sejam, desde que tenham um callback no final, usando o objecto arguments, o que tens aí é outra coisa. Daqui a pouco edito a minha resposta e adiciono um exemplo baseado no arguments, para que possas ver.
    – Edilson
    Commented 21/10/2015 às 14:11
  • Sim, na dele se tem n argumentos, a que coloquei aceita n argumentos, contudo eles podem estar desordenados e apenas os 1 de cada tipo é atribuído a sua respectiva função. Commented 21/10/2015 às 14:15
  • +1, Qual é a utilidade desta ? Criar efeitos ?
    – Edilson
    Commented 21/10/2015 às 15:10
  • Na verdade neste exemplo eu só quis demonstrar como se pegar elementos desordenados e que geram o mesmo efeito. Esta função por si só não tem efeito, contudo se quiser posso alterar com usa similar que tenha algum proposito. Commented 21/10/2015 às 15:16
  • No, eu sei como ela funciona, obrigado na mesma.
    – Edilson
    Commented 21/10/2015 às 15:21

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 .