JS의 클래스를 정의하는 6 가지 방법에 대한 자세한 설명

프론트 엔드 개발에서는 종종 JS 클래스를 정의해야합니다. JavaScript에는 클래스를 정의하는 방법에는 여러 가지가 있으며 차이점은 무엇입니까? 이 기사는 JS 클래스를 정의하는 다음 6 가지 방법을 설명합니다 (사례 설명).

1. 공장 방법

 function car () {var ocar = new Object; ocar.color = "blue"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)}}; return ocar; var car1 = car (); var car2 = car ();

이 함수가 호출되면 새 객체가 생성되고 모든 속성과 메소드가 할당됩니다. 이 기능을 사용하여 정확히 동일한 속성을 가진 2 개의 객체를 만듭니다.

물론 매개 변수를 전달 하여이 방법을 수정할 수 있습니다.

 함수 자동차 (색상, 도어) {var ocar = new object; ocar.color = color; ocar.doors = door; ocar.showcolor = function () {document.write (this.color)}}; return ocar;} var car1 = car ( "빨간색", 4); var car2 = car ( "blue", 4); car1.showcolor (showcolor). // 출력 : "빨간색"car2.showColor () // 출력 : "파란색"

이제 다른 매개 변수를 함수에 전달하여 다른 값을 가진 객체를 얻을 수 있습니다.

이전 예에서는 함수 CAR ()이 호출 될 때마다 showColor ()가 생성되므로 각 객체에는 고유 한 showColor () 메소드가 있음을 의미합니다.

그러나 실제로 각 객체는 동일한 기능을 공유합니다. 메소드는 함수 외부에서 정의 될 수 있지만, 기능의 속성을 메소드에 포인트하여 정의 할 수 있습니다.

 함수 showcolor () {alert (this.color);} function car () {var ocar = new object (); ocar.color = color; ocar.doors = door; ocar.showcolor = showcolor; return ocar;}

그러나 이것은 기능 방법처럼 보이지 않습니다.

2. 생성자 방법

생성자 방법은 아래와 같이 공장 방법만큼 간단합니다.

 기능 차 (색상, 도어) {this.color = color; this.doors = door; this.showColor = function () {alert (this.color)};} var car1 = 새 차 ( "빨간색", 4); var car ( "blue", 4);

생성자 메소드가 함수 내부에서 객체를 생성하지 않으며 키워드가 사용되는 것을 알 수 있습니다. 생성자를 호출 할 때 객체가 생성되었으므로 기능 내의 객체 속성에만 액세스하는 데 사용할 수 있습니다.

이제 새로운 것을 사용하여 개체를 만듭니다. 그러나 그것은 공장과 동일합니다. 각 호출은 객체에 대한 고유 한 메소드를 만듭니다.

3. 프로토 타입 방법

이 방법은 객체의 프로토 타입 속성을 활용합니다. 먼저 빈 함수로 클래스 이름을 작성 한 다음 모든 속성과 메소드가 프로토 타입 속성에 할당됩니다.

 기능 car () {{} car.prototype.color = "red"; car.prototype.doors = 4; car.prototyp.showColor = function () {alert (this.color);} var car (); var car2 = new car ();

이 코드에서는 빈 함수가 먼저 정의 된 다음 객체의 속성이 프로토 타입 속성을 통해 정의됩니다. 이 함수가 호출되면 프로토 타입의 모든 속성이 즉시 생성 할 객체에 할당됩니다. 이 기능의 모든 객체는 showcolor ()로 포인터를 저장합니다.

그러나이 함수에는 매개 변수가 없으며 매개 변수를 전달하여 속성을 초기화 할 수 없습니다. 객체가 생성 된 후에 속성의 기본값을 변경해야합니다.

프로토 타입 방법의 매우 심각한 문제는 속성이 배열과 같은 객체를 가리킬 때입니다.

 기능 car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.arr = new Array ( "a", "b"); car.prototype.showcolor = function () {alert (this.color); var car2 = new car (); car1.arr.push ( "cc"); alert (car1.arr); //output:aa,bb,cclert(car2.arr); // 출력 : AA, BB, CC

여기서는 배열의 기준 값으로 인해 두 차량 객체가 동일한 배열을 가리므로 CAR1에 값이 추가되면 CAR2에서도 볼 수 있습니다.

Union은 생성자/프로토 타입을 사용하여 다른 프로그래밍 언어와 같은 객체를 만들 수있는 방법입니다. 생성자를 사용하여 객체의 비 기능적 특성을 정의하고 객체를 정의하기 위해 프로토 타입을 사용하는 방법입니다.

 기능 차 (색상, 도어) {this.color = color; this.doors = door; this.arr = new Array ( "aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = new car ( "red", 4); var car2 = new 자동차 ( "파란색", 4); car1.arr.push ( "cc"); Alert (car1.arr); //output:aa,bb,ccalert(car2.arr); // 출력 : AA, BB

5. 동적 프로토 타입 방법

동적 프로토 타입 방법은 혼합 생성자/프로토 타입 방법과 유사합니다. 유일한 차이점은 객체의 방법에 주어진 위치입니다.

 기능 차 (색상, 도어) {this.color = color; this.doors = door; this.arr = new Array ( "aa", "bb"); if (car._initialized == "undefined") {car.prototype.showColor = function () {alert (this.color); _initialized = true;} |

동적 프로토 타입 방법은 플래그를 사용하여 프로토 타입에 메소드가 할당되었는지 여부를 결정하는 것입니다. 이것은 메소드가 한 번만 생성되도록합니다

6. 혼합 공장 방법

그 목적 교사는 다른 객체의 새로운 인스턴스 만 반환하는 가짜 생성자를 만듭니다.

 function car () {var ocar = new object (); ocar.color = "red"; ocar.doors = 4; ocar.showcolor = function () {alert (this.color)}; return ocar;}

공장 방법과 달리이 방법은 새 연산자를 사용합니다.

위는 객체를 만드는 모든 방법입니다. 가장 널리 사용되는 방법은 하이브리드 생성자/프로토 타입 방법이며 동적 프로토 타입 방법도 매우 인기가 있습니다. 생성자/프로토 타입 방법과 기능적으로 동일합니다.

JS 클래스를 정의하는 6 가지 방법에 대한 위의 자세한 설명은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.