[javascript] JavaScript에서 익명 함수에 인수를 어떻게 전달할 수 있습니까?

Program / 글쓴이

JavaScript에서 익명 함수에 인수를 전달하는 방법을 알아 내려고합니다.

이 샘플 코드를 확인하면 내가 의미하는 바를 알 수있을 것입니다.

<input type="button" value="Click me" id="myButton" />

<script type="text/javascript">
    var myButton = document.getElementById("myButton");
    var myMessage = "it's working";
    myButton.onclick = function(myMessage) { alert(myMessage); };
</script>

버튼을 클릭하면 다음 메시지 it's working가 나타납니다. 그러나 myMessage익명 함수 내부 의 변수는 null입니다.

jQuery는 많은 익명 함수를 사용하는데, 그 인수를 전달하는 가장 좋은 방법은 무엇입니까?

답변

특정 케이스가 작동하도록 간단히 수정할 수 있습니다.

<script type="text/javascript">
  var myButton = document.getElementById("myButton");
  var myMessage = "it's working";
  myButton.onclick = function() { alert(myMessage); };
</script>

이 예제는 생성되고 요소에 대한 핸들러로 할당 된 익명 함수가 생성 된 컨텍스트에 정의 된 변수에 액세스 할 수 있기 때문에 작동합니다.

레코드의 경우 핸들러 (onxxx 속성 설정을 통해 할당)는 단일 인수가 DOM에 의해 전달되는 이벤트 개체를 취할 것으로 예상하며 다른 인수를 강제로 전달할 수 없습니다.

답변

이벤트를 함수에 바인딩하기 때문에 수행 한 작업이 작동하지 않습니다. 따라서 이벤트가 발생할 때 호출 될 매개 변수를 정의하는 이벤트입니다 (즉, JavaScript는 onclick에 바인딩 한 함수의 매개 변수에 대해 알지 못하므로 아무것도 전달할 수 없습니다).

그러나 이렇게 할 수 있습니다.

<input type="button" value="Click me" id="myButton"/>

<script type="text/javascript">

    var myButton = document.getElementById("myButton");

    var myMessage = "it's working";

    var myDelegate = function(message) {
        alert(message);
    }

    myButton.onclick = function() {
        myDelegate(myMessage);
    };

</script>

답변

다음은 귀하가 언급 한 문제를 해결하기 위해 클로저를 사용하는 방법입니다. 또한 바인딩에 영향을주지 않고 시간이 지남에 따라 메시지를 변경할 수 있다는 사실도 고려합니다. 그리고 그것은 간결하게 jQuery를 사용합니다.

var msg = (function(message){
  var _message = message;
  return {
    say:function(){alert(_message)},
    change:function(message){_message = message}
  };
})("My Message");
$("#myButton").click(msg.say);

답변

익명 함수에서 매개 변수를 제거하면 본문에서 사용할 수 있습니다.

    myButton.onclick = function() { alert(myMessage); };

자세한 정보는 ‘자바 스크립트 클로저’를 검색하십시오.

답변

이벤트 핸들러는 발생한 이벤트 인 하나의 매개 변수를 예상합니다. 이름을 ‘myMessage’로 변경하므로 메시지가 아닌 이벤트 객체에 경고합니다.

클로저를 사용하면 함수 외부에서 정의한 변수를 참조 할 수 있지만 Jquery를 사용하는 경우 이벤트 특정 API를 살펴볼 수 있습니다.

http://docs.jquery.com/Events/bind#typedatafn

여기에는 자신의 데이터를 전달하는 옵션이 있습니다.

답변

<input type="button" value="Click me" id="myButton" />

<script type="text/javascript">
    var myButton = document.getElementById("myButton");

    myButton.myMessage = "it's working";

    myButton.onclick = function() { alert(this.myMessage); };


</script>

이것은 IE6 +의 모든 것을 포함하는 내 테스트 스위트에서 작동합니다. 익명 함수는 자신이 속한 객체를 인식하므로 이를 호출하는 객체 (이 경우 myButton) 와 함께 데이터 를 전달할 수 있습니다 .

답변

예:

<input type="button" value="Click me" id="myButton">
<script>
    var myButton = document.getElementById("myButton");
    var test = "zipzambam";
    myButton.onclick = function(eventObject) {
        if (!eventObject) {
            eventObject = window.event;
        }
        if (!eventObject.target) {
            eventObject.target = eventObject.srcElement;
        }
        alert(eventObject.target);
        alert(test);
    };
    (function(myMessage) {
        alert(myMessage);
    })("Hello");
</script>