jQuery와 OOP 적용

Question

jQuery와 함께 작업하고 있으며 일부 기본 Javascript OOP 원리를 호버 동작을 제어하는 ​​함수 집합에 적용하려고합니다. 그러나 "this"키워드를 생성하는 객체의 인스턴스를 참조하는 방법을 알아낼 수 없습니다. 내 샘플 코드는 다음과 같습니다

var zoomin = new Object(); 

zoomin = function() { 
     // Constructor goes here 
}; 

zoomin.prototype = { 
     hoverOn: function() { 
      this.hoverReset(); 
      // More logic here using jQuery's $(this)... 
     }, 
     hoverReset: function() { 
      // Some logic here. 
     } 
     }; 

// Create new instance of zoomin and apply event handler to matching classes. 
var my_zoomin = new zoomin(); 
$(".some_class").hover(my_zoomin.hoverOn, function() { return null; }); 

위의 코드에 문제가있는 라인이 전화로 "this.hoverReset()"를 hoverOn 내부() 함수입니다. "this"는 이제 hover 한 요소를 의미하기 때문에 의도 한대로 작동하지 않습니다. 기본적으로 객체 (my_zoomin)의 해당 인스턴스에 대해 hoverReset() 함수를 호출하려고합니다.

이렇게 할 방법이 있습니까?

감사합니다.

Answer 1

개체의 속성에 기능을 할당하는 경우에만 해당 개체의 함수 내에 this이 연결되지 않습니다. 그것은 당신이 어떻게 함수를 호출하는지입니다.

.hover(my_zoomin.hoverOn,...) 

를 호출하여

당신은 단지 기능을 전달한다. 그것이 속한 대상을 "기억"하지 않습니다.

.hover(function(){ my_zoomin.hoverOn(); },...) 

이 my_zoomin을 참조 thishoverOn 안에 만들 것입니다 : 당신이 할 수있는 것은 익명 함수를 통과하고 내부 hoverOn를 호출하는 것입니다. 따라서 this.hoverReset()에 대한 전화가 작동합니다. 그러나 hoverOn 내부에는 이 아니며에는 선택자로 만든 jQuery 객체에 대한 참조가 있습니다.

하나의 해결책은 매개 변수로 선택된 요소를 통과하는 것입니다 :

var zoomin = function() { 
    // Constructor goes here 
}; 

zoomin.prototype = { 
    hoverOn: function($ele) { 
     this.hoverReset($ele); 
     // More logic here using jQuery's $ele... 
    }, 
    hoverReset: function($ele) { 
     // Some logic here. 
    } 
}; 


var my_zoomin = new zoomin(); 
$(".some_class").hover(function() { 
    my_zoomin.hoverOn($(this)); // pass $(this) to the method 
}, function() { 
    return null; 
}); 

---

은 다음 단계로, 당신은 jQuery plugin을 고려할 수 있습니다.

Answer 2

1. 이벤트 처리기를 객체에 "바인딩"할 수 있습니다 (예 : see Mootools bind code).
2. 당신은 익명 함수에서 매개 변수로 객체를 전달하고 이벤트 처리기 한에 관해서는

에 대신의 this을 사용할 수 있습니다, 당신은 function

bind: function(bind){ 
     var self = this, 
      args = (arguments.length > 1) ? Array.slice(arguments, 1) : null; 

     return function(){ 
      if (!args && !arguments.length) return self.call(bind); 
      if (args && arguments.length) return self.apply(bind, args.concat(Array.from(arguments))); 
      return self.apply(bind, args || arguments); 
     }; 
    } 

하지 않도록 bind 방법을 추가 JQ와 얼마나 잘 상호 작용하는지는 확실합니다.

Answer 3

이 질문에 대한 내 대답을 참조하십시오

where is my "this"?

why is "this" not this?

this 혼란은 모든 시간을 온다.

콜백으로 함수를 전달하면 독립 실행 형 함수로 호출되므로 "this"가 전역 객체가됩니다.

"bind"는 ecmascript 5의 기본 부분이며 함수 프로토 타입의 일부입니다. 위로 두 번째 답변이 끝나면 mozilla 웹 사이트에 대한 링크가 생깁니다.이 링크에는 바인드 기능의 "호환성"버전이 있습니다. myfunction.bind (myobject)를 사용하십시오. 사용 가능한 경우 네이티브 함수를 사용하고 그렇지 않은 경우 JS 함수를 사용합니다.