JavaScript_Basic 지식으로 객체지향 클래스를 구현하는 방법에 대한 간략한 토론

객체는 사람들이 연구하고 싶어하는 모든 것입니다. 가장 단순한 정수부터 복잡한 비행기까지 객체로 간주할 수 있습니다. 이는 특정 사물뿐만 아니라 추상적인 규칙, 계획 또는 이벤트도 나타낼 수 있습니다. --바이두백과사전에서 인용

객체 지향 프로그래밍은 현재 가장 인기 있는 프로그래밍 모델입니다. 하지만 가장 실망스러운 점은 가장 널리 사용되는 프런트엔드 애플리케이션인 JavaScript가 객체지향 프로그래밍을 지원하지 않는다는 것입니다.

JavaScript에는 액세스 제어 문자가 없고, 클래스를 정의하는 키워드 class가 없으며, 상속을 위한 확장이나 콜론을 지원하지 않으며, 가상 기능을 지원하기 위해 virtual을 사용하지 않습니다. class 키워드 없이 Javascript가 클래스 정의를 구현하고 객체를 생성하는 방법을 살펴보겠습니다.

클래스를 정의하고 해당 클래스의 인스턴스 객체를 생성합니다

Javascript에서는 다음과 같이 함수를 사용하여 클래스를 정의합니다.

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

함수 모양()
{
var x=1;
var y=2;
}

의심스럽다고 말할 수 있을까요? 이것은 정의 기능이 아닌가? 예, 이것은 정의 함수입니다. Shape 함수를 정의하고 x와 y를 초기화합니다. 그러나 다른 각도에서 보면 이는 x와 y라는 두 개의 속성을 갖는 Shape 클래스를 정의하는 것이며 초기값은 각각 1과 2이다. 클래스는 클래스가 아니라 함수입니다.

그런 다음 다음과 같이 Shape 클래스의 aShape 객체를 생성할 수 있습니다.

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

var aShape = 새로운 모양()

공공 및 사유 재산 정의

aShape 개체를 생성했지만 해당 속성에 액세스하려고 하면 다음과 같은 오류가 발생합니다.

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

aShape.x=1

이는 var로 정의된 속성이 비공개임을 나타냅니다. 공용 속성을 정의하려면 이 키워드를 사용해야 합니다.

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

함수 모양()
{
This.x=1;
This.y=2;
}

이런 방식으로 다음과 같은 Shape 속성에 액세스할 수 있습니다.

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

aShape.x=2

좋아, 위의 코드를 기반으로 요약할 수 있습니다. var를 사용하여 클래스의 비공개 속성을 정의하고 이를 사용하여 클래스의 공개 속성을 정의합니다.

공개 및 비공개 방법 정의

Javascript에서 함수는 Function 클래스의 인스턴스입니다. 따라서 함수도 객체이므로 함수를 생성할 수 있습니다. 클래스에 함수를 할당하면 이 속성 변수는 실행 가능한 함수이므로 메서드라고 부를 수 있습니다. 코드는 다음과 같습니다.

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

함수 모양()
{
var x=0;
var y=1;
This.draw=function()
{
            //인쇄;
};
}

위 코드에서 draw를 정의하고 여기에 함수를 할당했습니다. 다음으로 OOP에서 공개 메서드라고 하는 aShape를 통해 이 함수를 호출할 수 있습니다.

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

aShape.draw()

var로 정의하면 이 그리기는 비공개가 됩니다. 이를 OOP에서는 비공개 메서드라고 합니다.

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

함수 모양()
{
var x=0;
var y=1;
var 그리기=함수()
{
            //인쇄;
};
}

이렇게 하면 aShape.draw를 사용하여 이 함수를 호출할 수 없습니다.

생성자

Javascript는 OOP를 지원하지 않으며 물론 생성자가 없습니다. 그러나 생성자를 직접 시뮬레이션하여 객체가 생성될 때 자동으로 호출되도록 할 수 있습니다.

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

함수 모양()
{
var init = 함수()
{
//생성자 코드
};
초기화();
}

Shape의 마지막에는 init 함수를 인위적으로 호출했습니다. 그런 다음 Shape 객체가 생성되면 항상 init가 자동으로 호출되고 생성자를 시뮬레이션할 수 있습니다.

매개변수가 있는 생성자

생성자가 매개변수를 사용하도록 하려면 어떻게 해야 하나요? 사실, 함수의 매개변수 목록에 전달할 매개변수를 작성하기만 하면 됩니다.

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

함수 모양(ax,ay)
{
var x=0;
var y=0;
var init = 함수()
{
//생성자
         x=ax;
y=ay;
};
초기화();
}

이런 방법으로 다음과 같은 개체를 만들 수 있습니다.

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

var aShape = 새 모양(0,1)

정적 속성 및 정적 메서드

Javascript에서 정적 속성과 메서드를 어떻게 정의하나요? 아래와 같이:

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

함수 형태(ax,ay)
{
var x=0;
var y=0;
var init = 함수()
{
//생성자
         x=ax;
y=ay;
};
초기화();
}
Shape.count=0; //정적 속성 개수를 정의합니다. 이 속성은 개체가 아닌 클래스에 속합니다.
Shape.staticMethod=function(){};//정적 메서드 정의

정적 속성과 메서드를 사용하면 다음과 같이 클래스 이름을 사용하여 액세스할 수 있습니다.

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

경고( aShape.count );
aShape.staticMethod()

참고: 정적 속성과 메서드는 공개입니다. 아직까지는 정적 속성과 메서드를 비공개로 만드는 방법을 모르겠습니다~

메소드에서 이 클래스의 공개 및 비공개 속성에 액세스합니다.

클래스 메소드에서 자신의 속성에 액세스합니다. Javascript에는 공개 속성과 비공개 속성에 대한 액세스 방법이 다릅니다.

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

함수 형태(ax,ay)
{
var x=0;
var y=0;
This.gx=0;
This.gy=0;
var init = 함수()
{
           x=ax;//개인 속성에 액세스하려면 변수 이름을 직접 작성하세요.
y=ay;
This.gx=ax;//공용 속성에 접근하려면 변수 이름 앞에 this.
를 추가해야 합니다. This.gy=ay;
};
초기화();
}

참고사항

저자의 경험에 따르면 클래스의 이것이 항상 객체 자체를 가리키는 것은 아닙니다. 더구나 함수와 클래스는 함수로 정의되기 때문에 이로 인해 일부 문제가 발생할 수 있습니다. 사소한 문제.

이 포인터가 오류를 가리키는 상황은 일반적으로 이벤트 처리에서 발생합니다. 이벤트가 트리거되면 시스템이 멤버 함수를 호출합니다. this 포인터는 더 이상 우리 자신의 개체가 아닙니다. 물론 멤버 함수에서 이것을 호출하면 확실히 오류가 발생합니다.

해결책은 클래스 정의 시작 시 이를 개인 속성에 저장하는 것입니다. 나중에 이 속성을 사용하여 이를 대체할 수 있습니다. 매우 안전하고 걱정없는 포인터를 사용하기 위해 이 방법을 사용합니다~

이 문제를 해결하기 위해 코드를 수정해 보겠습니다. Part 6의 코드를 비교하면 다음과 같은 내용을 이해할 수 있습니다.

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

함수 형태(ax,ay)
{
var _this=this; //혼란하지 않도록 저장하고 나중에 _this로 바꾸세요
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = 함수()
{
           x=ax;//개인 속성에 액세스하려면 변수 이름을 직접 작성하세요.
y=ay;
​​​​ _this.gx=ax;//공용 속성에 접근하려면 변수 이름 앞에
를 추가해야 합니다. ​​​​ _this.gy=ay;
};
초기화();
}

위에서 우리는 Javascript에서 클래스를 정의하고, 클래스의 객체를 생성하고, 공개 및 비공개 속성과 메서드를 생성하고, 정적 속성과 메서드를 생성하고, 생성자를 시뮬레이션하고, 오류가 발생하기 쉬운 방법에 대해 논의했습니다.

Javascript에서의 OOP 구현에 대한 이야기는 여기까지입니다. 일반적으로 Javascript는 클래스를 정의하는 데 사용되며 위의 코드는 객체를 생성하기에 충분합니다. 물론 mootools나 프로토타입을 사용하여 클래스를 정의하고 객체를 생성할 수도 있습니다. 저는 mootools 프레임워크를 사용했는데 더 완벽한 Javascript 클래스 시뮬레이션을 갖추고 있으며 관심 있는 독자가 사용해 볼 수 있다고 생각합니다. 물론 프레임워크를 사용하는 경우 웹페이지에 관련 js 헤더 파일을 포함해야 하므로 독자들이 프레임워크 없이도 클래스를 만들 수 있기를 바랍니다. 이렇게 하면 코드가 더 효율적이고 여러분도 할 수 있습니다. 보세요, 간단한 클래스를 만드는 것은 어렵지 않습니다~