2012-12-13 5 views
3

에 의해 내가 여기에 몇 가지 코드를하려 할 때,자바 스크립트 : 객체의 기능이 호출이 온 클릭

var cat={ 
    col:"Red", 
    getCol:function(){ 
     document.writeln(this.col); 
    } 
} 

function getCol(){ 
    document.writeln(cat.col); 
} 

$(function(){ 
    $("#button1").click(cat.getCol); 
    $("#button2").click(getCol); 
}) 

을 정의되지하지만 button2를 들어, 단추 1은 "레드"undefined을 받고 있습니다. 누군가 왜 저에게 말할 수 있습니까? 내가 $("#button1").click(cat.getCol());로 변경하면 cat.getCol의 몸이 this을 사용하기 때문에

는 그리고, 나는 내가 필요로 "레드"... 모든

$("#button1").click(cat.getCol); 

+0

가능한 중복 [무엇 내 이벤트 처리기 잘못?] (http://stackoverflow.com/questions/6804622/whats-wrong-with-my-event-handler) –

+1

FYI,'$ ("# button1"). click (cat.getCol());'버튼 클릭이 아니라 즉시'cat.getCol'을 실행합니다. –

+0

감사합니다. 그것은 '이'사물에 관한 것이어야합니다. – TKL

답변

3

먼저 당신에게 undefined을 제공을 가지고있는 아인 ' 이 일이 실행될 때 cat. 브라우저 간 호환성에 대해 걱정할 경우 Function.prototype.bind 또는 다른 여러 변형을 사용하시기 바랍니다. "메서드"를 이벤트 처리기로 설정하고 this이 둘러싼 개체에 바인딩되어 있는지 확인하는 문제에 대한 많은 게시 된 솔루션이 있습니다. getCol 직접 cat을 사용하기 때문에 잘 작동

$("#button2").click(getCol); 

다음.

마지막

$("#button1").click(cat.getCol()); 

은 대단히 잘못된 것입니다. cat.getCol()이라는 표현식은 이고 undefined을 반환하는입니다. 이 값은 클릭 핸들러에 설정할 값이 아닙니다. 방금 문서를 보았습니다. 쓰기가 발생했지만 클릭에 응답하지 않았습니다.

ADDENDUM는

일반적 JS에서

Live demo using bind

1

, this 그래서, 그 함수가 호출 될 때 두 경우 모두에서, this는의 (jQuery를 개체 해결 것이다 .. 함수의 소유자를 말한다 the) 요소를 클릭합니다. 첫 번째 경우 this은 'cat'이 아니므로 col은 정의되지 않습니다. 따라서, 그것은 정의되지 않습니다. 두 번째 경우에는 no입니다. 따라서 cat.col은 Red로 해석됩니다.

JS 함수, 익명 함수에 대해 읽어야한다고 생각합니다. http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/을 시작하는 것이 좋습니다. MDN에

- https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this

+0

매우 유용한 링크입니다. 감사합니다. – TKL