JS에서 클래스를 정의하는 방법에는 여러 가지가 있습니다.
1. 공장 방법
코드 사본은 다음과 같습니다.
기능 차 () {
var ocar = 새로운 대상;
ocar.color = "파란색";
ocar.doors = 4;
ocar.showcolor = function () {
document.write (this.color)
};
오카를 반환;
}
var car1 = car ();
var car2 = car ();
이 함수가 호출되면 새 객체가 생성되고 모든 속성과 메소드가 할당됩니다. 이 기능을 사용하여 정확히 동일한 속성을 가진 2 개의 객체를 만듭니다. 물론, 언니는 매개 변수를 전달 하여이 방법을 수정할 수 있습니다.
코드 사본은 다음과 같습니다.
기능 차량 (색, 도어) {
var ocar = 새로운 대상;
ocar.color = 색상;
ocar.doors = 문;
ocar.showcolor = function () {
document.write (this.color)
};
오카를 반환;
}
var car1 = car ( "빨간색", 4);
var car2 = car ( "파란색", 4);
car1.showcolor () // 출력 : "빨간색"
car2.showcolor () // 출력 : "파란색"
이제 다른 매개 변수를 함수에 전달하여 다른 값을 가진 객체를 얻을 수 있습니다.
이전 예에서는 함수 CAR ()이 호출 될 때마다 showColor ()가 생성되므로 각 객체에는 고유 한 showColor () 메소드가 있음을 의미합니다.
그러나 실제로 각 객체는 동일한 기능을 공유합니다.
메소드는 함수 외부에서 정의 될 수 있지만, 기능의 속성을 메소드에 포인트하여 정의 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 showcolor () {
경고 (this.color);
}
기능 차 () {
var ocar = new Object ();
ocar.color = 색상;
ocar.doors = 문;
Ocar.showcolor = showcolor;
오카를 반환;
}
그러나 이것은 기능 방법처럼 보이지 않습니다.
2. 생성자 방법
생성자 방법은 아래와 같이 공장 방법만큼 간단합니다.
코드 사본은 다음과 같습니다.
기능 차량 (색, 도어)
생성자 메소드가 함수 내부에서 객체를 생성하지 않으며 키워드가 사용되는 것을 알 수 있습니다. 생성자를 호출 할 때 객체가 생성되었으므로 기능 내의 객체 속성에만 액세스하는 데 사용할 수 있습니다.
이제 새로운 것을 사용하여 개체를 만듭니다. 그러나 그것은 공장과 동일합니다. 각 호출은 객체에 대한 고유 한 메소드를 만듭니다.
3. 프로토 타입 방법
이 방법은 객체의 프로토 타입 속성을 활용합니다. 먼저 빈 함수로 클래스 이름을 작성 한 다음 모든 속성과 메소드가 프로토 타입 속성에 할당됩니다.
코드 사본은 다음과 같습니다.
기능 차 ()
이 코드에서는 빈 함수가 먼저 정의 된 다음 객체의 속성이 프로토 타입 속성을 통해 정의됩니다. 이 함수가 호출되면 프로토 타입의 모든 속성이 즉시 생성 할 객체에 할당됩니다. 이 기능의 모든 객체는 showcolor ()로 포인터를 저장합니다.
그러나이 함수에는 매개 변수가 없으며 매개 변수를 전달하여 속성을 초기화 할 수 없습니다. 객체가 생성 된 후에 속성의 기본값을 변경해야합니다.
프로토 타입 방법의 매우 심각한 문제는 속성이 배열과 같은 객체를 가리킬 때입니다.
코드 사본은 다음과 같습니다.
기능 차 () {
}
car.prototype.color = "빨간색";
car.prototype.doors = 4;
car.prototype.arr = new Array ( "a", "b");
car.prototype.showColor = function () {
경고 (this.color);
}
var car1 = 새 차 ();
var car2 = 새 차 ();
car1.arr.push ( "CC");
경고 (car1.arr); // 출력 : AA, BB, CC
경고 (car2.arr); // 출력 : AA, BB, CC
여기서는 배열의 기준 값으로 인해 두 차량 객체가 동일한 배열을 가리므로 CAR1에 값이 추가되면 CAR2에서도 볼 수 있습니다.
Union은 생성자/프로토 타입을 사용하여 다른 프로그래밍 언어와 같은 객체를 만들 수있는 방법입니다. 생성자를 사용하여 객체의 비 기능적 특성을 정의하고 객체를 정의하기 위해 프로토 타입을 사용하는 방법입니다.
코드 사본은 다음과 같습니다.
기능 차량 (색, 도어) {
this.color = 색상;
this.doors = 문;
this.arr = 새 배열 ( "aa", "bb");
}
car.prototype.showcolor () {
경고 (this.color);
}
var car1 = 새 차 ( "빨간색", 4);
var car2 = 새 차 ( "파란색", 4);
car1.arr.push ( "CC");
경고 (car1.arr); // 출력 : AA, BB, CC
경고 (car2.arr); // 출력 : AA, BB
4. 동적 프로토 타입 방법
동적 프로토 타입 방법은 혼합 생성자/프로토 타입 방법과 유사합니다. 유일한 차이점은 객체의 방법에 주어진 위치입니다.
코드 사본은 다음과 같습니다.
기능 차량 (색, 도어) {
this.color = 색상;
this.doors = 문;
this.arr = 새 배열 ( "aa", "bb");
if (typeof car._initialized == "undefined") {
car.prototype.showColor = function () {
경고 (this.color);
};
car._initialized = true;
}
}
동적 프로토 타입 방법은 플래그를 사용하여 프로토 타입에 메소드가 할당되었는지 여부를 결정하는 것입니다. 이것은 메소드가 한 번만 생성되도록합니다
6. 혼합 공장 방법
그 목적 교사는 다른 객체의 새로운 인스턴스 만 반환하는 가짜 생성자를 만듭니다.
코드 사본은 다음과 같습니다.
기능 차 () {
var ocar = new Object ();
ocar.color = "빨간색";
ocar.doors = 4;
ocar.showcolor = function () {
경고 (this.color)
};
오카를 반환;
}
공장 방법과 달리이 방법은 새 연산자를 사용합니다.
PS (개인 이해) :
1) 프로토 타입을 통해 클래스에 의해 정의 된 멤버 (메소드 또는 속성)는 각 클래스 객체에서 공유됩니다. 일반적으로 멤버 속성을 정의하는 데 사용되지 않습니다. 객체가 속성 값을 수정하면 모든 객체가 수정됩니다.
2) 클래스에는 프로토 타입 속성이 있지만 클래스 객체는 그렇지 않습니다.
3) 새 클래스 객체 또는 클래스가 직접 (다음 공장 메소드 양식) 호출 될 때마다 클래스 (함수)를 정의하는 진술은 한 번에 실행됩니다 (싱턴 패턴 이이 상황을 피할 수 있음).
4) 클래스는 함수 유형이고 클래스 객체는 객체 유형이며 함수 유형 만 프로토 타입 속성입니다.
5) 프로토 타입으로 정의 된 방법은 클래스의 개인 변수 (클래스에 의해 정의 된 로컬 변수)에 액세스 할 수 없지만 클래스의 멤버 속성 및 멤버 메소드 (이에 의해 정의 된 변수 및 메소드)는이를 통해 액세스 할 수 있습니다.
6) 클래스 정의 방법 :
에이. 공장 방법 (개체)
B. 소화법 (프로토 타입)
C. 건설자 방법 (this)
디. 혼합 방법
7) [질문] 프로토 타입을 통해 정의 된 속성을 객체를 통해 변경할 수있는 이유는 무엇입니까? 생성자 메소드에 정의 된 속성은 객체에만 속하며 다른 객체의 속성 값에 영향을 미치지 않습니까?
위는 객체를 만드는 모든 방법입니다. 가장 널리 사용되는 방법은 하이브리드 생성자/프로토 타입 방법이며 동적 프로토 타입 방법도 매우 인기가 있습니다. 생성자/프로토 타입 방법과 기능적으로 동일합니다.