JS_javascript 기술의 클래스 또는 객체 정의

우리는 JS가 객체 지향이라는 것을 알고 있습니다. 객체지향을 논할 때 클래스라는 개념을 빼놓을 수 없습니다. 일반적으로 C#이나 Java와 같은 강력한 형식의 언어에는 클래스를 정의하는 고정된 구문이 있습니다. JS와의 차이점은 다양한 메소드를 사용하여 자체 클래스와 객체를 구현할 수 있다는 것입니다. 일반적인 구현 방법에는 여러 가지가 있습니다.

1. 팩토리 메소드
팩토리 메소드는 특정 객체 유형을 반환하는 팩토리 함수를 생성하는 것을 의미합니다.

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

function createCar(sColor,iDoors,iMpg)
{
var oTempCar=new Object;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=function()
{
경고(this.color);
}
return oTempCar;
}
var oCar1=createCar("red",4,23);
var oCar2= createCar("blue", 3,25);
oCar1.showColor();
oCar2.showColor();

이러한 방식으로 팩토리 함수가 호출될 때마다 새로운 객체가 생성됩니다. 그러나 문제는 새로운 객체가 생성될 때마다 새로운 함수 showColor를 생성해야 하며, 이를 통해 각 객체는 자체적인 showColor 버전을 갖게 됩니다. 실제로 모든 객체는 동일한 기능을 공유하므로 개발자는 이 방법을 사용합니다. 객체의 팩토리 함수 외부에서 정의된 다음 객체에는 다음과 같이 이 함수를 가리키는 포인터가 제공됩니다.

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

function showColor()
{
Alert(this.color);
}
function createCar(sColor,iDoors,iMpg)
{
var oTempCar=new Object;
oTempCar.color=sColor;
oTempCar.doors=iDoors;
oTempCar.mpg=iMpg;
oTempCar.showColor=showColor;
return oTempCar;
}
var oCar1=createCar("red",4,23);
var oCar2=createCar("blue",3,25);
oCar1.showColor( );
oCar2.showColor();

이 방법을 사용하면 각 개체에 대해 자체 showColor 함수를 만들 필요가 없고 이 함수에 대한 포인터만 만들면 문제가 해결됩니다. 기능적으로는 객체 메서드를 좋아하지 않습니다. 그래서 생성자 메소드가 도입되었습니다.

2. 생성자 방식
생성자는 팩토리 함수와 매우 유사합니다.

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

function Car(sColor,iDoors,iMpg)
{
this.color=sColor;
this.doors=iDoors ;
this.mpg=iMpg;
this.showColor=function()
{
Alert(this.color);
}
}
var oCar1=new Car ("red",4,23);
var oCar2=new Car("blue",3,25);

생성자에는 다음이 있습니다. 내부적으로 생성된 객체는 없지만 이 키워드를 사용합니다. new 연산자를 사용하여 생성자를 호출하면 코드의 첫 번째 줄을 실행하기 전에 객체가 생성됩니다. 이 객체는 이것을 통해서만 액세스할 수 있습니다. 그러나 이것의 문제점은 무엇입니까? 분명히 각 개체는 자체 버전의 showColor 함수도 생성합니다. 이 문제를 해결하기 위해 다음과 같은 프로토타입 메소드가 도입되었습니다.

이 메소드는 객체의 프로토타입 속성을 활용합니다. 새로운 객체를 만들기 위한 기초. 여기서는 빈 생성자를 사용하여 클래스 이름을 설정합니다. 그런 다음 모든 메서드와 속성을 프로토타입 특성에 직접 할당합니다.

코드 복사 코드는 다음과 같습니다.function Car()

{}

Car.prototype.color="red";
Car.prototype.doors=4;
Car.prototype.mpg=23;
Car.prototype.drivers=new 배열( "마이크", "수");
Car.prototype.showColor=function()
{
Alert(this.color);
}


프로토타입 메서드는 값을 직접 할당할 수만 있고, 생성자에 매개변수를 전달하여 속성의 값을 초기화할 수는 없습니다. 이 방법을 사용하면 두 가지 문제에 직면하게 됩니다. 첫 번째 문제는 이 접근 방식을 사용하면 속성의 기본값을 변경하기 전에 각 개체를 만들어야 한다는 것입니다. 각 객체를 생성하는 것이 아니라 필요한 속성값을 직접 가질 수는 없습니다. 이것은 짜증나는 일이다. 두 번째 문제는 속성이 객체를 참조할 때입니다. 기능 공유에는 문제가 없지만 객체 공유에는 문제가 있습니다. 각 인스턴스는 일반적으로 자체 개체를 구현하기 때문입니다.

다음과 같습니다.

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

var oCar1= new Car();
var oCar2=new Car();
oCar1.drivers.push("Matt");
alert(oCar1.drivers);//출력 "Mike, Sue,Matt"
alert(oCar2.drivers);//Output "Mike, Sue, Matt"

따라서 drivers 속성은 객체에 대한 포인터일 뿐이므로 모든 인스턴스는 실제로 같은 객체를 공유합니다. 이러한 문제 때문에 우리는 생성자와 프로토타입을 공동으로 사용하는 다음과 같은 방법을 도입했습니다.

4. 생성자/프로토타입 혼합 접근
이 접근 방식의 아이디어는 생성자를 사용하여 객체의 모든 비함수 속성(일반 속성 및 속성 포함)을 정의하는 것입니다. 객체를 가리키는 경우) 프로토타입 방식으로 객체의 함수 속성(메서드)을 정의합니다. 결과적으로 모든 함수는 한 번만 생성되고 각 개체에는 고유한 개체 속성 인스턴스가 있습니다. 샘플 코드는 다음과 같습니다.

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

함수 자동차(sColor,iDoors,iMpg )
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array(" Mike","Sue") ;
}
Car.prototype.showColor=function()
{
Alert(this.color);
}
var oCar1=새 자동차 ("빨간색",4, 23);
var oCar2=new Car("파란색",3,25);
oCar1.drivers.push("Matt");
alert(oCar1.drivers );//"Mike,Sue,Matt" 출력
alert(oCar2.drivers);//"Mike,Sue" 출력

예제 코드에서 볼 수 있듯이 이 메서드는 이전 방법의 두 가지 문제를 동시에 해결합니다. 그러나 일부 개발자는 여전히 이 접근 방식이 완벽하지 않다고 생각합니다.

5. 동적 프로토타입 방법
우리는 대부분의 객체 지향 언어가 시각적으로 캡슐화된 속성과 메서드를 가지고 있다는 것을 알고 있습니다. 그러나 위 메소드의 showColor 메소드는 클래스 외부에 정의되어 있습니다. 따라서 그들은 동적 프로토타입 접근 방식을 설계했습니다. 이 접근 방식의 기본 아이디어는 하이브리드 생성자/프로토타입 접근 방식과 동일하며 유일한 차이점은 객체 메서드의 위치입니다. 아래와 같이

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

function Car(sColor ,iDoors,iMpg )
{
this.color=sColor;
this.doors=iDoors;
this.mpg=iMpg;
this.drivers=new Array("Mike", "고소") ;
if(typeof Car._initialized=="undefine")
{
Car.prototype.showColor=function()
{
Alert(this.color);
}
}
Car._initialized=true;
}

이런 식으로 Car.prototype.showColor는 한 번만 생성됩니다. 이러한 종속성을 사용하면 이 코드는 다른 언어의 클래스 정의와 더 비슷해집니다.

6. 혼합 팩토리 방식
이 방법은 일반적으로 이전 방법의 해결 방법입니다. 그 목적은 다른 종류의 객체의 새 인스턴스를 반환하는 가짜 생성자를 만드는 것입니다.

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

function createCar()
{
var oTempCar=new Object;
oTempCar.color=“red”;
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor=function()
{
Alert(this.color);
};
return oTempCar;
}
var car=new Car();

차 안에 있기 때문에 () 생성자 new 연산자는 내부적으로 호출되므로 두 번째 new 연산자는 자동으로 무시됩니다. 생성자 내부에서 생성된 객체는 var 변수로 다시 전달됩니다. 이 접근 방식은 객체 메서드의 내부 관리에 관한 고전적인 접근 방식과 동일한 문제를 가지고 있습니다. 따라서 반드시 필요한 경우가 아니면 이 방법을 사용하지 않는 것이 좋습니다.