javascript의 클래스 정의 및 방법('javascript 고급 프로그래밍' 연구 노트)

JavaScript의 클래스 상속에 대해서는 Ruan Yifeng의 블로그 "Design Ideas of Javascript Inheritance Mechanism"을 참조하세요.

1. 자바스크립트에서 인스턴스화할 때 발생하는 문제:

다음은 "Javascript 고급 프로그래밍"의 예를 사용하여 설명합니다. 이제 자동차 객체가 정의되면 이는 Object 클래스의 인스턴스입니다. 다음과 같습니다.

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

 
var oCar=new Object () ; 
oCar.color = "빨간색"; 
oCar.doors = 4; 
oCar.mpg = 23; 
oCar.showColor = function () { 
alert(this. color) ; 
}; 

이제 이러한 인스턴스가 필요하므로 다음과 같이 정의할 수 있습니다.

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

 
var oCar2 = new Object(); 
oCar2.color = "blue" 
oCar2.doors = 5; 
 oCar2.mpg = 25; 
oCar2.showColor = function () { 
alert(this.color) 
}; 

이런 식으로 발생하는 문제 각 객체는 모두 자신의 필드와 메소드를 재정의해야 합니다. 매우 귀찮습니다.

2. 클래스 정의 - 팩토리 메소드 구현:

위의 예를 래핑하고 함수의 반환 값을 사용하여 기사를 만듭니다.

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

 
function createCar() { 
var oTempCar = new Object() 
oTempCar. color = "빨간색"; 
oTempCar.doors = 4; 
oTempCar.mpg = 23; 
oTempCar.showColor = function () { 
alert(this.color); 
return oTempCar; 
} 

 

호출 방법:

var oCar1 = createCar();
var oCar2 = createCar(); > 이 방법을 팩토리 메소드라고 합니다. 팩토리 방식이 훨씬 쉬운 것 같습니다. 최소한 객체를 생성할 때 더 이상 그렇게 많은 선이 필요하지 않습니다. 각 속성(색상, 문, mpg)의 값은 고정되어 있으므로 매개변수 전달을 사용하여 다시 변환해야 합니다.

코드 복사 코드는 다음과 같습니다. function createCar(sColor, iDoors, iMpg) {

var oTempCar = new Object()

oTempCar.color = sColor; >oTempCar.doors = iDoors; 
oTempCar.mpg = iMpg; 
oTempCar.showColor = function () { 
alert(this.color) 

return oTempCar ; 
} 

var oCar1 = createCar("red", 4, 23); 
var oCar2 = createCar("red", 4, 23) 

oCar1. showColor(); 
oCar2.showColor(); 

 
이건 목적을 달성할 수 있을 것 같습니다. 구현도 매우 간단하고 통화도 매우 편리합니다. 그런데 별로 안 좋은 점이 두 가지 있습니다. 

1. 의미론적으로 보면 별로 형식적이지 않은 객체 생성 시에는 new 연산자를 사용하지 않습니다(보통 객체 생성). new 연산자) )를 사용하여 구현됩니다. 

2. 객체지향 특성을 따르지 않음 - 캡슐화. 이 예에서 oCar1과 oCar2는 모두 자체 showColor 메서드를 갖고 있으며 showColor 구현도 자체적입니다. 그러나 사실은 동일한 기능을 공유한다는 것입니다.

함수 포인터를 사용하여 이러한 공유 함수 문제를 해결하는 방법도 있습니다. createCar 함수 외부에서 showColor 함수를 생성하고 oTempCar의 showColor 메서드는 다음 showColor 함수를 가리킵니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: function showColor() { alert(this.color) }

function createCar(sColor, iDoors, iMpg) { 
 var oTempCar = new Object(); 
oTempCar.color = sColor; 
oTempCar.mpg = iMpg; 
oTempCar.showColor; 
 } 
var oCar1 = createCar("red", 4, 23); 
var oCar2 = createCar("red", 4, 23) 

oCar1.showColor(); 
 oCar2.showColor(); 

 
이렇게 하면 반복적으로 함수를 생성하는 문제가 해결되지만 showColor 함수가 객체 메서드처럼 보이지 않게 됩니다. 

3. 클래스 정의--생성자 메서드 구현: 

코드 복사

코드는 다음과 같습니다.

 
function Car(sColor, iDoors, iMpg) { 
//생성자 형태로 각 객체마다 독립적인 속성과 함수가 생성됩니다. 
this.color = sColor; this.doors = iDoors; 
this.mpg = iMpg; 
this.showColor = function () { 
alert(this.color) 
} 

var oCar1 = new Car("빨간색", 4, 23); 
var oCar2 = new Car("빨간색", 4, 23) 
oCar1.showColor() 
oCar2 .showColor(); 

 
Car 클래스에서 이 포인터는 Car의 인스턴스를 나타내므로 값을 반환할 필요가 없습니다. 생성자 메서드는 팩토리 메서드와 마찬가지로 클래스 정의를 구현하지만 각 인스턴스에 대해 별도의 메서드도 생성합니다. 이 문제를 해결하기 위해 포인터를 사용하기 위해 팩토리 함수처럼 함수 외부에 함수를 만들 수 있지만 그렇게 하는 것은 의미상 의미가 없습니다. 

4. 클래스 정의 - 프로토타입 구현:

객체의 프로토타입 속성을 사용하고 이를 새로운 객체 생성이 의존하는 프로토타입으로 간주합니다. 클래스 이름을 설정하려면 빈 생성자를 사용하세요. 그런 다음 모든 속성과 메서드가 프로토타입 특성에 직접 할당됩니다.

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

} 
Car.prototype.color = "빨간색"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 23; 
Car.prototype.showColor = 함수() { 
alert(this.color) 
}; 

var oCar1 = new Car(); 
var oCar2 = new Car() 
alert(oCar1 인스턴스) ;// 여기서 true 출력에는 두 가지 문제가 있습니다. 

 
1. 생성자에 매개변수가 없습니다. 프로토타입을 사용할 때 함수 매개변수에 매개변수를 전달하여 속성값을 초기화할 수 없습니다. 

2. 인스턴스가 여러 개인 경우 한 인스턴스의 속성을 변경하면 다른 인스턴스의 속성에도 영향을 미칩니다.

테스트 코드:

코드 복사 코드는 다음과 같습니다. var oCar1 = new Car();

oCar1.color = "녹색";

var oCar2 = new Car() 
oCar2.color = "검은색"; .color) ; //녹색 출력 
alert(oCar2.color); //검은색 출력 
alert(oCar1.color); //검은색 출력 

 
 이 질문에 대한 해결책이 되십시오. 그것이 생성자/프로토타입 혼합 방식입니다 

 5. 클래스 구현 - 생성자/프로토타입 혼합 방식 

이 구현 방식은 각 클래스의 인스턴스 간에 공유됩니다. 속성이나 메소드는 프로토타입 체인에서 구현되어야 합니다. , 구현할 필요가 없는 속성과 메서드는 생성자에서 구현해야 합니다. 이 클래스의 구현은 가장 널리 사용되는 방법입니다.

코드 복사

코드는 다음과 같습니다. function Car(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 = new Car("red", 4, 23); 
 var oCar2 = new Car("blue", 3, 24); 

oCar1.drivers.push("Matt") 
alert(oCar1.drivers); oCar2.drivers ); 6. 클래스 정의 - 동적 프로토타입 구현 

 
혼합 생성자/프로토타입 메서드에 비해 이 메서드는 친숙한 프로그래밍 스타일을 제공합니다(혼합 생성자/프로토타입 메서드에서는 showColor 메소드의 정의는 생성자의 메소드 본문 내가 아닌 메소드 본문 외부에서 구현됩니다. 이 클래스를 정의하는 방법에는 여러 가지가 있습니다. 

코드 복사

코드는 다음과 같습니다. function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg;

this.divers = new Array("Mike", "Sue");

 if (typeof Car._initialized == "undefine") { 
Car.prototype.showColor = function () { 
alert(this.color) 
}; = true; 
} 

7. 클래스 정의 - 혼합 팩토리 구현 

코드 복사

코드는 다음과 같습니다.

function Car() { 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() 
car.showColor() 


이 방법은 팩토리 방법과 비슷해 보입니다. new 연산자는 Car() 생성자 내부에서 호출되므로 생성자 외부에 있는 new 연산자는 무시됩니다. 생성자 내부에서 생성된 객체는 var 변수로 다시 전달됩니다. 팩토리 방식에 비해 개선된 새로운 연산자가 있는 것 같지만, 이 구현 방식 역시 생성 방식이 반복된다는 문제가 있다. 따라서 이런 방식으로 클래스를 정의하는 것은 권장되지 않습니다. 

javascript의 클래스 정의 및 방법('javascript 고급 프로그래밍' 연구 노트)_js 객체 지향