매개 변수가있는 함수를 매개 변수로 전달 하시겠습니까?


151

매개 변수로 매개 변수가있는 자바 스크립트 함수를 전달할 수 있습니까?

예:

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

5
JQuery처럼 보이지만 대부분은 그렇지 않지만 관련이 없습니다. 사용하는 Javascript 라이브러리에 관계없이 사용 또는 매개 변수 및 기능은 동일합니다.
Guffa

@Guffa는 - 그것이 jQuery를 태그해야하는지 궁금 해서요
러스 캠

1
@Lucia 허용 된 답변을 이것으로 바꾸어보십시오 .
Michał Perłakowski

답변:


244

"폐쇄"를 사용하십시오.

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

이렇게하면 매개 변수를 알고있는 익명 임시 함수 래퍼가 만들어져 실제 콜백 구현으로 전달됩니다.


3
객체에서 함수를 호출하려면 bind ()를 호출해야합니다. myObj.click (function () {this.doSomething ();} .bind (myObj)); 그러면 "this"가 myObj가됩니다.
Eli

1
많은 것들을 다룰 때 이것이 성능 문제가 아닙니까? 예를 들어 onPress를 행으로 렌더링하고 10,000 개의 행이 있습니다. 각 행에 대해 새로운 익명 임시 함수 래퍼를 만듭니다. 다른 방법이 있습니까?
Joshua Pinter

@JoshuaPinter이 기술 자체는 문제가되지 않습니다. 동일한 함수 호출이 10,000 번 필요한 경우 래퍼를 변수에 저장하면 한 번만 만들 수 있습니다. 10,000 개의 다른 컨텍스트를 전달해야 할 경우 수행 할 수있는 작업이 거의 없습니다. 조기 최적화주의 :만큼 항상 성능, 당신은 할 필요가 측정 이 문제가 아닌지 확인합니다. 오늘날의 JavaScript 엔진은 매우 강력하며 놀라운 방식으로 코드를 최적화 할 수 있습니다.
페르디난트 바이어

@FerdinandBeyer 굉장합니다. 팁 주셔서 감사합니다. 친구는 나쁜 관행이었고 대신 사용한다고 나에게 말했다 this.myFunction = this.myFunction.bind(this)당신의 constructor방법. 그러나 말했듯이 클릭하면 해당 행의 세부 정보 페이지를 열기 위해 클릭하는 다른 모든 행과 같이 각 컨텍스트마다 다른 컨텍스트를 전달해야 할 때 피할 수 없습니다.
Joshua Pinter

@FerdinandBeyer, 나는 같은 myVar에 변수에 할당 된 다른 인수 값이 호출 폐쇄 기능으로 원하는 말하자면이 MyVar는 문자열과는 폐쇄로 changeViewMode를 전달하는 두 개의 연속 호출 사이 변화하지만, changeViewMode 항상 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));
Thomas

2
어떤 옵션이 가장 좋습니까? 클로저 또는 바인드 기능 사용? 성능에 영향이 있는지 알려주세요
Varun


15

아니요, 그러나 매개 변수없이 하나를 전달할 수 있습니다.

$(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

이것은 Ferdinand Beyer의 접근 방식에 따른 예입니다.

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

이 예제에서 "매개 변수 값"은 함수 랩을 사용하여 function1에서 function3으로 전달됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.