이

Question

I'am는 "내부"함수에서 "상위"함수에서 일부 값을 사용하려고 작동하지 않는의 EventListener에 적용 :

이

function Load(el, script) 
{ 
    el.addEventListener('click', 
     function (e) 
     { 
      this.test = "testing"; 
      script.apply(this, arguments); 
     }, false); 
}; 

Load(document.getElementById("panel"), 
    function (e) 
    { 
     alert(test); // test is undefined 
    }); 

위의 예는 작동하지 않습니다, 그것은 test을 말한다 정의되지 않았습니다.

하지만 다음 작품 :

function A(B) 
{ 
    this.test = "bla"; 
    B.apply(this); 
} 
function B() 
{ 
    alert(test); 
} 
A(B); 

차이점은 무엇입니까? 제대로 작동하려면 어떻게해야합니까?

Answer 1

test 그 시점에서 요소의 속성입니다, 그래서 당신은 그런 식으로 참조해야합니다

Load(document.getElementById("panel"), 
function (e) 
{ 
    alert(this.test); // "testing" 
}); 

You can test it here합니다. 두 번째 차이점은 첫 번째 예제에서 this은 id="panel" 요소를 참조하며 해당 속성이 설정되었음을 의미합니다. 두 번째 예제에서 this은 전역 개체 또는 window을 나타내므로 test은 액세스 할 때 작동하는 전역 변수입니다. 당신이 A()를 호출 할 때 두 번째 예에서

Answer 2

는 this 그 범위의 이후 window 객체를 참조하는 A() 실행한다. 모든 전역 변수는 window 개체에도 속하므로이 문맥에서 test, this.test 및 window.test은 모두 동일한 엔터티입니다. 첫 번째 예

그러나 this 정도로 this.test는 (정의 된) "#panel".test와 동일하지만 (정의되지 않은) test 및 window.test 상이한 핸들러가 호출되는 소자를 의미한다.

Answer 3

당신은 닉 Craver의 답변을 받아 들여야한다, 난 그냥 좀 더 코드 여기 명확히하고 있습니다 :

function Load(el, script) 
{ 
    el.addEventListener('click', 
     function (e) 
     { 
      this.test = "testing"; // sets el.test="testing" ('cos this==el) 
      script.apply(this, arguments); 
     }, false); 
}; 

Load(document.getElementById("panel"), 
    function (e) 
    { 
     alert(test); // alerts window.test, not el.test 
    });

function A(B) 
{ 
    this.test = "bla"; // sets window.test="bla" ('cos this==window) 
    B.apply(this); 
} 
function B() 
{ 
    alert(test); // alerts window.test 
} 
A(B);