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>
