콜백 내에서 jQuery 객체를 참조 할 수없는 이유는 무엇입니까?

Question

jquery 객체 (html 요소 컬렉션)를 저장하지만 다른 함수에서 객체를 참조 할 때 'undefined'로 돌아옵니다! 여기 내 코드는 다음과 같습니다

this.container = $('#slide-menu'), // The menu container (e.g. a UL) 
this.items = this.container.find('.menu-item'); // The menu items (e.g. all li's) 
this.links = this.items.find('.link'); // The menu links 

this.getCurrent(); // Set the current menu-item 
this.getPrev(); // Set the previous menu-item 
this.getNext(); // Set the next menu-item 

console.log(this.items); // !!! The items exist here !!! 

// Setup the menu items click events: 
this.items.bind('click', function(e) { 

    console.log(this.items); // !!! But not here !!! ??? 

    e.preventDefault(); 
    o = $(e.currentTarget); // Set jquery object 

    if (!o.hasClass('active')) { // Prevent action on current menu-item 
     this.items.find('.active').removeClass('active'); // Remove the current active menu-item 
     o.addClass('active'); // Set new active menu item 

사람은 나를 미치게 그리고 지금까지 내가 볼 수있는이 가능하지 않아야하기 때문에 이런 일이 왜 어떤 생각을 가지고있다. 자바 스크립트가 깨졌습니다?! 흠, 어떻게 생각하세요?

Answer 1

jquery 객체가 객체가 아닌 것은 언제입니까?

미정의 경우!

또는 그것이 생각하는 곳이 아닌 경우.

사람은 나를 미치게 그리고 지금까지 내가 이것이 가능하지 않아야 볼 수 운전 있기 때문에 이런 일이 왜 어떤 생각을 가지고있다. 자바 스크립트가 깨졌습니다! 흠, 어떻게 생각하세요?

아니요, 자바 스크립트가 깨져 있지 않습니다.

this.items은 항상 동일한 것을 말합니다. 그렇지 않습니다. bind에는 this이 콜백 함수 외부에있는 것이 아니라 클릭 한 것입니다.

콜백에서 this.items이 아닌 $('#slide-menu').find('menu-item')으로 작성해야합니다.

Answer 2

범위 문제입니다.

this 클릭 이벤트 처리기 외부는 처리기 내에 this과 동일하지 않습니다. 핸들러 내부에서 클릭되는 요소를 나타냅니다. 바깥 쪽은 글로벌 윈도우 객체 일 가능성이 큽니다.

이 잘 작동합니다 : 당신이 실제로 필요하지 않는

var items = this.container.find('.menu-item'); 

items.bind('click', function(e) { 
    console.log(items); 

자바 스크립트에서 this를 사용하지 마십시오.