Javascript_javascript 스킬 중 이 키워드에 대한 심층 분석

먼저 결론을 내리겠습니다. "Javascript에서 This 키워드는 항상 함수(메서드) 의 소유자를 가리킵니다."

함수

코드 복사 코드는 다음과 같습니다.

function inform() {
Alert("안녕하세요, 저는 라루센세른입니다");
}

이 함수의 경우 this 키워드가 가리키는 대상은 누구입니까? ?

이전 글(Javascript 범위)에서 언급했듯이 전역적으로 정의된 함수의 경우 함수의 소유자는 창 개체인 현재 페이지입니다.

이렇게 함수를 따옴표로 묶었습니다. 전역적으로 정의된 함수는 실제로는 window 개체의 메서드이기 때문입니다.

그래서 함수 이름을 통해 직접 호출할 수도 있고, 메서드 이름을 통해 호출할 수도 있습니다. 이때 메서드의 this 키워드는 해당 소유자인 창 개체를 가리킵니다.

창의 도입 속성을 보면 다음과 같은 결과가 나옵니다.

코드 복사 코드는 다음과 같습니다.

var name = "나는 라루앙스입니다";
function inform() {
Alert(this.name);
}
alert(window.introduce);

위 코드를 읽은 후 전역 함수는 창 개체의 메서드이고 전역 변수는 창 개체의 속성(이미 Javasript 범위에서 언급됨)이라고 생각할 수 있습니다. 전역 함수에서 this 키워드를 통해 전역 변수에 액세스할 수 있나요?

답은 yes 입니다. 소개 기능을 호출하시면 저를 Laruence로 아시게 됩니다.

이벤트 핸들러 기능

아마도 이 키워드에 대한 대부분의 혼란은 이벤트 처리에서 함수(메서드)를 사용하는 데서 비롯됩니다.

코드 복사 코드는 다음과 같습니다.

예를 들어 이제 "name" 입력 상자를 클릭하면 이름 입력 상자의 값을 표시해야 합니다. 그런 다음 다음 코드를 작성할 수 있습니다.

function showValue() {
Alert(this.value);
}
document.getElementById('name').onclick = showValue;

위 코드 , 정상적으로 실행되지만 왜 그렇습니까? 함수의 this 포인터가 항상 함수 소유자를 가리킨다는 뜻이 아닌가요? 전역변수의 주인이 윈도우 객체라는 뜻 아닌가요?

하하, 이 질문이 생각난다면 제 글을 진지하게 읽고 있다는 뜻입니다. 그렇지 않으면 처음부터 읽어보시길 권합니다. 그렇지 않으면 읽고 나서도 헷갈리실 겁니다~

그렇습니다. 위 코드의 경우 showValue가 전역 개체에 정의되어 있으므로 onclick 이벤트가 바인딩된 경우에만 문제가 발생할 수 있는 것 같습니다.

우리는 JS의 모든 것이 객체이고 함수와 메소드도 실행 가능한 내부 속성을 갖는다는 점을 제외하면 객체의 속성이라는 것을 알고 있습니다. 따라서 위 코드의 경우 프로세서를 onclick에 바인딩할 때 실제로는 name이라는 ID를 가진 입력 상자 Dom 객체의 onclick 속성에 값을 할당합니다.

즉, 이름 입력 상자 객체의 onclick 속성에 showValue Copy 함수를 제공합니다. 이때 onclick을 보면

코드 복사 코드는 다음과 같습니다.

function showValue() {
경고(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name'). onclick);

그래서 이벤트가 발생하면 이름 입력 상자의 onclick 메서드가 호출됩니다. 이때 this 키워드는 자연스럽게 이름 입력 상자를 가리킵니다.

그런데 다음과 같은 글이 나오는 등 헷갈리는 일이 옵니다.

코드 복사 코드는 다음과 같습니다.

function showValue() {
Alert(this.value);
}

가 정상적으로 실행이 안되는데 왜 그럴까요?

그럼 지금은 과제가 아니라 참고사항이니까요.

onclick을 작성하는 두 가지 방법에 주의를 기울이면 이전 방법에서는 다음을 사용했다는 것을 알 수 있습니다.

dom.onclick = showvalue; //발신자 없음

지금 방법은:

onclick = "showvalue()" //발신자가 있습니다

이는 둘 사이의 차이점을 반영할 수도 있습니다. 전자의 경우 할당이고 후자의 경우 참조입니다. 이때 입력 상자의 onclick 속성을 보면 다음과 같습니다.

경고(dom.onclick);

차이점이 보이시나요? 왜 그런지 이해할 수 있겠죠?

이에 관해 IE에서 시도해 볼 수 있는 매우 흥미로운 예가 있습니다.

포인팅 변경 이제 이유를 알았으니 이 지점을 우리가 가리키는 지점으로 어떻게 만들 수 있을까요?

위 이벤트 처리 함수의 경우 다음과 같은 방법으로 작성할 수 있습니다.

dom.onclick = showValue();

dom.onclick = function() { 경고(this.value) ;}

코드 복사 코드는 다음과 같습니다.