JavaScript에서 "this"는 나를 혼란스럽게합니다.

Question

혼란스러운 JavaScript 중 하나는 을 사용할 때입니다.이

var x = { 
    ele : 'test', 
    init : function(){ 
    alert(this.ele); 
    } 
} 

그러나 여러 객체 및 특히 this의 이벤트 컨텍스트를 처리 할 때 추적/이해를 혼란스럽게합니다.

그럼 누구라도 더 나은 입력/지침/생각/더 나은 실천을한다면, 공유하십시오. 또한 this 사용하여 어떤 (성능) 장점 또는 무엇을 제공하는지 알고 싶습니다?

Answer 1

그것은 그 객체의 특정 인스턴스의 속성에 액세스 관하여, 성능에 대해 아니에요 -

x.init() 

당신이 기능에 this를 사용하지 않았다면 '시험'을 표시하지 않을까요.

효과적으로 상기 라인은 동일하다 : -

x.init.call(x); 

함수가 실행될 때 this에 할당 call의 사용 제 paramater.

지금 생각해 -

var fn = x.init; //Note no() so the function itself is assigned to the variable fn 
fn(); 

지금 당신이 경고에 아무 것도 얻을 수 없습니다. 이 때문에 위의 효율적입니다 : -

fn.call(window); 

브라우저에서이 window 개체가 전역 객체의 대명사 자바 스크립트 개최했다. 함수가 "원시 상태"로 호출되면 this은 전역 개체를 기본값으로 사용합니다.

고전적인 오류는 다음과 같이 뭔가를하고있다 : - :

onclick.call(theDOMElement) 

- onclick 이벤트에 부착 된 기능과 같은 코드를 사용하여 브라우저에 의해 호출되기 때문에

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     elem.onclick = function() { alert(this.ele); } 
    } 
} 
x.init(document.getElementById('myButton')); 

그러나이 작동하지 않습니다

따라서 함수가 실행 중일 때 this은 그것이 무엇이라고 생각하지 않습니다. 이 상황에

내 평소 솔루션입니다 : -

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     var self = this; 
     elem.onclick = function() { alert(self.ele); } 
     elem = null; 
    } 
} 
x.init(document.getElementById('myButton')); 

참고 elem = null는 해결 방법 IE의 메모리 누수입니다.

Answer 2

매우 혼란 스럽습니다. 함수를 호출하는 방법에 따라 다릅니다. Doug Crockford는 그의 책 Javascript, the Good Parts에서 좋은 글을 올렸습니다. 그 주안점은 틀린 공식 질문 인 this excellent answer입니다.

아니요, 성능과 관련이 없습니다.

Answer 3

this 키워드에 대한 좋은 광고 문안은 this (의도 된 의도 없음)입니다. 기사는 당신을 위해 일을 정리할 수 있습니다, 나는 그것이 나를 위해했다는 것을 압니다.

필수 규칙은 함수 내부의 this 키워드가 항상 기능 소유자를 의미한다는 것입니다, 그리고 기능 가을 언급하고이 때 가을 복사 할 때 결과를 이해하는 열쇠는 이해하는 것입니다. 예제는 앞서 언급 한 기사를 참조하십시오.

Answer 4

사용

var me = this; 

function(){ 

의 외부는 다음 함수() 나에게

Answer 5

, 그것은 많은에게 다음과 같은 가이드 라인을 도왔다 내부 나 참조 할 수 있습니다 때마다 당신은 this이 owner라고 생각한다고 봅니다. 함수가 할당 된 변수 이름을 소유 한 객체는 this이됩니다. 소유하고있는 사람에게 이해가되지 않으면 this 창이 표시됩니다.