얕은 기술부터 deep_javascript 기술까지 JavaScript 클래스 이해

시기: 2006-3-6
저자: Qihongting
소개:
원본 출처: www.51js.com
설명: 2004년 6월 15일
번역:

I 최근 Wuyou Script에서 놀다가 몇몇 글에 답글을 달았는데, 모두가 볼 수 있는 글을 하나도 작성하지 않아서 좀 불안해서 Class Encapsulation에 올렸어야 할 글을 이렇게 적었습니다. 상대적으로 추운 지역이라는 점을 고려하여, 이 글이 더 많은 친구들에게 도움이 되기를 바라며 여기에 올립니다.

클래스가 무엇인가요?
프로그래밍을 처음 접하는 많은 친구들은 클래스를 이해하지 못할 수도 있습니다. 사실 클래스는 우리 현실 세계의 시뮬레이션이므로 "카테고리" 또는 "유형"이라고 부르는 것이 더 쉬울 수도 있습니다. 예를 들어, "인간"과 같은 동물은 클래스이고, 특정 사람은 "인간" 클래스의 인스턴스입니다. (지구상에는 60억 명이 넘는 인구가 있습니다.) "인간" 클래스에는 하나만 있습니다. 남자와 여자도 인간이 아닌가? 왜 하나만 있을 수 있나요? 사실 여기서는 상속에 대해 이야기할 예정인데, 이에 대해서는 나중에 논의할 것이므로 계속해서 읽어보시기 바랍니다.
수업은 어떻게 생성하나요?
C에서는 클래스가 클래스로 선언됩니다. C와 달리 JavaScript는 함수와 동일한 함수를 사용하여 선언합니다. 이로 인해 Jscript를 배우는 친구들은 클래스와 함수를 혼동하게 됩니다. 그러나 오랫동안 사용해보면 자연스럽게 이해하게 될 것입니다. 이 글은 객체지향 프로그래밍을 공격하고 싶은 친구들을 위해 쓴 글이므로 한꺼번에 너무 깊게 논의할 생각은 없습니다.
아래에서 이 클래스의 정의를 참조하세요.


function WuYouUser()
{
this.Name }

위의 코드는 WuYouUser를 정의합니다. (걱정 없는 사용자) 클래스에는 이름 속성이 있습니다. 이름은 WuYouUser 클래스의 속성입니다.
클래스에는 고정된 속성이 있지만 클래스의 인스턴스에는 서로 다른 속성 값이 있습니다. 예를 들어 나는 '사람' 카테고리에 속하고 성별은 남자이고, 나에게도 '사람' 카테고리에 속하는 여자 동급생이 있습니다. " 클래스이지만 성별 속성 값이 여성입니다.
그러면 클래스 인스턴스를 선언하는 방법은 무엇입니까? 매우 간단합니다.

var Wo = new WuYouUser(); //예제 1: "I"
var Biyuan = new WuYouUser() //예제 2: "Biyuan" 죄송합니다. ... 헤헤)

클래스 속성
이 Wo(나)는 WuYouUser가 부여한 모든 것(이름 속성, 성별 속성 및 연령 속성)을 포함하는 WuYouUser 클래스의 인스턴스입니다.

Wo.Name = "Weeping Red Pavilion"

아주 간단하죠? 내 이름이 출력되는지 확인하려면

window.document.write(Wo.Name);을 실행해 보세요. Qihongting?

Biyuan 속성과 동일

Biyuan.Name = "Biyuan";

실행

window.document.write(Biy uan. Name); 🎜>
"Biyuan"이 출력되는 것을 볼 수 있습니다. 이는 Biyuan과 Wo도 WuYouUser 클래스의 인스턴스이지만 서로 다른 속성 값을 가진 서로 다른 개체임을 의미합니다.

속성은 기본값으로 설정할 수 있습니다. Wuyou에는 각 사람이 게시한 게시물 수에 대한 기록이 있습니다. 또한 WuYouUser 클래스

함수에 게시물 수에 대한 ArticleCount 속성을 추가합니다. ()
                                                                                             수량은 0입니다. 위 코드에서는 ArticleCount 속성이 직접 0으로 설정되어 있는 것을 확인할 수 있습니다.

다음 코드를 실행할 수 있습니다:

var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount)

0을 볼 수 있습니다. 가 출력되어 ArticleCount 속성을 기본값인 0으로 성공적으로 설정했음을 나타냅니다.

Method of class
메소드라는 단어를 설명하면 이해하기 쉽지 않을 것 같습니다. 행동으로. 사람에게는 잠자기, 먹기, 걷기 등과 같은 많은 일반적인 행동이 있습니다. 이제 WuYouUser 클래스에 게시 방법을 추가합니다.

                                                                                                > >                                           그런 버튼이요? >. 우리의 게시물 수와 1!
*참고: 공룡 레벨이 추가되는 방식이므로... 다들 올려주세요. . .
                                                           >          // 이제 이 메서드가 정의되었으니 시도해 보겠습니다.

var Wo = new WuYouUser() ;
Wo.NewArticle()
document.write(Wo. ArticleCount) 출력이 1인 것을 볼 수 있습니다. 이는 성공적으로 게시되었음을 의미합니다! 그야말로 공룡 수준에 한발 더 다가선 역사적 의미가 있는 순간이다.

정적 속성

정적 속성은 공용 속성이라고도 하며 특정 클래스의 인스턴스에 속하지 않고 특정 클래스에 직접 속합니다.

예를 들어 Wuyou 사용자에게는 등록된 사용자 수라는 속성이 있습니다. 이는 Qihongting이나 다른 누구에게도 속하지 않고 전체 Wuyou 사용자에게 속합니다.
정적 속성의 선언 방법은 다음과 같습니다.

클래스 이름.prototype.Attribute 이름 = 속성 값;

예를 들어 WuYouUser 클래스에 등록된 사용자 수를 정의합니다.

WuYouUser.prototype.Count = 0; >
그럼 어떻게 읽어야 할까요? 두 가지 방법이 있습니다:

1. WuYouUser.prototype.Count를 직접 사용
2. Wo.Count를 사용

둘 다 차이가 없으며 둘 다 0을 얻습니다

두 가지 읽기 방법이 있지만 변경할 때는 특히 주의해야 합니다.

var Biyuan = new WuYouUser()
WuYouUser.prototype ; document.write(Wo.Count);
document.write(Biyuan.Count);


둘 다 Count 속성이 1, 즉 WuYouUser.prototype임을 알 수 있습니다. Count는 각 인스턴스에 영향을 미치는 해당 속성을 변경합니다. 실제로 Wo와 Biyuan 및 WuYouUser.prototype.Count의 Count 속성은 기본적으로 동일합니다.

이제 다른 코드를 살펴보세요.


var Biyuan = new WuYouUser();

Biyuan.Count; direct Biyuan의 Count 속성 변경
document.write(Biyuan.Count); // 출력 1
document.write(WuYouUser.prototype.Count) // 출력 0
document.write(Wo.Count) ; //동일한 출력은 0입니다. 이유는 무엇입니까?


인스턴스의 정적 속성 값을 직접 수정하면 다른 인스턴스나 클래스의 정적 속성도 동기화되지 않는 것을 볼 수 있나요? 이는 직접 수정하면 인스턴스가 인스턴스에 속하는 Count 속성을 생성하기 때문입니다. 현재 Biyuan.Count는 WuYouUser.prototype.Count와 동일하지 않으며 Wo.Count와도 동일하지 않습니다. 속성은 Biyuan 자신의 것이며 향후 변경 사항은 Biyuan에만 영향을 미칩니다.

따라서 특별한 필요가 없다면, 읽기나 할당 시 WuYouUser.prototype.Count를 균일하게 사용하여 문제를 방지하는 것이 좋습니다!


정적 메서드
정적 속성과 유사하며 클래스 자체에 속하는 공용 메서드라는 또 다른 이름도 있습니다.

정적 메서드를 정의하는 방법은 다음과 같습니다.

클래스 이름 메서드 이름 = 함수(매개변수 1, 매개변수 2...매개변수 n)
{
//메서드 code 또한 두 가지 방법이 있습니다. 🎜>
1. WuYouUser.prototype.AddOne()을 직접 사용
2. 특정 인스턴스의 AddOne()을 사용

이 두 가지 방법에는 차이가 없습니다. ：

var Wo = new WuYouUser(); var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0

Wo.AddOne(); write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count) ) // 1

    WuYouUser .prototype.AddOne(); 2
document.write(Biyuan.Count); // 2

//Wo.AddOne()을 사용하든 WuYouUser를 사용하든 효과는 동일함을 알 수 있습니다. .prototype.AddOne(). WuYouUser.prototype.Count에 1을 더하는 것입니다.
이제 코드를 살펴보겠습니다.

function NewClass() // 위의 WuYouUser 클래스는 적합하지 않습니다. 이 예제의 코드에서 새 클래스 NewClass를 선언했습니다.
                                                                                          {
this.Name = NewName;
}

var Wo = new NewClass()
Wo.ChangeName( "Zheng Yuntao"); //본명


Wo.Name이 실제로 "Zheng Yuntao"로 변경된 것을 볼 수 있습니다. 이 방법이 효과가 있는 것 같은데, 여기에 어떤 비밀이 있는 걸까요?
아래 코드를 살펴보세요. 클래스와 ChangeName의 정의는 동일하지만 아래 코드를 변경합니다.

.write(NewClass.Name); //정의되지 않음, 즉 정의되지 않음
document.write(NewClass.prototype.Name); //정윤타오
var Wo = new NewClass();
document.write( Wo.Name); >
우리는 NewClass.prototype.Name 정적 속성을 정의하지 않았지만 컴파일러가 우리를 위해 하나를 추가한 것을 볼 수 있습니다.
그런데 아래 출력된 Wo.Name을 보세요. "Zheng Yuntao"가 아니라 원래 기본값인 "Weeping Red Pavilion"이 무슨 뜻인가요?
실제로는 매우 간단합니다. NewClass의 정의에는 이미 Name 속성이 있으므로 NewClass.prototype.Name과 동일하지 않은 자체 Name 속성도 있으므로 여전히 그렇습니다.

그러면 이전 예제에서 Wo.ChangeName("Zheng Yuntao")을 실행하더라도 Wo.Name 속성을 변경할 수 있는 이유는 무엇입니까? 실제로 여기에서 Wo.Count의 값을 변경하는 것과 같습니다. 컴파일러는 Wo에 ChangeName 메서드를 자동으로 추가합니다. 이 메서드 코드는 NewClass.prototype.ChangeName과 동일하지만 Wo.ChangeName은 Wo 인스턴스에 고유합니다. , NewClass.prototype.ChangeName이 아닙니다!

분석에 따르면 정적 메서드에서는 특별한 목적이 있고 여기에서 작동 메커니즘을 명확하게 이해할 수 있는 경우가 아니면 인스턴스 자체의 속성을 참조하기 위해 이와 같은 키워드를 사용하지 않는 것이 좋습니다!

이것을 정적 메서드에서 사용해야 하는 경우 이를 매개 변수로 직접 전달할 수 있습니다.


NewClass.ChangeName = function(This,NewName) //여기에 참고하세요. 이게 아니고 이거예요
                                                                                                               생성자님, 아래 코드를 살펴보겠습니다. >              클래스 정의는 클래스의 속성과 메서드를 정의할 뿐만 아니라 일부 코드를 추가할 수도 있습니다. 인스턴스 선언 과정에서 실행되는 클래스 생성자의 코드!
실제로 클래스 속성과 클래스 메서드는 생성자에 정의되어 있습니다.


function WuYouUser()
this .Name = "Crying Red Pavilion"; 🎜>          반환;                            Document.write(Wo.Name ; Sex 속성은 return; 뒤에 있으며 WuYouUser 클래스의 생성자는 return이 발생하면 실행을 중지합니다. 즉, this.Sex = "Male" 줄은 실행되지 않습니다. 모두!
생성자는 매개변수를 가질 수 있으며, 매개변수 값은 인스턴스 선언 시 전달됩니다.

function WuYouUser(Name)
This.Name = Name; var Wo = 새로운 WuYouUser("囧红丁"); >function Sum(a, b)
{
this.a = a;
this.b = b
return this.a this.b;       }
                    (Sum(12, 23)); //출력은 12와 23, 35의 합입니다.
var Obj = new Sum(12,23)
document.write(Obj.a) // 12
document.write(Obj.b) // 23


정말 굉장한 느낌이죠? 이 글을 쓰면서 정말 대단하다는 생각이 들었습니다. 하하!

하지만 클래스를 함수로 사용하지 않는 것이 좋습니다! 필요한 것이 함수라면 혼동을 피하기 위해 클래스 대신 함수로 직접 작성하시기 바랍니다.

상속
객체 지향 프로그래밍에서 상속이라는 단어는 매우 중요합니다. JavaScript는 실제 객체 지향 언어는 아니지만 VB와 같은 객체 기반 언어이며 상속 메커니즘도 제공합니다. .

글의 시작 부분에서 남성과 여성에 대해 이야기했습니다. 이들 역시 서로 다른 두 클래스이지만 동일한 속성과 방법을 가지고 있습니다. 이러한 동일한 특성은 다른 클래스에서도 나타납니다. 즉, 남자와 여자는 "사람"의 모든 특성을 상속받습니다! 그러나 남자와 여자는 다르며 프로그래밍 언어의 상속은 동일합니다. 클래스 A가 다른 클래스 B를 상속받는 경우 클래스 B는 클래스 A의 상위 클래스이고 클래스 A는 클래스 B의 파생 클래스이기도 합니다. 하위 카테고리로 알려져 있습니다. 예를 들어, 인간은 인간의 파생 클래스이고 인간은 인간의 부모 클래스입니다. 가장 높은 수준의 클래스를 기본 클래스라고 합니다. 상상해 보면 남자는 사람에게서 상속받고, 남자는 남자에게서 상속받으며, 사람은 남자의 기본 클래스, 남자는 남자의 아버지 클래스로 이해될 수 있습니다.
외부: 다중 상속

여기에 다중 상속 주제가 포함되지만 JavaScript만 배우면 볼 필요가 없습니다. JavaScript는 다중 상속을 제공하지 않기 때문에 그런 종류의 내용이 없습니다. 정확하게 말하면 다중 상속을 구현하는 간단하고 표준적인 방법입니다(실제로 이를 달성하는 방법이 있지만 조금 더 번거롭고 꼭 필요한 것은 아닙니다).

C에는 다중 상속이라는 개념이 있습니다. 여기서는 JavaScript에 대해 논의하고 있으므로 이에 대해서는 언급하지 않겠습니다. 단지 참고용으로 몇 가지 아이디어만 이야기하고 싶습니다.

위의 소년 상속 문제에서 소년은 실제로 남자로부터 상속을 받을 뿐만 아니라 자식 클래스(남자와 여자 모두)로부터도 상속을 받습니다. 따라서 남자와 여자라는 두 클래스를 동시에 상속받습니다. 여러분, 이것을 다중 상속이라고 합니다.

그럼 이 질문은 그만하고 본론으로 돌아가겠습니다.

먼저 첫 번째 클래스의 정의를 살펴보겠습니다.                   .Name)
}

// 이 클래스는 속성 이름을 정의합니다. 기본값은 "Weeping Red Pavilion"입니다. 🎜>
// 이제 두 번째 클래스의 정의를 확인하세요.

function B()
{
this.Sex = "Male"
Alert(this.Sex) ;
} }

//정의 Sex 속성이 있으며 기본값은 "Male"입니다.

//상속 방식은 subclass.prototype = new parent class() ;
//이제 클래스 B가 클래스 A를 상속받도록 합시다:

B.prototype = new A();

                                                                                                           '를 표시한 다음 '남성'을 표시합니다

위의 결과를 보면 클래스 B가 클래스 A를 상속하고 클래스 A의 Name 속성을 가지며 클래스 A의 생성자를 실행하고 클래스 A의 생성자가 클래스 B의 생성자가 실행되기 전에 실행됨을 알 수 있습니다. 따라서 이를 사용하여 부모 클래스를 재정의하고 부모 클래스의 특정 속성의 기본값을 재설정하는 방법을 구현할 수 있습니다. ";
this.Show = function()
" }
경고 (this.Name);
}

function B()
{
this.Name = "Zheng Yuntao";
this.Show = function()
                             보기 method");
                             ; = new B();
Obj.Show();

결과적으로 세 개의 경고 창이 나타났습니다. 첫 번째 콘텐츠는 경고 실행인 Qihongting이었습니다. (this.Name)은 클래스 A의 생성자에 있습니다. 당시에는 클래스 B의 생성자가 아직 실행되지 않았기 때문에 Name 속성 값이 "Crying Red Pavilion"이었습니다. 두 번째 내용은 "Zheng Yuntao"입니다. ". "Zheng Yuntao"의 경우 클래스 B의 생성자에서 이름이 재할당되므로 클래스 B의 경고(this.Name)입니다. 마지막으로 Obj.Show()가 호출되고 A 클래스의 Show 메서드에서 Show가 실행되지 않지만("This is the Show method of class A" 표시) 클래스 B의 Show가 실행됩니다("This is 클래스 B")의 Show 메서드. Show 메서드"), Show 메서드가 재정의된 것이 분명합니다.

객체로서의 클래스의 속성과 메소드(간결하게 표현하는 방법을 몰라서 이렇게 긴 제목을 사용했습니다)
여기서 이런 얘기를 하는지 모르겠네요 조금 혼란스럽지만 그렇다고 생각합니다. 이 글의 목적은 사람들이 수업의 모든 측면을 이해하도록 하는 것이기 때문에 이 글을 언급하지 않고는 완성되지 않을 것입니다.

이 섹션의 제목을 읽고 나면 클래스가 클래스라는 사실이 이상하게 느껴질 수 있는데 어떻게 "객체로 사용"할 수 있습니까? JavaScript에서는 클래스를 포함한 모든 것이 객체입니다! 객체는 속성과 메서드를 가질 수 있고, 클래스도 이를 가질 수 있습니다. 그러나 이는 위에서 언급한 정적 속성 및 정적 메서드와 혼동되기 매우 쉽기 때문에 둘 사이의 차이점을 주의 깊게 이해해야 합니다.

클래스 정의:
function WuYouUser()
{
this.Name = "Crying Red Pavilion"
}

​​​​// 클래스를 개체 속성으로 정의합니다.

WuYouUser.Url = "http://www.51js.com"; //정적 속성의 정의는 다음과 같습니다. WuYouUser.prototype.Url = "http:// www.51js.com";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.51js.com
document.write(Wo. Url) / /정의되지 않음, 즉 정의되지 않았습니다! 여기 정의되지 않은 항목을 참고하세요

여기에서 Url 속성은 WuYouUser 자체가 소유하고 이를 변경하는 것은 다른 클래스 및 해당 하위 클래스와 아무 관련이 없음을 알 수 있습니다!

클래스의 속성을 참조하는 방법은 클래스 이름뿐입니다.

클래스를 객체로 정의하는 방법:


WuYouUser.ChangeUrl = function()
"http://51js.com "
                                ~ ~ ChangeUrl 메소드는 WuYouUser 개체에 속하므로 WuYouUser 자체를 참조합니다!

//아래 코드를 실행해 보세요:

document.write(WuYouUser.Url) // http://www.51js.com
WuYouUser.ChangeUrl() ;
document.write(WuYouUser.Url); // http://51js.com


분명히 ChangeUrl은 WuYouUser.Url의 값을 직접 수정하므로 http://가 출력될 수 있습니다. 나중에 51js.com

이 섹션을 이해하지 못하더라도 걱정하지 마세요. 프로그래밍에서는 이해할 수 있을 뿐 말로 표현할 수 없는 것들이 많아서 설명할 능력이 없습니다. 앞으로 코드를 더 작성해 보면 클래스를 사용하면 자연스럽게 알 수 있을 것입니다. 또한 JSVM 코드에 포함된 거의 모든 클래스에는 클래스를 사용하는 속성과 메서드가 있습니다. an object
자바스크립트로 작성되어 있지만 클래스의 개념을 이해하는데 도움이 될 것 같아요! [땀] 도움이 되었으면 좋겠습니다