javascript 고급 프로 그래 밍 학습 노트 (1) - 대상

하나의 완전한 자 바스 크 립 트 구현 은 다음 과 같은 세 가지 다른 부분 으로 구성 되 어 있 습 니 다. 핵심 (ECMAScript), 문서 대상 모델 (DOM) 과 브 라 우 저 대상 모델 (BOM) 로 구성 되 어 있 습 니 다.전편 에 DOM 에 대한 이해 와 파악 을 썼 는데 지금 은 ECMAScript 의 학습 에 대해 정 리 를 했 기 때문에 비교적 기본 적 인 것 은 더 이상 말 하지 않 을 것 이다. 그리고 www. w3school. com. cn 에 서 는 이미 명확 하 게 설명 되 었 기 때문에 헷 갈 리 기 쉬 운 부분 에 대해 서 만 필 기 를 했다.
1. 대상 을 만 드 는 방식: (1) 원본 방식
var oCar = new Object;
oCar.color = “blue”;
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {
alert(this.color);
};
(2) 공장 방식
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();
위의 이것 도 함수 전달 매개 변수 유형 으로 바 꿀 수 있 습 니 다.
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();
그러나 위의 방식 은 대상 을 만 들 때마다 함 수 를 한 번 만들어 야 하기 때문에 아래 의 방식 으로 바 뀌 었 지만 의미 적 으로 대상 을 대상 으로 하 는 방법 같 지 않 습 니 다.
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();
(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(“red”,4,23);
var oCar2 = new Car(“blue”,3,25);
(4) 원형 방식
가장 기본 적 인 원형 방식 은 다음 과 같다: 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();
그러나 위의 이러한 문제 가 있 습 니 다. 여러 개의 인 스 턴 스 가 필요 하 다 면 공유 대상 은 불가능 합 니 다 (다음 과 같은 예 는 문제 가 있 는 예 입 니 다).
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"
그래서 위의 문제 에 대해 혼합 구조 함수 / 원형 방식 (다음 과 같다) 이 있 습 니 다.
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"
이렇게 함 수 는 한 번 만 만 들 고 모든 대상 은 자신의 대상 속성 을 가지 고 있 습 니 다.
위의 방식 은 대상 처럼 보이 지 않 기 때문에 동적 원형 방식 (아래) 으로 이 종 류 를 다시 썼 습 니 다.
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;

}
}
(7) 혼합 공장 방식 (공장 방식 에 비해 이런 방식 은 그것 을 진정한 구조 함수 처럼 보이 게 한다. 왜냐하면 new 조작 자 를 사용 해 야 하기 때문이다):
function Car() {
var oTempCar = new Object;
oTempCar.color = “blue”;
oTempCar.doors = 4;
oTempCar.mpg = 25;
oTempCar.showColor = function() {

alert(this.color);

};
return oTempCar;
}
var car = new Car();
학습 소결: prototype 의 등장 은 주로 자바 script 의 대상 을 대상 으로 프로 그래 밍 하기 위 한 것 입 니 다.혼합 구조 함수 / 원형 방식 이 가장 자주 사용 되 는데 이런 방식 을 사용 할 수 없 을 때 보통 혼합 공장 방식 을 사용한다.