JavaScript_javascript 기술에서 이 키워드를 사용하는 방법에 대한 자세한 설명

객체지향 프로그래밍 언어에서는 this 키워드에 매우 익숙합니다. 예를 들어 C, C#, Java 모두 이 키워드를 제공합니다. 학습 초기에는 어렵지만 일단 이해하고 나면 사용하기가 매우 편리하고 의미가 있습니다. JavaScript도 이 키워드를 제공하지만 기존 OO 언어보다 사용하기가 훨씬 더 "혼란"합니다.

JavaScript에서 이것을 사용하는 다양한 방법에 대해 혼란스러운 점을 살펴보겠습니다.

1. HTML 요소 이벤트 속성에 이 키워드 인라인을 사용합니다.

Division 요소

여기서 사용하는 가장 일반적인 방법은 javascirpt: EventHandler(this) 형식입니다. 그러나 실제로 여기에서 합법적인 JavaScript 문을 작성할 수 있습니다. 여기에서 클래스를 정의할 수 있습니다(그러나 이는 내부 클래스가 됩니다). 여기서 원칙은 스크립트 엔진이 div 인스턴스 개체의 익명 멤버 메서드를 생성하고 onclick이 이 메서드를 가리킨다는 것입니다.

2. DOM을 사용하는 이벤트 처리 함수에서 this 키워드를 사용하세요.

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

division 요소

<script> var div = document .getElementById ('elmtDiv'); <BR> div.attachEvent('onclick', EventHandler); <BR><br> function EventHandler() <br> { <BR> // 여기에서 사용하세요 <BR> } <BR> </script>

이때 EventHandler() 메소드의 this 키워드는 해당 객체가 IE의 윈도우 객체임을 나타냅니다. 이는 EventHandler가 단지 일반 함수이기 때문입니다. attachmentEvent 이후 스크립트 엔진의 호출은 div 개체 자체와 관련이 없습니다. 동시에 null과 동일한 EventHandler의 호출자 속성을 볼 수 있습니다. 이 메소드에서 div 객체 참조를 얻으려면 this.event.srcElement를 사용해야 합니다.

3. DHTML을 사용하여 이벤트 처리 함수에서 다음 키워드를 사용합니다.

division element

<script> <BR> var div = document.getElementById('elmtDiv') <BR> div.onclick = function() <BR> { <BR> // 여기에서 사용하세요 <BR> }; </script>

여기서 this 키워드가 나타내는 내용은 div 요소 개체 인스턴스입니다. 스크립트에서 DHTML을 사용하여 div.onclick에 EventHandler 메서드를 직접 할당하는 것은 div 객체 인스턴스. 이 방법과 첫 번째 방법의 차이점은 첫 번째 방법은 HTML 방법을 사용하고 여기서는 DHTML 방법입니다. 후자의 스크립트 구문 분석 엔진은 더 이상 익명 메서드를 생성하지 않습니다.

4. 클래스 정의에 다음 키워드를 사용하세요.

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

function JSClass()

{
var myName = 'jsclass'
this.m_Name = 'JSClass'

JSClass.prototype.ToString = function()
{
Alert(myName ', ' this.m_Name)

var jc = new JSClass(); .ToString() ;


이는 JavaScript 시뮬레이션 클래스 정의에서 사용되는 것입니다. 이는 다른 OO 언어의 상황과 매우 유사합니다. 단, 반드시 this 키워드를 이용하여 멤버 속성과 메소드를 참조해야 합니다. 위 프로그램을 실행하면 myName이 정의되지 않았다는 메시지가 나타납니다.

5. 스크립트 엔진의 내부 개체에 대한 프로토타입 메서드에 this 키워드를 추가합니다.





복사 코드

코드는 다음과 같습니다.

Function.prototype.GetName = function()
{
var fnName = this.toString()
fnName = fnName.substr(0, fnName.indexOf('(') );
fnName = fnName.replace(/^function/, '');
return fnName.replace(/(^s )|(s $)/g, ''); 🎜> function foo(){}
Alert(foo.GetName()); 비슷하지만 그다지 특별한 것은 없습니다

6. 2와 4를 결합하고 혼동되는 다음 키워드를 사용합니다.

코드 복사

코드는 다음과 같습니다. function JSClass() { this.m_Text = '분할 요소';

this.m_Element = document.createElement('DIV');

this.m_Element.innerHTML = this.m_Text;

this.m_Element.attachEvent('onclick' , this.ToString);

JSClass.prototype.Render = function()
{
document.body.appendChild(this.m_Element)
}

JSClass.prototype.ToString = function()
{
경고(this.m_Text)

var jc = new JSClass(); Render();
jc.ToString();


페이지가 실행되면 "division element"가 표시됩니다. "division element"를 선택하면 "정의되지 않음"이 표시됩니다.

7. CSS 표현식 표현식에 이 키워드를 사용하세요:

코드 복사


코드는 다음과 같습니다 :

: 표현식(this.parentElement.width) 높이: 표현식(this.parentElement.height);" > d> > ;

이는 1과 동일하다고 간주할 수 있습니다. 또한 div 요소 개체 인스턴스를 참조합니다. 그 자체.

8. 함수의 내부 함수에 다음 키워드를 사용하세요.





코드 복사


코드

function OuterFoo()
{
this.Name = '외부 이름'

function InnerFoo() var Name = ' 내부 이름'; return InnerFoo()()();
실행 결과에는 "내부 이름, 외부 이름"이 표시됩니다. 2번의 설명에 따르면 여기서의 결과는 "내부 이름, 정의되지 않음"이 더 합리적으로 보입니다. 그렇죠? 하지만 정확한 결과는 역시 전자입니다. 이는 JavaScript 변수 범위의 문제로 인한 것입니다. 자세한 내용은 "JScript의 'var' 키워드에 여전히 기사가 있는 것으로 나타났습니다." 기사를 참조하는 것이 좋습니다. 답장.

JavaScript에서 this의 사용법에 대해 많이 언급했지만 실제로 this의 가장 기본적인 특징은 OO 언어의 정의와 일치합니다. 겉보기에 혼란스러워 보이는 사용 방법이 너무 많은 이유는 JavaScript 언어(인터프리터 및 언어 자체의 내용) 자체가 구현 시 OO(객체 기반)를 따르기 때문입니다. 심지어 모든 데이터 유형도 객체입니다. 그런 슈퍼 객체. 그러나 이 언어는 런타임 시 완전한 OO 특성을 따르지 않으므로 이에 대한 참조에 혼란이 있습니다.

이것은 JavaScript에서 또 어디에 사용됩니까? 지금으로서는 이것이 제가 생각할 수 있는 전부입니다. 토론하고 추가해 주시면 감사하겠습니다.