How to pass parameters in function calls by reference in Javascript?

Question

I recently asked the question Why should we use Anonymous functions with jQuery instead of the function directly? and along with the accepted answer came a second question: How to pass arguments to a JS function that we are invoking by reference?

What would the call to $("a").on("click", retornaNada); if this function received simple parameters as a number or more complex as an object itself?

Answer 1

It was thinking about this situation that was added between the parameters of .on the possibility to pass arbitrary data to the Handler. Any object passed as a parameter just before the Handler will be available within it through event.data. Example:

function retornaNada(evento) {
    var data = evento.data;
    console.log(data.foo); // Imprime "bar"
}

$("a").on("click", { foo:"bar" }, retornaNada);

Several other jQuery methods accept this parameter data. In the case of "on", the general form (according to the documentation) is:

.on( events [, selector ] [, data ], Handler(eventObject) )

If this is not enough for you (e.g., you already have a function ready, and want to use it without modification as Handler event), then it is necessary to transform it through the operation of currying. There are several ways to do this:

1. currying "manual":

   $("a").on("click", function(e) { retornaNada(10); });
   

2. jQuery.proxy:

   $("a").on("click", jQuery.proxy(retornaNada, meuThis, 10));
   

3. Function that returns function:

   function tranforma(parametro) {
       return function(evento) {
           retornaNada(parametro);
       }
   }
   
   $("a").on("click", transforma(10));
   

   or more generic:

   function tranforma(fn, meuThis, parametro) {
       return function(evento) {
           fn.call(meuThis, parametro);
       }
   }
   
   $("a").on("click", transforma(retornaNada, meuThis, 10));
   

   or even more generic (reaching a point that is almost identical to the jQuery.proxy):

   function tranforma(fn, meuThis) {
       var args = Array.prototype.slice.call(arguments, 2, arguments.length);
       return function(evento) {
           fn.apply(meuThis, args);
       }
   }
   
   $("a").on("click", transforma(retornaNada, meuThis, 10));
   

---

Update: on the use of this

Both in the case of jQuery.proxy how much in my job transforma (in the most generic forms), a parameter meuThis is expected. This is because every function invocation in Javascript expects a Binding for the keyword this, even when the function is not being called in the content of an object (i.e. it is not a method). Example:

console.log(this); // Vai imprimir o "objeto global" (no caso de um browser, "window")

function a() {
    console.log(this);
}
a(); // também imprime o objeto global

var obj = { x:a };
obj.x(); // Vai imprimir "obj"

obj.criaLinks = function() {
    $("a").on("click", jQuery.proxy(retornaNada, this, 10));
    // Como se fosse: obj.retornaNada(10)

    $("a").on("click", jQuery.proxy(retornaNada, window, 10));
    // Como se fosse: window.retornaNada(10)

    $("a").on("click", jQuery.proxy(retornaNada, { foo:"bar" }, 10));
    // Como se fosse: { foo:"bar" }.retornaNada(10)
};
obj.criaLinks();

Answer 2

What you can use here is the jQuery.proxy():

$('div').on('click', $.proxy( minhaFuncao, this, 'minha variavel1', 'minha variavel2' ));

function minhaFuncao(a, b) {
    console.log(a, b);
}

Example

So you can pass parameters into the function, keeping the reference to the function.

This method allows passing the referenced function, allows changing the scope of the this and allows you to pass more arguments into the function.

Answer 3

There is no reference passage in Javascript, but you can encapsulate this in an object (which is always passed by reference, since only the object pointer is passed in reality).

Ex.:

function teste(argumento)
{
    argumento.valor = 10;
}

var o = { valor = 11 };

teste(o);
o.valor == 10; // true

As there is only one object in memory, the changes in memory are global.

Answer 4

Your previous question answers that:

$("a").on("click", function() { retornaNada(param); });

I have a question, some jQuery methods expect a function like parameter, but to work they must receive an Inner Function as parameter instead of a function directly, as in the example below:

$("a"). on("click", Function() { returnNada(); }); instead of

$("a"). on("click", returned());

Answer 5

From what I understand you want to pass parameters to the function retornaNada as it passes it as jQuery function parameter on...

As far as I know there is no way to do this within good practice, but you could create a function that receives another as parameter and return a new function with the actual call within the scope.

Something like that:

Function.prototype.getFunction = function (context) {
    var
        args = arguments,
        foo = this;
    return function () {
        foo.apply((context || window), Array.prototype.slice.call(args, 1));
    };
};

Then your call would look like this:

$("a").on("click", retornaNada.getFunction(this, arg1, arg2));

Answer 6

The way you’re doing, that’s using a Closure(as I told you in the previous question) you are passing a reference from a function to the argument, which is expected.

However, you can use parameters if you return a function in the return of the function you called.

For example:

function retornaFunction(data){
  return function(){console.log("Data: "+data+" This: "+this)};
}
var data = 1;
$('div').on("click", retornaFunction(data));

See that you are passing the parameter data and can also access the context this which refers to your clicked element, of which is widely used in functions assignments like this that you are proposing.

In fact, there are other ways to do what you want, not by using the function .on().

For example:

function retornaFunction(data){
      return function(){console.log("Data: "+data+" This: "+this)};
    }
    var data = 1;
$('div').click(retornaFunction(data));

This way you do not need to pass "click" as parameter.

You can also create an element and assign an event to Click for him in his creation as for example:

function retornaFunction(data){
  return function(){console.log("Foo: "+data+this)};
}
data = 1;
var $div = $('<div />', {
  "class": "suaclasse", //opcional apenas exemplo
  text: "texto qualquer"//opcional apenas exemplo
}).click(retornaFunction(data)); //aqui você atribui o clique.

$('body').append($div);//joga a div no body de seu documento

Answer 7

You can pass several parameters via javascript using this example:

function abreJanela(URL,URL2) {
location.href = "#?pg=pecas&nome="+URL+"&ano_base="+URL2;  
  
  
  //este metoo manda parametros via GET
  alert("#?pg=pecas&nome="+URL+"&ano_base="+URL2+"");
};

<select    name="ano"  id="ano"   class="select" >	
							<option     value="2014">2014</option>
							<option     value="2015" selected>2015</option>
							</select>
Nome:<input   onchange="javascript: abreJanela(this.value, ano.value)"   type="text"  name="corrida"   >

<br>

Basta completar campo e clicar ENTER

Answer 8

elementoid.on("input", $.proxy(func_atualizadigitando, this, elementoid) );

function func_atualizadigitando(tag){
    var conteudo = tag.val();
    var qtdpalavras = conteudo.split(/\S+/).length-1;
    $("#cont-palavras").text(qtdpalavras);

    var qtdcarac = conteudo.length;
    $("#cont-carac").text(qtdcarac);
}