물체는 사람들이 가장 간단한 정수에서 복잡한 항공기 등에 이르기까지 공부하고 싶은 모든 것입니다. 이는 구체적인 것뿐만 아니라 추상 규칙, 계획 또는 이벤트를 나타낼 수 있습니다. -Baidu 백과 사전에서 인용되었습니다
객체 지향 프로그래밍은 현재 가장 인기있는 프로그래밍 모델입니다. 그러나 가장 널리 사용되는 프론트 엔드 자바 스크립트가 객체 지향을 지원하지 않는다는 것은 실망 스럽습니다.
JavaScript에는 액세스 제어 문자가 없으며 키워드 클래스를 정의하지 않으며 상속 된 확장 또는 콜론을 지원하지 않으며 가상 기능을 사용하여 가상 기능을 지원하지 않습니다. 그러나 JavaScript는 유연한 언어입니다. 키워드 클래스가없는 JavaScript가 클래스 정의를 구현하고 객체를 만드는 방법을 살펴 보겠습니다.
클래스를 정의하고 클래스의 인스턴스 개체 생성
JavaScript에서는 다음과 같이 기능을 사용하여 클래스를 정의합니다.
코드 사본은 다음과 같습니다.
기능 모양 ()
{
var x = 1;
var y = 2;
}
의심 할 수 있습니까? 이것이 정의 된 기능이 아닙니까? 맞습니다. 이것은 결정적인 기능입니다. 모양 함수를 정의하고 x와 y를 초기화합니다. 그러나 다른 관점에서 보면 두 개의 속성 x와 y를 포함하는 모양 클래스를 정의하고 초기 값은 각각 1과 2입니다. 그러나 클래스를 정의하는 키워드는 클래스가 아닌 기능입니다.
그런 다음 다음과 같이 모양 클래스의 객체 ashape를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
var ashape = 새로운 모양 ();
공공 및 민간 부동산을 정의합니다
우리는 Ashape 객체를 만들었지 만 속성에 액세스하려고 할 때 다음과 같은 오류가 발생합니다.
코드 사본은 다음과 같습니다.
Ashape.x = 1;
이것은 Var로 정의 된 속성이 비공개임을 보여줍니다. 이 키워드를 사용하여 공개 속성을 정의해야합니다.
코드 사본은 다음과 같습니다.
기능 모양 ()
{
this.x = 1;
this.y = 2;
}
이러한 방식으로 다음과 같은 모양 특성에 액세스 할 수 있습니다.
코드 사본은 다음과 같습니다.
Ashape.x = 2;
자, 위의 코드에서 다음과 같이 요약 할 수 있습니다. Var를 사용하여 클래스의 개인 속성을 정의하고 클래스의 공개 속성을 정의하는 데이를 사용합니다.
공개 및 개인 방법을 정의합니다
JavaScript에서 함수는 함수 클래스의 인스턴스이며 함수는 객체에서 간접적으로 상속되므로 함수는 객체이기도합니다. 따라서 할당 메소드를 사용하여 함수를 만들 수 있습니다. 물론 클래스의 속성 변수에 함수를 할당 할 수도 있습니다. 그런 다음이 속성 변수는 실행 가능 함수이므로 메소드라고 할 수 있습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 모양 ()
{
var x = 0;
var y = 1;
this.draw = function ()
{
//인쇄;
};
}
위의 코드에서 드로우를 정의하고 함수를 할당합니다. 아래에서 우리는 Ashape를 통해이 기능을 호출 할 수 있습니다. Ashape는 다음과 같은 OOP의 공개 메소드라고합니다.
코드 사본은 다음과 같습니다.
Ashape.draw ();
var로 정의되면 추첨은 개인이되며, 이는 다음과 같은 OOP의 개인 메소드라고합니다.
코드 사본은 다음과 같습니다.
기능 모양 ()
{
var x = 0;
var y = 1;
var draw = function ()
{
//인쇄;
};
}
이렇게하면 Ashape.Draw를 사용 하여이 기능을 호출 할 수 없습니다.
건설자
JavaScript는 OOP를 지원하지 않으므로 물론 생성자가 없습니다. 그러나 생성자를 스스로 시뮬레이션하고 생성 될 때 객체를 자동으로 호출 할 수 있습니다. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 모양 ()
{
var init = function ()
{
// 생성자 코드
};
init ();
}
모양이 끝날 때, 우리는 인위적으로 init 함수라고 불렀습니다. 그런 다음 모양 객체를 생성 할 때 Init는 항상 자동으로 호출되어 생성자를 시뮬레이션 할 수 있습니다.
매개 변수가있는 생성자
생성자가 매개 변수를 가져 오는 방법은 무엇입니까? 사실, 그것은 매우 간단합니다. 다음과 같은 함수 매개 변수 목록에 전달할 매개 변수를 작성하십시오.
코드 사본은 다음과 같습니다.
기능 모양 (Ax, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
//건설자
x = Ax;
y = ay;
};
init ();
}
이렇게하면 다음과 같은 객체를 만들 수 있습니다.
코드 사본은 다음과 같습니다.
var ashape = 새로운 모양 (0,1);
정적 특성 및 정적 방법
JavaScript에서 정적 특성 및 메소드를 정의하는 방법은 무엇입니까? 아래 그림과 같이 :
코드 사본은 다음과 같습니다.
기능 모양 (Ax, ay)
{
var x = 0;
var y = 0;
var init = function ()
{
//건설자
x = Ax;
y = ay;
};
init ();
}
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 = function ()
{
x = ax; // 개인 속성을 추가하고 변수 이름을 직접 씁니다
y = ay;
this.gx = ax; ax; // 공개 속성에 액세스하려면 변수 이름 앞에 이것을 추가해야합니다.
this.gy = ay;
};
init ();
}
이것에 대해 주목해야 할 것들
내 경험에 따르면, 수업에서 이것은 항상 우리의 대상 자체를 가리키는 것은 아닙니다. 주된 이유는 JavaScript가 OOP 언어가 아니며 기능과 클래스가 함수에 의해 정의되기 때문입니다. 물론 약간의 문제가 발생할 수 있습니다.
이 포인터가 잘못된 상황은 일반적으로 이벤트 처리 중입니다. 특정 개체의 멤버 기능이 이벤트에 응답하기를 원합니다. 이벤트가 트리거되면 시스템은 회원 기능을 호출합니다. 그러나 통과 된이 포인터는 더 이상 우리 자신의 대상이 아닙니다. 물론 현재 회원 기능에서이를 호출하는 것은 오류가 될 것입니다.
해결책은 이것을 정의 클래스의 시작 부분에서 사유 속성에 저장하는 것입니다. 나중에, 우리는이 대신이 속성을 사용할 수 있습니다. 이 방법 으로이 포인터를 사용하고 있습니다.이 방법은 매우 안전하고 걱정스럽지 않습니다 ~
이 문제를 해결하기 위해 코드를 수정합시다. 6 부의 코드를 비교하면 다음을 이해할 수 있습니다.
코드 사본은 다음과 같습니다.
기능 모양 (Ax, ay)
{
var _this = this; // 이것을 저장하고 _this를 사용하여 미래에 이것에 의해 혼란스럽지 않도록하십시오.
var x = 0;
var y = 0;
_this.gx = 0;
_this.gy = 0;
var init = function ()
{
x = ax; // 개인 속성을 추가하고 변수 이름을 직접 씁니다
y = ay;
_this.gx = ax; // 공개 속성에 액세스하려면 변수 이름 앞에 이것을 추가해야합니다.
_this.gy = ay;
};
init ();
}
위에서 우리는 JavaScript에서 클래스를 정의하고, 클래스 객체를 만들고, 공개 및 개인 속성 및 방법을 만들고, 정적 특성 및 방법을 만들고, 생성자를 시뮬레이션하고,이 오류가 발생하기 쉬운 방법에 대해 이야기했습니다.
JavaScript의 OOP 구현에 관한 모든 것입니다. 위는 가장 실용적인 내용입니다. 일반적으로 JavaScript는 클래스를 정의하고 위의 코드를 사용하여 객체를 생성하면 충분합니다. 물론, mootools 또는 프로토 타입을 사용하여 클래스를 정의하고 개체를 만들 수도 있습니다. 나는 mootools 프레임 워크를 사용했으며 매우 기분이 좋습니다. JavaScript 클래스 시뮬레이션에 더 완벽하며 클래스 상속을 지원합니다. 관심있는 독자들은 그것을 시도 할 수 있습니다. 물론 프레임 워크를 사용하는 경우 웹 페이지에 관련 JS 헤더 파일을 포함해야합니다. 따라서 여전히 독자들이 프레임 워크없이 수업을 만들 수 있기를 바랍니다. 이런 식으로 코드가 더 효율적이며 간단한 클래스를 만드는 것이 번거롭지 않다는 것을 알 수 있습니다.