자바스크립트의 익명 함수에 인수를 전달하려면 어떻게 해야 합니까?

자바스크립트의 익명 함수에 인수를 전달하려면 어떻게 해야 합니까?

자바스크립트에서 익명 함수에 인수를 전달하는 방법을 찾고 있습니다.

이 샘플 코드를 확인해 보십시오. 무슨 뜻인지 알 수 있을 것 같습니다.

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

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

기록의 경우(xxx 속성 설정을 통해 할당하는) 처리기에서 단일 인수가 이벤트 개체를 DOM에서 전달할 것으로 예상하므로 다른 인수를 강제로 전달할 수 없습니다.

이벤트를 함수에 바인딩하기 때문에 수행한 작업이 작동하지 않습니다.따라서 이벤트가 발생할 때 호출될 매개 변수를 정의하는 이벤트입니다(즉, 클릭할 때 의무적으로 사용하는 함수의 매개 변수에 대해 자바스크립트가 모르기 때문에 아무것도 전달할 수 없습니다).

하지만 이렇게 할 수 있습니다.

<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); };

자세한 내용은 '자바스크립트 폐쇄' 검색

이벤트 핸들러는 하나의 매개변수가 필요한데, 이 매개변수는 실행된 이벤트입니다.이 이름을 'my Message'(내 메시지)로 변경하고 있으므로 메시지가 아닌 이벤트 개체에 경고를 보내는 것입니다.

닫기를 사용하면 함수 외부에서 정의한 변수를 참조할 수 있지만 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)로 데이터를 전달할 수 있습니다.

딜러:

function displayMessage(message, f)
{
    f(message); // execute function "f" with variable "message"
}

function alerter(message)
{
    alert(message);
}

function writer(message)
{
    document.write(message);
}

displayMessage 기능 실행:

function runDelegate()
{
    displayMessage("Hello World!", alerter); // alert message

    displayMessage("Hello World!", writer); // write message to DOM
}

예:

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

수행한 작업은 단일 매개 변수를 사용하여 함수 내부의 로컬 변수 myMessage에 할당되는 새로운 익명 함수를 생성하는 것입니다.인수는 실제로 전달되지 않고 값이 전달되지 않은 인수는 null이 되므로 함수는 alert(null)만 수행합니다.

이렇게 쓰면.

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

효과는 있겠지만, 질문에 답이 될지는 모르겠네요.

언급URL : https://stackoverflow.com/questions/224820/how-can-i-pass-arguments-to-anonymous-functions-in-javascript