우리는 JS가 객체 지향적이라는 것을 알고 있습니다. 객체 방향에 관해서는 클래스 개념을 포함하는 것은 불가피합니다. 일반적으로 C# 및 Java와 같은 강력하게 타이핑 된 언어에는 클래스를 정의하기 위해 고정 된 구문이 있습니다. JS의 차이점은 다양한 방법을 사용하여 자체 클래스와 객체를 구현할 수 있다는 것입니다. 몇 가지 일반적인 구현 방법이 있습니다.
1. 공장 방법
공장 메소드는 특정 객체 유형을 반환하는 공장 기능을 작성합니다.
코드 사본은 다음과 같습니다.
기능 CreateCar (Scolor, Idoors, IMPG)
{
var otempcar = 새로운 객체;
otempcar.color = Scolor;
otempcar.doors = Idoors;
otempcar.mpg = impg;
otempcar.showcolor = function ()
{
경고 (this.color);
}
OTEMPCAR을 반환합니다.
}
var ocar1 = createcar ( "빨간색", 4,23);
var ocar2 = createcar ( "파란색", 3,25);
Ocar1.showColor ();
OCAR2.ShowColor ();
이런 식으로 공장 기능이라고 할 때마다 새로운 객체가 생성됩니다. 그러나 문제는 새로운 객체가 생성 될 때마다 새로운 기능 쇼콜러가 생성되어야하며, 이는 각 객체에 자체 버전의 showcolor를 가지게되며 실제로 모든 객체는 동일한 기능을 공유합니다 객체의 메소드는 공장 함수 외부에서 정의 된 다음 객체에 다음과 같이 함수에 대한 포인터가 제공됩니다.
코드 사본은 다음과 같습니다.
함수 showcolor ()
{
경고 (this.color);
}
기능 CreateCar (Scolor, Idoors, IMPG)
{
var otempcar = 새로운 객체;
otempcar.color = Scolor;
otempcar.doors = Idoors;
otempcar.mpg = impg;
otempcar.showcolor = showcolor;
OTEMPCAR을 반환합니다.
}
var ocar1 = createcar ( "빨간색", 4,23);
var ocar2 = createcar ( "파란색", 3,25);
Ocar1.showColor ();
OCAR2.ShowColor ();
이런 식으로, 각 객체에 대해 자체 쇼콜러 기능을 만들 필요는 없지만이 기능에 대한 포인터 만 만들 수 있지만 기능은 객체의 메소드와 다릅니다. 따라서 생성자 방법이 도입됩니다.
2. 생성자 방법
생성자는 공장 함수와 매우 유사하며 예제 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 차량 (Scolor, Idoors, impg)
{
this.color = Scolor;
this.doors = Idoors;
this.mpg = impg;
this.showcolor = function ()
{
경고 (this.color);
}
}
var ocar1 = 새 차 ( "빨간색", 4,23);
var ocar2 = 새 차 ( "파란색", 3,25);
생성자에는 내부적으로 생성 된 객체가 없지만 키워드가 사용됩니다. 새 연산자를 사용하여 생성자를 호출 할 때 첫 번째 코드를 실행하기 전에 객체가 생성됩니다. 그러나 이것으로 어떤 문제가 발생합니까? 이 문제를 해결하기 위해 다음 프로토 타입 방법이 도입되었습니다.
3. 프로토 타입 방법
이 방법은 객체의 프로토 타입 속성을 활용하며, 이는 새로운 객체가 의존하는 프로토 타입으로 간주 될 수 있습니다. 여기서 빈 생성자를 사용하여 클래스 이름을 설정하십시오. 그런 다음 모든 메소드와 속성은 프로토 타입 속성에 직접 할당됩니다. 다음과 같이 :
코드 사본은 다음과 같습니다.
기능 차 ()
{}
car.prototype.color = "빨간색";
car.prototype.doors = 4;
car.prototype.mpg = 23;
car.prototype.drivers = New Array ( "Mike", "Sue");
car.prototype.showColor = function ()
{
경고 (this.color);
}
프로토 타입 방법은 값 만 직접 할당 할 수 있으며 매개 변수를 생성자에게 속성 초기화의 값을 전달할 수 없습니다. 이 방법을 사용할 때는 두 가지 문제가 발생합니다. 첫 번째 문제는 속성의 기본값이 이러한 방식으로 변경되기 전에 각 객체를 만들어야한다는 것입니다. 각 객체를 만들 때 필요한 속성 값을 직접 가질 수는 없습니다. 이것은 성가신 일입니다. 두 번째 문제는 속성이 객체를 지칭하는시기입니다. 기능 공유에는 문제가 없지만 객체 공유에는 문제가 있습니다. 각 인스턴스는 일반적으로 자체 객체를 구현해야하기 때문입니다.
다음과 같이 :
코드 사본은 다음과 같습니다.
var ocar1 = 새 차 ();
var ocar2 = 새 차 ();
ocar1.drivers.push ( "matt");
ALERT (OCAR1.DRIVER); // 출력 "Mike, Sue, Matt"
ALERT (OCAR2.DRIVER); // 출력 "Mike, Sue, Matt"
따라서 드라이버 속성은 객체에 대한 포인터 일 뿐이므로 모든 인스턴스는 실제로 동일한 객체를 공유합니다. 이러한 문제로 인해 다음 공동 사용 생성자 및 프로토 타입 방법을 소개합니다.
4. 혼합 생성자/프로토 타입 방법
이 방법의 아이디어는 생성자를 사용하여 객체의 모든 비 기능적 특성 (객체를 가리키는 일반 속성 및 속성 포함)을 정의하고 프로토 타입을 사용하여 객체의 기능 속성 (메소드)을 정의하는 것입니다. 결과적으로 모든 함수는 한 번만 생성되고 각 객체에는 고유 한 객체 속성 인스턴스가 있습니다. 샘플 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
기능 차량 (Scolor, Idoors, impg)
{
this.color = Scolor;
this.doors = Idoors;
this.mpg = impg;
this.drivers = new Array ( "Mike", "Sue");
}
car.prototype.showColor = function ()
{
경고 (this.color);
}
var ocar1 = 새 차 ( "빨간색", 4,23);
var ocar2 = 새 차 ( "파란색", 3,25);
ocar1.drivers.push ( "matt");
ALERT (OCAR1.DRIVER); // 출력 "Mike, Sue, Matt"
Alert (OCAR2.Drivers); // 출력 "Mike, Sue"
예제 코드에서 볼 수 있듯이,이 메소드는 이전 방법에서 동시에 두 가지 문제를 해결합니다. 그러나 이런 식으로 일부 개발자는 여전히 완벽하지 않다고 생각합니다.
5. 동적 프로토 타입 방법
우리는 대부분의 객체 지향 언어가 특성과 방법을 시각적으로 캡슐화한다는 것을 알 수 있습니다. 그러나 위의 방법의 쇼콜러 방법은 클래스 외부에서 정의됩니다. 따라서 그들은 동적 프로토 타입 접근법을 설계했습니다. 이 접근법의 기본 아이디어는 혼합 생성자/프로토 타입 접근법과 동일합니다. 유일한 차이점은 객체 방법의 위치입니다. 아래 그림과 같이 :
코드 사본은 다음과 같습니다.
기능 차량 (Scolor, Idoors, impg)
{
this.color = Scolor;
this.doors = Idoors;
this.mpg = impg;
this.drivers = new Array ( "Mike", "Sue");
if (car._initialized == "undefined")
{
car.prototype.showColor = function ()
{
경고 (this.color);
}
}
car._initialized = true;
}
이런 식으로 car.prototype.showcolor는 한 번만 생성됩니다. 이 종속성은이 코드가 다른 언어에서 클래스 정의와 비슷하게 만듭니다.
6. 혼합 공장 방법
이 접근법은 일반적으로 이전 접근법으로 사용할 수없는 해결 방법입니다. 그 목적은 다른 객체의 새로운 인스턴스 만 반환하는 가짜 생성자를 만드는 것입니다.
코드 사본은 다음과 같습니다.
기능 createcar ()
{
var otempcar = 새로운 객체;
otempcar.color = "빨간색";
otempcar.doors = 4;
otempcar.mpg = 23;
otempcar.showcolor = function ()
{
경고 (this.color);
};
OTEMPCAR을 반환합니다.
}
var car = 새 차 ();
새 연산자가 CAR () 생성자 내부에서 호출되므로 두 번째 새 연산자는 자동으로 무시됩니다. 생성자 내부에서 생성 된 객체는 변수 var로 다시 전달됩니다. 이 접근법은 객체 방법의 내부 관리 측면에서 고전적인 접근 방식과 동일한 문제가 있습니다. 따라서 적극 권장됩니다. 절대적으로 필요한 경우이 방법을 사용하지 마십시오.