ECMAScript 클래스나 객체 정의
프리딩된 객체를 사용하는 것은 오브젝트 가향적 언어의 능력의 일부입니다. 그의 진정한 강점은 독자적인 클래스와 객체를 생성할 수 있다는 점입니다.
ECMAScript는 객체나 클래스를 생성하기 위한 많은 메서드를 가지고 있습니다.
공장 방식
원래 방식
객체의 속성이 객체가 생성된 후에 동적으로 정의될 수 있기 때문에, 많은 개발자들이 JavaScript가 최초로 도입된 시점에서 아래와 같은 코드를 작성했습니다:
var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};
위 코드에서는 객체 car를 생성한 후 몇 가지 속성을 설정합니다: 그 색상은 파란색이고, 네 개의 문이 있으며, 1 갤론에 25 마일을 달릴 수 있습니다. 마지막 속성은 함수를 가리키는 포인터이므로, 이 속성은 메서드입니다. 이 코드를 실행한 후에는 객체 car를 사용할 수 있습니다.
그러나 여기에 문제가 있습니다. 여러 개의 car 인스턴스를 생성해야 할 수 있습니다.
해결책: 공장 방식
이 문제를 해결하기 위해 개발자들은 특정 유형의 객체를 생성하고 반환할 수 있는 공장 함수(FACTORY FUNCTION)를 창조했습니다.
예를 들어, 함수 createCar()는 이전에 나열된 car 객체 생성 작업을 포장할 수 있습니다:
function createCar() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();
여기서는 첫 번째 예제의 모든 코드가 createCar() 함수에 포함되어 있습니다. 또한 추가적인 코드가 하나 더 있으며, 함수 값으로 car 객체를 반환합니다. 이 함수를 호출하면 새로운 객체를 생성하고 모든 필요한 속성을 할당하여 이전에 설명한 car 객체를 복사합니다. 따라서 이 방식으로 쉽게 car 객체의 두 개의 버전(oCar1과 oCar2)을 생성할 수 있습니다. 두 개의 객체는 모든 속성이 완전히 동일합니다.
함수에 매개변수 전달
createCar() 함수를 수정하여 각 속성에 기본값을 전달하는 대신 기본값을 간단히 할당할 수 있습니다:
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("blue",3,25);
oCar1.showColor(); // "red" 출력
oCar2.showColor(); // "blue" 출력
createCar() 함수에 매개변수를 추가하여 생성할 car 객체의 color, doors, mpg 속성에 값을 할당할 수 있습니다. 이렇게 하면 두 개의 객체가 동일한 속성을 가지지만 다른 속성 값을 가질 수 있습니다.
공장 함수 외에 객체의 메서드 정의
이더넷 스크립트가 점점 더 공식화되지만, 객체를 생성하는 방법은 무시되고, 여전히 규범화는 반대당하고 있습니다. 일부는 의미론적 이유(함수 생성자 new 연산자를 사용하는 것보다 공식적이지 않아 보일 수 있습니다)와 기능적 이유가 있습니다. 기능적 이유는 이 방식으로 객체를 생성하는 방법이 필요하기 때문입니다. 이전 예제에서는 함수 createCar()를 호출할 때마다 새로운 함수 showColor()를 생성하므로, 각 객체는 자신의 showColor() 버전을 가지고 있습니다. 그러나 실제로는 각 객체가 동일한 함수를 공유하고 있습니다.
일부 개발자들은 공장 함수 외에 객체 메서드를 정의하고, 이 메서드를 속성을 통해 지정하여 이 문제를 피합니다.}
function showColor() {
alert(this.color);
}
function createCar(sColor,iDoors,iMpg) {
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}
var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);
oCar1.showColor(); // "red" 출력
oCar2.showColor(); // "blue" 출력
위에 다시 작성된 코드에서 함수 createCar() 이전에 함수 showColor() 를 정의했습니다. createCar() 내에서, 이미 존재하는 showColor() 함수에 대한 객체를 지정했습니다. 기능적으로는 함수 객체를 중복 생성하는 문제를 해결했지만, 의미적으로는 이 함수가 객체 메서드라고 느껴지지 않습니다.
모든 이 문제들은개발자 정의의 생성자 등장.
생성자 방식
생성자를 만들기는 공장 함수와 유사하게 쉽습니다. 첫 번째 단계는 클래스 이름을 선택하는 것입니다. 전통적으로 이름의 첫 글자는 대문자로 쓰여져서 변수 이름과 구분됩니다. 이 외에도 생성자는 공장 함수와 매우 유사합니다. 다음 예제를 고려해 보세요:
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
};
}
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
위의 코드와 공장 방식의 차이점을 설명해 드리겠습니다. 먼저 생성자 내에서 객체를 생성하지 않고 this 키워드를 사용합니다. new 연산자를 사용하여 생성자를 호출할 때, 첫 번째 코드 실행 전에 객체를 생성합니다. 이 객체에 접근하기 위해서는 this를 사용해야 합니다. 그런 다음 this 속성에 직접 할당할 수 있으며, 기본적으로는 생성자의 반환 값입니다. return 연산자를 명시적으로 사용하지 않아도 됩니다.
이제 new 연산자와 클래스 이름 Car를 사용하여 객체를 생성하면 ECMAScript에서 일반 객체 생성 방식과 더 유사하게 됩니다.
이 방식이 기존 방식과 같은 함수 관리 문제가 있는지 물으시겠습니다? 예, 있습니다.
공장 함수와 마찬가지로, 생성자는 함수를 반복적으로 생성하여 각 객체에 독립적인 함수 버전을 생성합니다. 그러나 공장 함수와 유사하게, 외부 함수를 사용하여 생성자를 다시 작성할 수 있지만, 이는 의미론적으로 무의미합니다. 이것이 바로 원형 방식의 장점입니다.
원형 방식
이 방식은 객체의 prototype 속성을 활용하며, 새로운 객체를 생성할 때 필요한 프로토타입으로 볼 수 있습니다.
이곳에서는 빈 생성자를 사용하여 클래스 이름을 설정합니다. 그런 다음 모든 속성과 메서드가 직접 prototype 속성에 할당됩니다. 이전 예제를 수정하여 다음과 같이 코드를 작성합니다:
function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car();
var oCar2 = new Car();
이 코드에서는 먼저 구조체 함수(Car)를 정의합니다. 그리고 그 다음 몇 행의 코드에서 Car의 prototype 속성에 속성을 추가하여 Car 객체의 속성을 정의합니다. new Car()를 호출할 때, 프로토타입의 모든 속성이 즉시 생성된 객체에 할당됩니다. 이는 모든 Car 인스턴스가 showColor() 함수를 가리키는 포인터를 저장한다는 의미입니다. 의미론적으로 모든 속성은 하나의 객체에 속하며, 이는 이전 두 가지 방식의 문제를 해결합니다.
또한, 이 방식을 사용하면 instanceof 연산자를 통해 주어진 변수가 가리키는 객체의 타입을 확인할 수 있습니다. 따라서 다음 코드는 TRUE를 출력합니다:
alert(oCar1 instanceof Car); // "true" 출력
원형 방식의 문제
원형 방식은 좋은 해결책으로 보입니다. 그러나 그것은 완벽하지 않습니다.
먼저, 이 생성자는 매개변수가 없습니다. 원형 방식을 사용하면, 생성자에 매개변수를 전달하여 속성 값을 초기화할 수 없습니다. 왜냐하면 Car1과 Car2의 color 속성은 모두 "blue"이고, doors 속성은 모두 4이며, mpg 속성은 모두 25입니다. 이는 속성의 기본 값을 변경할 수 있는 것은 객체가 생성된 후에야 가능하다는 것을 의미하며, 이는 매우 불편합니다. 하지만 그것이 모든 것은 아닙니다. 실제 문제는 속성이 함수가 아니라 객체를 가리키는 경우에 발생합니다. 함수는 공유되어 문제가 발생하지 않지만, 객체는 일반적으로 여러 인스턴스에서 공유되지 않습니다. 다음 예제를 생각해 보세요:
function Car() {
}
Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push("Bill");
alert(oCar1.drivers); //출력 "Mike,John,Bill"
alert(oCar2.drivers); //출력 "Mike,John,Bill"
위 코드에서, 속성 drivers는 "Mike"과 "John" 두 이름을 포함하는 Array 객체를 가리키는 포인터입니다. drivers가 참조 값이므로, Car의 두 인스턴스는 동일한 배열을 가리킵니다. 이는 oCar1.drivers에 값을 추가하면 oCar2.drivers에서도 볼 수 있다는 의미입니다. 이 두 포인터의 어느 하나를 출력하면 "Mike,John,Bill" 문자열이 표시됩니다.
객체를 생성할 때 많은 문제가 있으므로, 합리적인 객체 생성 방법이 있을까요? 답은 있습니다. 생성자와 프로토타입 방식을 결합하여 사용해야 합니다.
혼합된 생성자/프로토타입 방식
생성자와 프로토타입 방식을 결합하여 다른 프로그래밍 언어와 같이 객체를 생성할 수 있습니다. 이 개념은 매우 간단합니다. 즉, 객체의 모든 비 함수 속성을 생성자로 정의하고, 객체의 함수 속성(메서드)을 프로토타입 방식으로 정의합니다. 결과적으로 모든 함수는 한 번만 생성되며, 각 객체는 자신의 속성 인스턴스를 가집니다.
이전 예제를 재구성했습니다. 코드는 다음과 같습니다:
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
}
Car.prototype.showColor = function() {
alert(this.color);
};
var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);
oCar1.drivers.push("Bill");
alert(oCar1.drivers); //출력 "Mike,John,Bill"
alert(oCar2.drivers); //출력 "Mike,John"
지금은 일반 객체를 생성하는 것과 더욱 비슷합니다. 모든 비 함수 속성은 생성자에서 생성되며, 이는 생성자의 매개변수를 사용하여 속성에 기본값을 부여할 수 있다는 의미입니다. showColor() 함수의 한 인스턴스만 생성되기 때문에 메모리 낭비가 없습니다. 또한, oCar1의 drivers 배열에 "Bill" 값을 추가하면 oCar2의 배열에 영향을 미치지 않으므로, 이 배열의 값을 출력할 때 oCar1.drivers는 "Mike,John,Bill"를, oCar2.drivers는 "Mike,John"을 표시합니다. 프로토타입 방식을 사용했기 때문에 instanceof 연산자를 사용하여 객체의 타입을 판단할 수 있습니다.
이 방식은 ECMAScript가 주로 사용하는 방식으로, 다른 방식의 특성을 가지면서도 그들의 부작용을 가지지 않습니다. 그러나, 일부 개발자들은 이 방식이 완벽하지 않다고 생각합니다.
동적 프로토타입 메서드
다른 언어를 사용하는 개발자들에게는 복합적인 생성자/프로토타입 방식이和谐하지 않을 수 있습니다. 결국, 클래스를 정의할 때 대부분의 객체 지향 언어는 속성과 메서드를 시각적으로 패키징합니다. 다음은 Java 클래스를 고려해 봅니다:
class Car {
public String color = "blue";
public int doors = 4;
public int mpg = 25;
public Car(String color, int doors, int mpg) {
this.color = color;
this.doors = doors;
this.mpg = mpg;
}
public void showColor() {
System.out.println(color);
}
}
Java는 Car 클래스의 모든 속성과 메서드를 잘 패키징했기 때문에 이 코드를 볼 때 그 기능을 이해할 수 있습니다. 이는 객체의 정보를 정의하는 것입니다. 복합적인 생성자/프로토타입 방식을 비판하는 사람들은 속성을 생성자 내에서 찾고, 메서드를 외부에서 찾는 방식이 불합리하다고 생각합니다. 따라서, 더 유용한编码 스타일을 제공하기 위해 동적 프로토타입 메서드를 설계했습니다.
동적 프로토타입 메서드의 기본 아이디어는 복합적인 생성자/프로토타입 방식과 동일합니다. 즉, 생성자 내에서 함수가 아닌 속성을 정의하고, 함수 속성은 프로토타입 속성을 통해 정의됩니다. 유일한 차이점은 객체에 메서드를 부여하는 위치입니다. 아래는 동적 프로토타입 메서드로 재정의된 Car 클래스입니다:
function Car(sColor,iDoors,iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array("Mike","John");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
};
Car._initialized = true;
}
}
Car._initialized의 typeof이 "undefined"과 같지 않을 때까지 이 생성자는 변경되지 않습니다. 이 줄은 동적 프로토타입 메서드에서 가장 중요한 부분입니다. 이 값이 미정의되지 않았다면(이 값이 true일 때 typeof의 값이 Boolean), 생성자는 프로토타입 방식을 통해 객체의 메서드를 정의하고 Car._initialized을 true로 설정합니다. 이 값이 정의되었을 때(그值为 true일 때, typeof의 값이 Boolean), 이 메서드는 더 이상 생성되지 않습니다. 간단히 말해서, 이 메서드는 프로토타입에 메서드를 할당했는지 여부를 판단하기 위해 레이블(_initialized)을 사용합니다. 이 메서드는 한 번만 생성되고 할당되며, 전통적인 OOP 개발자는 이 코드가 다른 언어의 클래스 정의와 유사하게 보일 것을 기대할 수 있습니다.
혼합 공장 방식
이 방식은 이전 방식을 적용할 수 없을 때의 대체 방법으로 일반적으로 사용됩니다. 그 목적은 가짜 생성자를 생성하여 다른 객체의 새 인스턴스를 반환하는 것입니다.
이 코드는 공장 함수와 매우 유사합니다:
function Car() {
var oTempCar = new Object;
oTempCar.color = "blue";
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {
alert(this.color);
};
return oTempCar;
}
전통적인 방식과 달리, 이 방식은 new 연산자를 사용하여 진짜 생성자처럼 보이게 합니다:
var car = new Car();
Car() 생성자 함수 내에서 new 연산자가 호출되었기 때문에, 생성자 외에 있는 두 번째 new 연산자는 무시됩니다. 생성자 내에서 생성된 객체는 변수 car에 전달됩니다.
이 방식은 객체 메서드의 내부 관리에서 전통적인 방식과 동일한 문제를 가집니다. 강력히 권장합니다: 절대로 필요하지 않다면 이 방식을 피해야 합니다.
어떤 방식을 사용할까요
이전에 설명한 것처럼, 현재 가장 널리 사용되는 것은 혼합된 생성자/프로토타입 방식입니다. 또한, 동적 원시 메서드도 인기가 많으며, 생성자/프로토타입 방식과 동일한 기능을 가집니다. 이 두 가지 방식 중 어느 하나를 선택할 수 있습니다. 그러나 전통적인 생성자나 프로토타입 방식을 단독으로 사용하지 마세요. 왜냐하면 이렇게 하면 코드에 문제를 일으킬 수 있기 때문입니다.
예제
객체가 흥미롭게 보이는 점은 문제를 해결하는 방식입니다. ECMAScript에서 가장 일반적인 문제 중 하나는 문자열 연결의 성능입니다. 다른 언어와 마찬가지로 ECMAScript의 문자열은 불변적입니다. 즉, 그들의 값은 변경할 수 없습니다. 다음 코드를 고려해 보세요:
var str = "hello "; str += "world";
실제로 이 코드가 백그라운드에서 수행하는 단계는 다음과 같습니다.:
- "hello "를 저장할 문자열을 생성합니다.
- "world"를 저장할 문자열을 생성합니다.
- 연결된 결과를 저장할 문자열을 생성합니다.
- str의 현재 내용을 결과에 복사합니다.
- "world"를 결과에 복사합니다.
- str을 결과로 가리키는 것을 업데이트합니다.
문자열 연결을 완료할 때마다 2에서 6 단계를 수행하므로, 이 작업은 매우 자원을 소모합니다. 이 과정을 수백 번, 심지어 수천 번 반복하면 성능 문제가 발생할 수 있습니다. 해결책은 문자열을 Array 객체에 저장한 후, join() 메서드(매개변수는 빈 문자열)를 사용하여 최종 문자열을 생성하는 것입니다. 다음과 같은 코드를 사용하여 이전 코드를 대체할 수 있습니다.:
var arr = new Array(); arr[0] = "hello "; arr[1] = "world"; var str = arr.join(
이렇게 하면 배열에 얼마나 많은 문자열을 추가하더라도 문제가 없습니다. 이는 join() 메서드를 호출할 때만 연결 작업이 수행되기 때문입니다. 이 경우 수행되는 단계는 다음과 같습니다.:
- 결과를 저장할 문자열을 생성합니다.
- 각 문자열을 결과에 적절한 위치에 복사합니다.
이러한 해결책은 좋지만, 더 나은 방법이 있습니다. 문제는 이 코드가 정확한 의도를 반영하지 못한다는 것입니다. 이를 더 쉽게 이해하기 위해 StringBuffer 클래스를 사용하여 이 기능을 패키징할 수 있습니다.:
function StringBuffer () {
this._strings_ = new Array();
}
StringBuffer.prototype.append = function(str) {
this._strings_.push(str);
};
StringBuffer.prototype.toString = function() {
return this._strings_.join(
};
이 코드를 사용할 때 주의해야 할 것은 strings 속성입니다. 이 속성은 원래는 프라이빗 속성입니다. 이 속성은 append()와 toString() 두 가지 메서드만 있습니다. append() 메서드는 매개변수를 문자열 배열에 추가하며, toString() 메서드는 배열의 join() 메서드를 호출하여 실제로 연결된 문자열을 반환합니다. StringBuffer 객체를 사용하여 여러 문자열을 연결하려면 다음과 같은 코드를 사용할 수 있습니다.:
var buffer = new StringBuffer();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();
StringBuffer 객체와 전통적인 문자열 연결 메서드의 성능을 테스트할 수 있는 다음 코드를 사용하십시오:
var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i++) {
str += "text";
}
var d2 = new Date();
document.write("플러스 기호로 연결: ")
+ (d2.getTime() - d1.getTime()) + " milliseconds");
var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i++) {
buffer.append("text");
}
var result = buffer.toString();
d2 = new Date();
document.write("<br />StringBuffer로 연결: ")
+ (d2.getTime() - d1.getTime()) + " milliseconds");
이 코드는 문자열 연결에 대한 두 가지 테스트를 수행합니다. 첫 번째는 플러스 기호를 사용하고, 두 번째는 StringBuffer 클래스를 사용합니다. 각 작업은 10000 개의 문자열을 연결합니다. 날짜 값 d1과 d2는 연결 작업이 완료되는 데 걸리는 시간을�断정합니다. Date 객체를 생성할 때 매개변수가 없으면 현재 날짜와 시간이 객체에 할당됩니다. 연결 작업이 얼마나 오래 걸렸는지 계산하려면, 날짜의 밀리초 표현(getTime() 메서드의 반환 값)을 뺍니다. 이는 JavaScript 성능을 측정하는 일반적인 방법입니다. 이 테스트 결과는 StringBuffer 클래스와 플러스 기호를 사용하는 효율성 차이를 비교하는 데 도움이 됩니다.
