javascript_javascript 스킬에서 클래스를 정의하는 방법에 대한 자세한 설명

JS에서 클래스를 정의하는 방법에는 여러 가지가 있습니다.

1. 팩토리 방식

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

함수 Car(){
var ocar = 새 개체
ocar.color = "파란색"
ocar.doors = 4
ocar.showColor = function(){
Document.write(this.color)
}; 오카 복귀
}
var car1 = 자동차()
var car2 = 자동차()

이 함수가 호출되면 새 개체가 생성되고 모든 속성과 메서드가 해당 개체에 할당됩니다. 이 기능을 사용하여 정확히 동일한 속성을 가진 2개의 개체를 만듭니다. 물론 내 여동생이 매개변수를 전달하여 이 메서드를 수정할 수 있습니다.

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

기능 자동차(색상,문){
var ocar = 새 개체
ocar.color = 색상
ocar.doors = 문
ocar.showColor = function(){
Document.write(this.color)
}; 오카 복귀
}
var car1 = 자동차("빨간색",4)
var car2 = 자동차("파란색",4)
car1.showColor() //출력:"red"
car2.showColor() //출력:"파란색"

이제 함수에 다양한 매개변수를 전달하여 다양한 값을 가진 객체를 얻을 수 있습니다. 이전 예제에서 showcolor()는 Car() 함수가 호출될 때마다 생성됩니다. 즉, 각 객체에는 고유한 showcolor() 메서드가 있습니다.

하지만 사실 각 개체는 동일한 기능을 공유합니다.

함수 외부에서 메서드를 정의한 다음 함수의 속성을 메서드에 지정하는 것도 가능합니다.

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

함수 showColor(){

경고(this.color)
}
함수 Car(){
var ocar = 새로운 객체()
ocar.color = 색상
ocar.doors = 문
ocar.showColor = 쇼컬러
오카 복귀
}

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

2. 생성자 방식

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

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

기능 자동차(색상,문){

This.color = 색상
This.doors = 문
This.showColor = function(){
경고(this.color)
}; }
var car1 = 새 자동차("빨간색",4)
var car2 = 새 자동차("파란색",4)



생성자 메소드는 함수 내부에 객체를 생성하지 않고 this 키워드를 사용하는 것을 볼 수 있습니다. 왜냐하면 생성자가 호출될 때 객체가 생성되었고, 이것만 함수 내부의 객체 속성에 접근하는 데 사용될 수 있기 때문입니다.

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

3. 프로토타입 제작 방법

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

코드 복사 코드는 다음과 같습니다. 함수 Car(){

}

Car.prototype.color = "빨간색"
Car.prototype.doors = 4
Car.prototype.showColor = function(){
경고(this.color)
}
var car1 = 새 자동차()
var car2 = 새 자동차()

이 코드에서는 먼저 빈 함수를 정의한 후 프로토타입 속성을 통해 객체의 속성을 정의합니다. 이 함수가 호출되면 프로토타입의 모든 속성이 생성될 객체에 즉시 할당됩니다. 이 함수의 모든 객체는 showColor()에 대한 포인터를 저장하며 구문상 모두 동일한 객체에 속하는 것으로 나타납니다.
하지만 이 함수에는 매개변수가 없으며, 매개변수를 전달하여 속성을 초기화할 수 없습니다. 속성의 기본값은 객체 생성 후 변경되어야 합니다.
프로토타입 메서드의 심각한 문제는 속성이 배열과 같은 객체를 가리키는 경우입니다.

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

함수 Car(){
}
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

배열의 참조 값으로 인해 Car의 두 객체가 동일한 배열을 가리키므로 car1에 값을 추가하면 car2에서도 볼 수 있습니다.
Union은 다른 프로그래밍 언어와 마찬가지로 생성자/프로토타입 메소드를 사용하여 객체를 생성하는 메소드이며, 객체의 비함수적 속성을 정의하기 위해 생성자를 사용하고, 객체를 정의하기 위해 프로토타입 메소드를 사용합니다.

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

기능 자동차(색상,문){
This.color = 색상
This.doors = 문
This.arr = new Array("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

5. 동적 프로토타입 방식

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

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

기능 자동차(색상,문){
This.color = 색상
This.doors = 문
This.arr = new Array("aa","bb")
If(자동차 유형_초기화 == "정의되지 않음"){
Car.prototype.showColor = function(){
경고(this.color)
}; Car._initialized = true
}
}

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

6. 믹싱팩토리 방식

그 목적은 다른 개체의 새 인스턴스를 반환하는 가짜 생성자를 만드는 것입니다.

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

함수 Car(){
var ocar = 새로운 객체()
ocar.color = "빨간색"
ocar.doors = 4
ocar.showColor = function(){
경고(this.color)
}; 오카 복귀
}

팩토리 메소드와의 차이점은 new 연산자를 사용한다는 점입니다.

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

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.