JAVASCRIPT THIS 객체 지향_js 객체 지향에 대한 자세한 설명

학습 초기에는 어려워 보이지만 일단 이해하고 나면 사용하기가 매우 편리하고 의미가 있습니다. JavaScript도 이 키워드를 제공하지만 기존 OO 언어보다 사용하기가 훨씬 더 "혼란"합니다.
자바스크립트에서 이것을 사용하는 다양한 방법에 대해 혼란스러운 점을 살펴보겠습니다.
1. HTML 요소 이벤트 속성에 이 키워드를 인라인으로 사용하세요.

// 이
">division 요소

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

2. DOM을 사용하는 이벤트 처리 함수에서 this 키워드를 사용합니다.
division 요소

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

division 요소

여기서 this 키워드는 content는 div 요소 개체 인스턴스입니다. 스크립트에서 DHTML을 사용하여 EventHandler 메서드를 div.onclick에 직접 할당하는 것은 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() ;
jc.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()); 참조는 프로토타입이 추가된 클래스의 인스턴스입니다. 이는 4의 클래스 정의와 다소 유사하며 그다지 특별한 것은 없습니다. 6. 2&4와 결합하여 혼란스러운 이 키워드에 대해 이야기해 보겠습니다.
function JSClass()
{ this.m_Text = 'division 요소'; 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()
{
alert(this.m_Text)
}; var jc = new JSClass();
jc.Render();
jc.ToString();
페이지가 실행되면 "division element"라는 텍스트가 표시됩니다. Division 요소"를 선택하면 "정의되지 않음"이 표시됩니다.

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

분할 요소

division element

여기서는 1과 동일하다고 볼 수 있습니다. div 요소 객체 인스턴스 자체를 의미하기도 합니다.
8. 함수의 내부 함수에 this 키워드를 사용하세요.

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