자 바스 크 립 트 가 대상 을 대상 으로 하 는 생 성 대상 기반 (1)
var Car = new Object();
Car.color = "blue";
Car.doors = 4;
Car.mpg = 25;
Car.showColor = function() {
return this.color;
};
document.write(Car.showColor());// :blue
위의 코드 에서 대상 Car 를 만 듭 니 다.그리고 몇 가지 속성 을 설정 합 니 다. 색깔 은 파란색 이 고 네 개의 문 이 있 으 며 갤 런 당 25 마일 을 달 릴 수 있 습 니 다.마지막 속성 은 실제로 함 수 를 가리 키 는 지침 으로 이 속성 이 방법 이라는 것 을 의미한다.이 코드 를 실행 하면 대상 Car 를 사용 할 수 있 습 니 다.그러나 여기 서 문제 가 하나 있 습 니 다. 바로 여러 개의 Car 인 스 턴 스 를 만들어 야 할 수도 있 습 니 다. 그러면 우 리 는 비슷 한 코드 를 많이 반복 할 것 입 니 다. 그러면 매우 번 거 로 울 것 입 니 다.2. 공장 방식 상기 여러 개의 유사 한 대상 성명 문 제 를 풀 려 면 개발 자 는 특정한 유형의 대상 을 만 들 고 돌아 갈 수 있 는 공장 방식 을 만 들 었 습 니 다.이런 방식 은 바로 실례 화 대상 이 대량으로 중복 되 는 문 제 를 해결 하기 위 한 것 이다.(1) 매개 변수 없 는 공장 방식 예 를 들 어 함수 createCar () 는 앞 에 열 거 된 Car 대상 을 만 드 는 작업 을 봉인 하 는 데 사용 할 수 있 습 니 다.
function createCar() {
var TempCar = new Object();
TempCar.color = "blue";
TempCar.doors = 4;
TempCar.mpg = 25;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar();
var Car2 = createCar();
document.write(Car1.showColor()+"
");// :blue
document.write(Car2.showColor());// :blue
여기 서 첫 번 째 예 에 있 는 모든 코드 는 createCar () 함수 에 포함 되 어 있 습 니 다.이 밖 에 템 플 카 대상 을 함수 값 으로 되 돌려 주 는 추가 코드 도 있다.이 함 수 를 호출 하면 새 대상 을 만 들 고 필요 한 모든 속성 을 부여 합 니 다. 앞에서 설명 한 Car 대상 을 복사 합 니 다.따라서 이런 방법 을 통 해 우 리 는 Car 대상 의 두 가지 버 전 (Car 1 과 Car 2) 을 쉽게 만 들 수 있 고 그들의 속성 은 완전히 같다.(2) 매개 변수 가 있 는 공장 방식 우 리 는 또한 createCar () 함 수 를 수정 하여 각 속성의 기본 값 을 전달 할 수 있 습 니 다. 속성 기본 값 을 간단하게 부여 하 는 것 이 아 닙 니 다.
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = function() {
return this.color;
};
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"
");// :red
document.write(Car2.showColor());// :blue
createCar () 함수 에 파 라 메 터 를 추가 하면 만 들 Car 대상 의 color, doors, mpg 속성 에 값 을 부여 할 수 있 습 니 다.이것 은 두 대상 으로 하여 금 같은 속성 을 가지 게 하지만 서로 다른 속성 치 를 가지 게 한다. 공장 방식 은 반복 적 인 실례 화 문 제 를 해 결 했 지만 문제 가 하나 있다. 바로 앞의 예 에서 함수 createCar () 를 호출 할 때마다 새로운 함수 쇼 Color () 를 만들어 야 한 다 는 것 은 모든 대상 이 자신의 쇼 Color () 버 전이 있다 는 것 을 의미한다.사실상 모든 대상 이 같은 함 수 를 공유한다.일부 개발 자 들 은 공장 함수 밖에서 대상 을 정의 하 는 방법 을 사용 한 다음 에 속성 을 통 해 이 방법 을 가리 키 며 이 문 제 를 피한다.
function showColor() {
return this.color;
};
function createCar(Color,Doors,Mpg) {
var TempCar = new Object();
TempCar.color = Color;
TempCar.doors = Doors;
TempCar.mpg = Mpg;
TempCar.showColor = showColor;
return TempCar;
};
var Car1 = createCar("red",4,23);
var Car2 = createCar("blue",3,25);
document.write(Car1.showColor()+"
");// :red
document.write(Car2.showColor());// :blue
위 에 재 작성 한 코드 에서 함수 createCar () 전에 함수 쇼 Color () 를 정의 하 였 습 니 다.createCar () 내부 에서 대상 에 게 이미 존재 하 는 쇼 Color () 함 수 를 가리 키 는 지침 을 부여 합 니 다.기능 적 으로 함수 대상 을 반복 적 으로 만 드 는 문 제 를 해결 합 니 다.그러나 의미 상 이 함 수 는 대상 의 방법 같 지 않다.이 모든 문제 들 은 개발 자가 정의 한 구조 함수 의 출현 을 야기 시 켰 다.3. 구조 함수 방식 구조 함 수 를 만 드 는 것 은 공장 방식 의 함수 처럼 쉽다.첫 번 째 단 계 는 구조 함수 의 이름 을 선택 합 니 다.관례 에 따 르 면 이 이름 의 이니셜 은 이니셜 과 보통 소문 자 변수 명 으로 나 뉜 다.이 점 을 제외 하고 구조 함 수 는 공장 방식 의 함수 처럼 보인다.아래 의 예 를 보십시오.
function Car(Color,Doors,Mpg) {
this.color = Color;
this.doors = Doors;
this.mpg = Mpg;
this.showColor = function() {
return this.color;
};
};
var Car1 = new Car("red",4,23);
var Car2 = new Car("blue",3,25);
document.write(Car1.showColor()+"
");// :red
document.write(Car2.showColor());// :blue
다음은 위의 코드 와 공장 방식 의 차 이 를 설명 하 겠 습 니 다.우선 구조 함수 에 대상 을 만 들 지 않 고 this 키 워드 를 사용 합 니 다.new 연산 자 구조 함 수 를 사용 할 때 첫 번 째 줄 코드 를 실행 하기 전에 대상 을 만 듭 니 다. this 를 사용 해 야 대상 에 접근 할 수 있 습 니 다.그 다음 에 this 속성 을 직접 부여 할 수 있 습 니 다. 기본 적 인 상황 에서 구조 함수 의 반환 값 입 니 다 (return 연산 자 를 명확 하 게 사용 할 필요 가 없습니다).이제 new 연산 자 와 대상 명 Car 로 대상 을 만 드 는 것 이 더 비슷 합 니 다. ECMAScript 의 일반 대상 생 성 방식 입 니 다. 공장 방식 의 함수 처럼 구조 함 수 는 함수 생 성 을 반복 하여 모든 대상 에 게 독립 된 함수 버 전 을 만 듭 니 다.그러나 공장 방식 의 함수 와 비슷 하고 외부 함수 로 구조 함 수 를 다시 쓸 수도 있다. 마찬가지 로 이렇게 하 는 것 은 의미 적 으로 아무런 의미 가 없다.이것 이 바로 아래 에서 말 하고 자 하 는 원형 방식 의 장점 이다.다음 글 에 서 는 대상 을 대상 으로 하 는 원형 방식 과 다른 종합 적 인 방식 을 상세 하 게 분석 할 것 이다.
이상 은 본 고의 모든 내용 입 니 다. 여러분 의 자 바스 크 립 트 프로 그래 밍 학습 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.