자바 스크립트 - 이벤트 함수에서 객체 속성에 액세스하는 방법?

Question

나는 초보자 프로그래머입니다. OO 방식으로 스크립트를 만들고 싶습니다. 그러나 내 속성을 보호하고 액세스 할 수있는 방법을 생각할 수 없습니다.

var imageViewer=function(imageWrapper) 
{ 
    var hasTouch = 'ontouchstart' in window, 
    resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize', 
    startEvent = hasTouch ? 'touchstart' : 'mousedown', 
    moveEvent = hasTouch ? 'touchmove' : 'mousemove', 
    endEvent = hasTouch ? 'touchend' : 'mouseup', 
    cancelEvent = hasTouch ? 'touchcancel' : 'mouseup'; 

    this.imgContainer=imageWrapper; 
    this.image=imageWrapper.getElementsByTagName("img")[0]; 
    this.initScale=1; 
    this.scaleLevel=this.initScale; 
    this.startPoint={x:0,y:0} 

    //alert(this.image) 
    this.initEvents=function() 
    { 
     window.addEventListener(resizeEvent, this.resizeImageViewer, false); 
     this.imgContainer.addEventListener(startEvent, this.handleStartEvent, false); 
     this.imgContainer.addEventListener(moveEvent, this.handleMoveEvent, false); 
     this.imgContainer.addEventListener(endEvent, this.handleEndEvent, false); 
    } 

    this.resizeImageViewer=function(event) 
    { 
     /*not finish*/ 
    } 

    this.handleStartEvent=function(event) 
    { 
     /**********problem goes here*************/ 
     this.startPoint.x = event.offsetX || (event.pageX - this.imgContainer.offsetLeft); 
     this.startPoint.y = event.offsetY || (event.pageY - this.imgContainer.offsetTop); 
    } 

    this.handleMoveEvent=function(event) 
    { 
     /*not finish*/ 
    } 

    this.handleEndEvent=function() 
    { 
     /*not finish*/ 
    } 

    this.initEvents(); 
} 

var imageViewerObj = new imageViewer(document.getElementById("imageWrapper")); 

내가 this을 알고 :

이

"TypeError: this.imgContainer is undefined"

전체 스크립트는 다음과 같습니다 : 문제는 그 기능

this.handleStartEvent=function(event) 

방화범의 오류 메시지에 내 this.XXX 속성에 액세스하지 못할 것입니다 imgContainer이 아니고 imageViewer이 될 것입니다. 그러나 제게는 imageViewer 님의 부동산 정보를 얻는 방법을 모르겠습니다. e startPoint 및 initScale. 누군가 나를 안내 할 수 있을까요?

Answer 1

단지 다른 변수에 저장합니다

var imageViewer = function(imageWrapper) 
{ 
    var self = this; // use "self" instead of "this" later 

    ... 

    self.startPoint={x:0,y:0} 

    self.initEvents=function() 
    { 
     window.addEventListener(resizeEvent, self.resizeImageViewer, false); 
     self.imgContainer.addEventListener(startEvent, self.handleStartEvent, false); 
     self.imgContainer.addEventListener(moveEvent, self.handleMoveEvent, false); 
     self.imgContainer.addEventListener(endEvent, self.handleEndEvent, false); 
    } 

    ... 

    self.initEvents(); 
} 

Answer 2

imgContainer는 아이 this.parent.getChildAt(index).getAttribute(...);

선택하려는 요소의 수 (인덱스)와 인덱스를 교체하는 경우 부모가 다음 this.parent.getAttribute(...);를 사용할 수있는 경우. 첫 번째 자식이 <div><div class="wannaselectthat"></div></div> 인 경우 색인을 0으로 설정합니다. 당신이 this에 대한 참조를 유지하려면