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

우리는 이제 JavaScript가 개발에서 매우 중요한 역할을 한다는 것을 알고 있습니다. 프론트엔드 개발에서는 JS 클래스를 정의해야 하는 경우가 많습니다. 그렇다면 JavaScript에는 클래스를 정의하는 여러 가지 방법이 있습니다. 이 글에서는 JS에서 클래스를 정의하는 5가지 방법을 다음과 같이 설명합니다.

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개의 개체를 만듭니다.

물론 이 메소드는 매개변수를 전달하여 수정할 수 있습니다.

function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

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

이전 예에서 showcolor()는 Car() 함수가 호출될 때마다 생성되어야 합니다. 즉, 각 객체에는 고유한 showcolor() 메서드가 있습니다.

그러나 실제로 각 개체 버킷은 동일한 기능을 공유합니다. 함수 외부에서 메서드를 정의한 다음 함수의 속성이 해당 메서드를 가리키도록 하는 것도 가능합니다.

function showColor(){
  
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}

하지만 이건 함수 메소드처럼 보이지 않습니다.

2. 생성자 메서드

다음과 같이 생성자 메서드는 팩토리 메서드만큼 간단합니다.

   
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);

생성자 메서드는 함수 내부에서 객체를 생성하지 않고, 이 키워드. 생성자가 호출될 때 객체가 생성되고, 이 객체만 함수 내부의 객체 속성에 액세스하는 데 사용할 수 있기 때문입니다.

이제 new를 사용하여 개체를 만들면 이렇게 보입니다! 그러나 이는 공장 접근 방식과 동일합니다. 각 호출은 객체에 대한 자체 메서드를 생성합니다.

3. 프로토타입 방법

이 방법은 객체의 프로토타입 속성을 사용합니다. 먼저 빈 함수를 사용하여 클래스 이름을 만든 다음 모든 속성과 메서드에 프로토타입 속성이 할당됩니다.

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();

이 코드에서는 빈 함수를 먼저 정의한 후 프로토타입 속성을 통해 객체의 속성을 정의합니다. 이 함수가 호출되면 프로토타입의 모든 속성이 생성될 객체에 즉시 할당됩니다. 이 함수의 모든 객체는 showColor()에 대한 포인터를 저장하며 구문상 모두 동일한 객체에 속하는 것으로 나타납니다.

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

프로토타입 메서드의 매우 심각한 문제는 속성이 배열과 같은 객체를 가리키는 경우입니다.

   
function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.arr = new Array(“a”,”b”);
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc

배열의 참조값으로 인해 Car의 두 객체는 ​​동일한 배열을 가리키므로 car1에 값을 더하면 car2에서도 볼 수 있습니다.

Union은 다른 프로그래밍 언어와 마찬가지로 생성자/프로토타입 메서드를 사용하여 개체를 생성하는 메서드이며, 개체의 비기능적 속성을 정의하는 데는 생성자를 사용하고 개체를 정의하는 데는 프로토타입 메서드를 사용합니다.

function Car(color,door){
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 Car(“blue”,4);
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb

4. 동적 프로토타입 방법

동적 프로토타입 방법의 원리는 혼합 생성자/프로토타입 방법과 유사합니다. 유일한 차이점은 객체 메서드가 할당되는 위치입니다.

   
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
if(typeof Car._initialized == “undefined”){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}

동적 프로토타입 메서드는 플래그를 사용하여 메서드가 프로토타입에 할당되었는지 확인합니다. 이렇게 하면 메소드가 한 번만 생성됩니다.

5. 혼합 팩토리 메소드

이 메소드의 목적은 가짜 생성자를 생성하고 다른 객체의 새 인스턴스만 반환하는 것입니다.

function Car(){
var ocar = new Object();
ocar.color = “red”;
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}

공장 메소드와의 차이점은 이 메소드는 new 연산자를 사용한다는 것입니다.

위 내용은 모두 객체를 생성하는 방법입니다. 현재 가장 널리 사용되는 방법은 생성자/프로토타입 혼합 방법이며, 동적 프로토타입 방법도 매우 널리 사용됩니다. 기능적으로 생성자/프로토타입 접근 방식과 동일합니다.

위 내용은 JS에서 클래스를 정의하는 5가지 방법에 대한 자세한 설명입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

php에서 클래스 및 작업 예제를 정의하는 방법

JavaScript는 함수를 사용하여 정의된 클래스 인스턴스의 자세한 사용법을 구현합니다.

Javascript 사용자 정의 유형, 속성, 메서드 예제 코드 요약

위 내용은 JS에서 클래스를 정의하는 5가지 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!