개체 메서드를 이벤트 수신기로 사용

Question

저는 JavaScript를 배우는 C++ 사람이므로 'this'가 호출하는 개체에 바인딩된다는 사실은 계속 놀랍니다. 나는 이벤트 리스너로서 객체 메쏘드를 사용하고 싶다. 당신이 자바 스크립트 전문가의 모든 스타일로 그것을하고 있는지 확인하고 싶다.

var user = 
{ 
    status: 1,  // login status: 0:invalid password, 1:logged out, 2:logged in 
loginName: "", 

// Method called whenever the user submits a username/password via html form: 
onLoginSubmit: function (event) 
{ 
     if (this != user) // called from 'form submit' callback, so call ourselves: 
    { 
     user.onLoginSubmit(event); 
     return; 
    } 
} 
}; 

내가 여기 이전 답을 발견

그래서, 적절한 상황에서 해당 속성에 액세스 할 수 있도록이 객체를 '이'의 가지고 방법을 얻을, 나는이 다음 작성했습니다 : Accessing an object's property from an event listener call in Javascript이지만 제안 된 솔루션은 기본적으로 글로벌을 만드는 것입니다. 이전 솔루션 또는 재귀 솔루션보다 '더'더 효과적으로 사용할 수 있습니까? 당신이 일을 함께 할 수있는 가장 좋은 방법은 결합하는 것입니다 않습니다 무엇을

form.submit(user.onLoginSubmit); 

하면 제출하는 동안 :

Answer 1

난 당신이 제출 처리기를 바인딩 할 때, 당신은 이런 일을하고 있으리라 믿고있어 처리기에서 실제로 'on'을 사용하여 onLoginSubmit을 호출하므로 제출 처리기 내에 추가 논리가 필요하지 않습니다.

함수를 바인딩 할 때 이와 같은 작업을 수행하면 제대로 작동합니다.

form.submit(function(e) { 
    user.onLoginSubmit(e); 
}); 

익명 함수를 사용하면 사용자 개체의 메서드를 제대로 호출 할 수 있습니다.

문제점을 오해 한 경우, onLoginSubmit()을 호출하는 방법에 대한 코드를 게시하십시오. 여기

function User() { 

    var that = this; 
    this.status = 1; 
    this.loginName = ""; 
    this.onLoginSubmit = function (event) 
    { 
    // the variable "that" is available and references the User instance 
    } 
} 
var user = new User(); 

우리가 생성자로 사용자를 사용하므로,이 객체가 "새"를 통해 건설되고 가리키는 :

Answer 2

당신은 클로저를 사용할 수 있습니다,이 작업을해야합니다. "대략"변수는 User 함수의 로컬 변수이지만 함수가 변수를 참조하기 때문에 메모리에 남아이 함수에서 사용할 수 있습니다. 그런 다음 "this"대신 "that"을 "fake"범위로 사용할 수 있습니다.

각 인스턴스에 대해 함수가 만들어지기 때문에 많은 User 인스턴스가있는 경우 사용하려는 것은 아닙니다. "규칙적인"방법은 Logan의 대답과 같은 익명의 함수를 사용하는 것입니다.

대부분의 프레임 워크이 처리를위한 우아한 방법이 있지만, 당신이 함께 할 수 있도록 기본적으로 당신은 당신이 함수를 호출 할 때 폐쇄를 통해 함수 자체에서 사용할 수있는 범위가, 또는 그것을 알 필요가 중 (모든 경우) 이 좀 명확

희망 :

편집 (user.onLoginSubmit()를 작성하여) 권리 범위 : 오 잘 누군가가 당신이 링크 된 게시물에 같은 일의 종류를 기록했다. 이제는 '사용자'에게 맞게 조정되었습니다.