Passando uma função com parâmetros como parâmetro?

151

É possível passar uma função javascript com parâmetros como parâmetro?

Exemplo:

$(edit_link).click( changeViewMode( myvar ) );

javascript

— Lucia
fonte

5

Parece JQuery, e provavelmente é, mas isso é irrelevante. O uso ou parâmetros e funções são os mesmos, independentemente de quais bibliotecas Javascript você usa.

— Guffa

@Guffa - Eu queria saber se ele deve ser marcado com jQuery

— Russ Cam

1

@ Lucia Por favor, considere alterar a resposta aceita para isso .

— Michał Perłakowski 26/02

Se você estiver trabalhando com o React, considere stackoverflow.com/questions/41369497/…

— Michael Freidgeim

244

Use um "fechamento":

$(edit_link).click(function(){ return changeViewMode(myvar); });

Isso cria um invólucro de função temporária anônima que conhece o parâmetro e o passa para a implementação de retorno de chamada real.

— Ferdinand Beyer
fonte

3

Se você deseja chamar uma função em um objeto, precisa chamar bind (). myObj.click (function () {this.doSomething ();} .bind (myObj)); Isso fará com que "isto" seja myObj.

— Eli #

1

Isso não é um problema de desempenho ao lidar com muitos deles? Por exemplo, você está renderizando um onPress em uma linha e possui 10.000 linhas. Isso cria um novo invólucro de função temporária anônima para cada linha. Existe alguma outra maneira de fazer isso?

— Joshua Pinter

@ JoshuaPinter A técnica em si não é um problema. Se você precisar da mesma chamada de função 10.000 vezes, poderá simplesmente salvar o wrapper em uma variável, para criá-lo apenas uma vez. Se você precisar passar por 10.000 contextos diferentes, pouco poderá fazer. Cuidado com a otimização prematura: como sempre com o desempenho, você precisa medir para ver se há um problema ou não. Os mecanismos JavaScript de hoje são muito poderosos e podem otimizar o código de maneiras surpreendentes.

— Ferdinand Beyer

@FerdinandBeyer Incrível, obrigado pela dica. Um amigo me disse que era uma prática ruim e que você deveria usar this.myFunction = this.myFunction.bind(this)no seu constructormétodo. Mas, como você disse, quando você precisa passar contextos diferentes para cada um deles, como todas as linhas diferentes nas quais você clica para abrir a página de detalhes dessa linha, não é evitável.

— Joshua Pinter

@FerdinandBeyer, digamos que myvar é uma string e foi alterada entre duas invocações consecutivas de passar changeViewMode como um fechamento, mas changeViewMode sempre recebe o primeiro valor de myvar, quero chamar a função de fechamento com um valor de argumento diferente atribuído à mesma variável myvar,

— nmxprime 18/07/19

42

Use Function.prototype.bind(). Citando MDN:

O bind()método cria uma nova função que, quando chamada, tem sua thispalavra-chave definida como o valor fornecido, com uma sequência de argumentos fornecida antes de qualquer fornecida quando a nova função é chamada.

É suportado por todos os principais navegadores, incluindo o IE9 +.

Seu código deve ficar assim:

$(edit_link).click(changeViewMode.bind(null, myvar));

Nota lateral: Presumo que você esteja no contexto global, ou seja, thisvariável é window; caso contrário, use em thisvez de null.

— Michał Perłakowski
fonte

Obrigado, isso me ajudou. Usou-o assim:$.ajax(url).done(handler.bind(this, var1, var2));

— Thomas

2

Qual opção é a melhor? Usando encerramento ou usando a função de ligação? Por favor, deixe-me saber se há algum impacto no desempenho

— Varun

5

@Varun See Por que o bind é mais lento que o fechamento?

— Michał Perłakowski

15

Não, mas você pode passar um sem parâmetros e faça o seguinte:

$(edit_link).click(
  function() { changeViewMode(myvar); }
);

Então você está passando uma função anônima sem parâmetros, essa função chama sua função parametrizada com a variável no fechamento

— Clyde
fonte

8

Sim como isso:

$(edit_link).click(function() { changeViewMode(myvar) });

— Philippe Leybaert
fonte

7

Ou, se você estiver usando es6, poderá usar uma função de seta

$(edit_link).click(() => changeViewMode(myvar));

— Christian Bartram
fonte

2

Você consegue fazer isso

var message  = 'Hello World';

var callback = function(){
alert(this)
}.bind(message);

e depois

function activate(callback){
  callback && callback();
}

activate(callback);

Ou, se o seu retorno de chamada contiver uma lógica mais flexível, você poderá passar o objeto.

Demo

— Alexandr Sargsyan
fonte

2

Este é um exemplo da abordagem de Ferdinand Beyer:

function function1()
{
    function2(function () { function3("parameter value"); });
}
function function2(functionToBindOnClick)
{
    $(".myButton").click(functionToBindOnClick);
}
function function3(message) { alert(message); }

Neste exemplo, o "valor do parâmetro" é passado da função1 para a função3 através da função2 usando uma quebra de função.

— erionpc
fonte