javascript : 이벤트에서 "this"범위를 변경하는 방법

Question

Function.prototype.bind에 대한 MDN 문서를 열었지만 스크립트가 여전히 작동하지 않습니다.

this은 addEventListener에 추가 된 htmlElement를 참조합니다. 문제는 내 this이 개체 창을 참조하는 이유입니다.

var handle1 = document.getElementById('handle1'), 
    handle2 = document.getElementById('handle2'); 

function doLogin() { 
    alert(this); 
} 

function enterForm(ev) { 
    if (ev.which === 13) { 
     doLogin(); 
    } 
} 

handle1.addEventListener('click', doLogin, false); 
// this alert: [object HTMLButtonElement] this is what i want 


handle2.addEventListener('keyup', enterForm, false); 
// this alert: [object Window] this is what i do not want 

그래서, 어떻게이 문제를 해결하기 위해 여기

바인드 (http://jsbin.com/ejimor/1/edit)없이 스크립트입니까?

Answer 1

트릭은 당신이 enterForm가 호출되는 상황에서 doLogin를 호출 할 것입니다 - 그것을 위해 당신이 call 또는 apply가 사용할 수 있습니다

function enterForm(ev) { 
    if (ev.which === 13) doLogin.call(this); 
} 

call 및 applythis 함수의 내부가 있는지 확인 (예를 들어, doLogin.call({x: 1})을 호출하고 이라는 경고를받을 수있는) 첫 번째 인수로 설정됩니다.

당신은 항상 doLogin를 원하는 경우에

은 다음 bind를 사용하여 동일한 기능의 바운드 버전의 기능을 대체 할 수 HTMLButtonElement의 컨텍스트에서 호출 할 :

function doLogin() { alert(this); } 
doLogin = doLogin.bind(handle1); 

bind는의 새 버전을 생성 함수를 호출하고 전달 된 첫 번째 인수에 this이 영구적으로 바인딩되어 있습니다. 그래서, 같은 맥락에서, 우리는 그랬다면이 :

var newLogin = doLogin.bind({x: 1}); 

이 익명의 {x: 1} 개체에 설정된 this 컨텍스트로 호출됩니다 우리가 newLogin를 호출 할 때마다 (우리가했던 경우에도 newLogin.call(12) 또는 newLogin.apply(someObject))