Передача функции с параметрами в качестве параметра?

151

Можно ли передать функцию javascript с параметрами в качестве параметра?

Пример:

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

javascript

— Lucia
источник

5

Похоже, JQuery, и, скорее всего, так, но это не имеет значения. Использование или параметры и функции одинаковы независимо от того, какие библиотеки Javascript вы используете.

— Гуффа

@Guffa - мне было интересно, стоит ли отмечать его jQuery

— Russ Cam

1

@Lucia Пожалуйста, подумайте об изменении принятого ответа на это .

— Михал Перлаковский

Если вы работаете с React, подумайте над stackoverflow.com/questions/41369497/…

— Майкл Фрейдгейм

244

Используйте «закрытие»:

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

Это создает анонимную временную оболочку функции, которая знает о параметре и передает его фактической реализации обратного вызова.

— Фердинанд Бейер
источник

3

Если вы хотите вызвать функцию объекта, вам нужно вызвать bind (). myObj.click (function () {this.doSomething ();} .bind (myObj)); Это сделает «это» myObj.

— Эли

1

Разве это не проблема с производительностью при работе со многими из них? Например, вы рендеринг onPress в ряд, и у вас есть 10000 строк. Это создает новую временную оболочку анонимной функции для каждой строки. Есть ли другой способ сделать это?

— Джошуа Пинтер

@JoshuaPinter Сама техника не проблема. Если вам требуется один и тот же вызов функции 10000 раз, вы можете просто сохранить оболочку в переменной, чтобы создать ее только один раз. Если вам нужно пройти 10 000 различных контекстов, вы мало что можете сделать. Остерегайтесь преждевременной оптимизации: как всегда, с производительностью, вы должны измерить, чтобы увидеть, есть ли проблема или нет. Современные механизмы JavaScript очень мощные и могут оптимизировать код неожиданными способами.

— Фердинанд Бейер

@FerdinandBeyer Отлично, спасибо за совет. Друг сказал мне, что это плохая практика, и что вы должны вместо этого использовать this.myFunction = this.myFunction.bind(this)в своем constructorметоде. Но, как вы сказали, когда вам нужно передать разные контексты для каждого из них, например, для всех разных строк, по которым вы щелкаете, чтобы открыть страницу с подробностями этой строки, это невозможно избежать.

— Джошуа Пинтер

@FerdinandBeyer, допустим, что myvar является строкой, и она изменяется между двумя последовательными вызовами передачи changeViewMode как замыкания, но changeViewMode всегда получает первое значение myvar, я хочу вызвать функцию замыкания с другим значением аргумента, назначенным для той же переменной myvar,

— nmxprime

42

Использование Function.prototype.bind(). Цитируя MDN:

bind()Метод создает новую функцию , которая при вызове, имеет свой thisнабор ключевых предоставленному значения с заданной последовательности аргументов , предшествующих любой при условии , когда новая функция вызывается.

Он поддерживается всеми основными браузерами, включая IE9 +.

Ваш код должен выглядеть так:

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

Примечание: я предполагаю, что вы находитесь в глобальном контексте, т.е. thisпеременная есть window; в противном случае используйте thisвместо null.

— Михал Перлаковский
источник

Спасибо, это помогло мне. Использовал это так:$.ajax(url).done(handler.bind(this, var1, var2));

— Томас

2

Какой вариант лучше? Использование замыкания или использование функции связывания? Пожалуйста, дайте мне знать, если это повлияет на производительность

— Varun

5

@Varun Смотрите, почему связывание медленнее, чем закрытие?

— Михал Перлаковский

15

Нет, но вы можете передать один без параметров, и сделать это:

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

Таким образом, вы передаете анонимную функцию без параметров, которая затем вызывает вашу параметризованную функцию с переменной в закрытии

— Клайд
источник

8

Да, вот так:

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

— Филипп Лейбер
источник

7

Или, если вы используете es6, вы должны быть в состоянии использовать функцию стрелки

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

— Кристиан Бартрам
источник

2

Ты можешь сделать это

var message  = 'Hello World';

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

а потом

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

activate(callback);

Или, если ваш обратный вызов содержит более гибкую логику, вы можете передать объект.

демонстрация

— Александр Саргсян
источник

2

Вот пример, следующий за подходом Фердинанда Бейера:

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

В этом примере «значение параметра» передается от function1 к function3 через function2 с помощью переноса функции.

— erionpc
источник