JavaScript 정의 클래스 나 함수 의 몇 가지 방식 소결

8422 단어 정의 클래스
대상 을 대상 으로 하면 우 리 는 유형,대상,포장,계승,다 형 을 생각 할 수 있다.(인민 체신 출판사,조력,장 신 역.영어 이름 은:Professional JavaScript for Web Developers)라 는 책 에서 묘사 한 것 은 비교적 상세 한 편 이다.자 바스 크 립 트 에서 클래스 를 정의 하 는 여러 가지 방법 을 봅 시다.1.공장 방식 자바 스 크 립 트 에서 자신의 클래스 와 대상 을 만 듭 니 다.우 리 는 반드시 파악 해 야 합 니 다.우 리 는 자바 스 크 립 트 에서 대상 의 속성 이 대상 을 만 든 후에 동적 으로 정의 할 수 있다 는 것 을 알 고 있 습 니 다.예 를 들 어 아래 의 코드:
 
<script type="text/javascript">
//
var oCar = new Object();
oCar.color = "red";
oCar.doors = 4;
oCar.showColor = function() {
alert(this.color);
}
//
oCar.showColor();
</script>
우 리 는 o Car 대상 을 쉽게 사용 할 수 있 지만 우 리 는 여러 개의 Car 인 스 턴 스 를 만 들 고 싶 습 니 다.우 리 는 하나의 함 수 를 사용 하여 위의 코드 를 밀봉 하여 실현 할 수 있 습 니 다.
 
//定义
function createCar() {
var oCar = new Object();
oCar.color = "red";
oCar.doors = 4;
oCar.showColor = function() {
alert(this.color);
}
return oCar;
}
//调用
var ocar1 = createCar();
var ocar2 = createCar();
ocar1.color = "black";
ocar1.showColor();
ocar2.showColor();
</script>
참고 로 자바 script 대상 의 기본 구성원 속성 은 모두 Public 입 니 다.이런 방식 을 우 리 는 공장 방식 이 라 고 부 르 며 특정 유형의 대상 을 만 들 고 돌아 갈 수 있 는 공장 을 만 들 었 다.이렇게 하 는 것 은 좀 재 미 있 지만 대상 을 대상 으로 하 는 과정 에서 우리 가 자주 사용 하 는 대상 을 만 드 는 방법 은:Car car=new Car()이다.new 키 워드 를 사용 하 는 것 은 이미 사람들의 마음 에 깊이 파고 들 었 기 때문에 우 리 는 위의 방법 으로 항상 어색 함 을 정의 하고 호출 할 때마다 새로운 속성 과 함 수 를 만 들 며 기능 적 으로 도 현실 적 이지 않다.내 려 와 서 구조 함수 의 형식 정의 류 를 보 자.2.구조 함수 라 는 방식 은 공장 함수 처럼 보인다.구체 적 인 표현 은 다음 과 같다.
 
<script type="text/javascript">
//定义
function Car(color, doors) {
this.color = color;
this.doors = doors;
this.showColor = function() {
alert(this.color);
};
}
//调用
var car1 = new Car("red", 4);
var car2 = new Car("blue", 4);
car1.showColor();
car2.showColor();
</script>
은 효과 가 뚜렷 하고 차이 가 있 는 것 같다.좀 재 미 있 겠 다.구조 함수 내부 에서 대상 을 만 드 는 데 this 키 워드 를 사용 하고 new 연산 자 를 사용 하여 대상 을 만 드 는 것 이 매우 친절 합 니 다.그러나 문제 도 있 습 니 다.new 대상 이 될 때마다 모든 속성 을 만 듭 니 다.함수 의 생 성 을 포함 합 니 다.즉,여러 대상 이 완전히 독립 된 것 입 니 다.우리 가 정의 하 는 목적 은 방법 과 데 이 터 를 공유 하 는 것 입 니 다.그러나 car1 대상 과 car2 대상 은 모두 각자 의 독립 된 속성 과 함수 입 니 다.적어도 우 리 는 방법 을 공유 해 야 합 니 다.이것 이 바로 원형 방식 의 장점 이다.3.프로 토 타 입 방식 은 대상 의 prototype 속성 을 이용 하여 새로운 대상 이 의존 하 는 프로 토 타 입 을 만 드 는 것 을 볼 수 있 습 니 다.방법 은 다음 과 같 습 니 다.
 
<script type="text/javascript">
//定义
function Car() {
};
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.drivers = new Array("Tom", "Jerry");
Car.prototype.showColor = function() {
alert(this.color);
}
//调用:
var car1 = new Car();
var car2 = new Car();
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //结果:Tom,Jerry,stephen
alert(car2.drivers); //结果:Tom,Jerry,stephen
//可以用json方式简化prototype的定义:
Car.prototype =
{
color: "red",
doors: 4,
drivers: ["Tom", "Jerry",'safdad'],
showColor: function() {
alert(this.color);
}
}</script>
먼저 이 코드 의 구조 함수 입 니 다.그 중에서 코드 가 없습니다.그 다음 에 대상 의 prototype 속성 을 통 해 속성 을 추가 하여 Car 대상 의 속성 을 정의 합 니 다.이런 방법 은 매우 좋 지만 문 제 는 Car 의 대상 이 Array 지침 을 가리 키 는 것 이다.Car 의 두 대상 은 모두 같은 Array 배열 을 가리 키 는데 그 중에서 한 대상 car1 이 속성 대상 의 인용(배열 Array)을 바 꿀 때 다른 대상 car2 도 동시에 바 뀌 는 것 은 허용 되 지 않 는 다.이 동시에 이 문 제 는 원형 에 초기 화 된 파 라 메 터 를 가 져 오지 못 해 구조 함수 가 정상적으로 초기 화 되 지 못 하 는 것 으로 나 타 났 다.이것 은 다른 방법 으로 해결 해 야 한다.그것 이 바로 혼 합 된 구조 함수/원형 모델 이다.4.혼 합 된 구조 함수/원형 모델 은 구조 함수 와 원형 방식 을 결합 하여 정의 류 를 사용 하면 매우 편리 하 다.
 
<script type="text/javascript">
//定义
function Car(color,doors)
{
this.color=color;
this.doors=doors;
this.drivers=new Array("Tom","Jerry");
}
Car.prototype.showColor=function(){
alert(this.color);
}
//调用:
var car1=new Car('red',4);
var car2=new Car('blue',4);
car1.showColor();
car2.showColor();
alert(car1.drivers);
car1.drivers.push("stephen");
alert(car1.drivers); //结果:Tom,Jerry,stephen
alert(car2.drivers); //结果:Tom,Jerry
alert(car1 instanceof Car);
</script>
이 방법 은 속성 을 내부 에 두 고 정의 하 며 방법 을 밖 에 두 고 prototype 을 이용 하여 정의 하 는 것 이다.세 번 째 방법의 문 제 를 해결 했다.이런 방법 은 사실 매우 우호 적 이 어야 한다.그러나 자바 의 문법 에 비해 조 화 롭 지 못 하고 혼 란 스 러 워 야 한다.C++에 있어 우 리 는 그렇게 번 거 로 운 느낌 이 들 지 않 는 다.그러나 C+를 개발 하 는 연구 개발 자 들 은 일반적으로 자바 스 크 립 트 와 관련 되 지 않 고 J2EE 의 연구 개발 자 들 에 게 이런 방식 은 항상 어색 하 다.항상 우호 적 인 포장 이 아니 라 시각 적 인 포장 효과 가 좋 지 않 을 뿐 시각 적 인 포장 효 과 를 얻 으 려 면 이런 방법의 효 과 를 얻 을 수 있 는 것 도 개인 적 으로 비교적 번거롭다 고 생각 할 수 있다.그것 이 바로 동적 원형 법 이다.5.동적 원형 은 다른 언어 를 사용 하 는 개발 자 에 게 혼 합 된 구조 함수/원형 방식 을 사용 하 는 것 이 조 화 롭 지 못 하 다.결국 유형 을 정의 할 때 대부분 대상 언어 는 속성 과 방법 에 대해 시각 적 인 포장 을 했다.아래 의 C\#클래스:
 
class Car //class
{
public string color = "red";
public int doors = 4;
public int mpg = 23;
public Car(string color, int doors, int mpg) //constructor
{
this.color = color;
this.doors = doors;
this.mpg = mpg;
}
public void showColor() //method
{
Console.WriteLine(this.color);
}
}
C\#는 Car 류 의 모든 속성 과 방법 을 잘 포 장 했 기 때문에 이 코드 를 보면 어떤 기능 을 실현 해 야 하 는 지 알 수 있 고 대상 의 정 보 를 정의 합 니 다.혼 합 된 구조 함수/원형 방식 을 비판 하 는 사람들 은 구조 함수 메모리 에서 속성 을 찾 고 외부 에서 방법 을 찾 는 것 은 논리 에 맞지 않 는 다 고 생각한다.그래서 그들 은 보다 우호 적 인 인 코딩 스타일 을 제공 하기 위해 동적 원형 방법 을 설계 했다.동적 원형 방법의 기본 적 인 생각 은 혼 합 된 구조 함수/원형 방식 과 같다.즉,구조 함수 에서 비 함수 속성 을 정의 하고 함수 속성 은 원형 속성 을 이용 하여 정의 한다.유일한 차 이 는 대상 에 게 방법 을 부여 하 는 위치 다.다음은 동적 원형 방법 으로 재 작성 한 Car 클래스:
 
<script type="text/javascript">
//定义
function Car() {
this.color = "red";
this.doors = 4;
this.drivers = new Array("Tom", "Jerry");
if (typeof Car._initialized == "undefined") {
Car.prototype.showColor = function() {
alert(this.color);
}
//............
}
//最后定义
Car._initialized = true;
}
</script>
에서 typeof Car 를 검사 할 때 까지.initialized 가'undefined'와 같 을 지 여 부 는 이 구조 함수 에 변화 가 없 었 습 니 다.이 코드 는 동적 원형 방법 에서 가장 중요 한 부분 이다.이 값 이 정의 되 지 않 으 면 구조 함 수 는 원형 방식 으로 대상 의 방법 을 계속 정의 한 다음 에 Car.initialized 를 true 로 설정 합 니 다.이 값 이 정의 되면(값 이 true 일 때 type:of 의 값 이 Boolean)이 방법 을 만 들 지 않 습 니 다.요컨대 이 방법 은 표 지 를 사용한다(initialized)원형 에 어떤 방법 이 부여 되 었 는 지 판단 합 니 다.이 방법 은 전통 적 인 OOP 개발 자 를 기 쁘 게 하기 위해 한 번 만 만 만 들 고 값 을 부여 합 니 다.이 코드 는 다른 언어의 클래스 정의 처럼 보 입 니 다.6.혼합 공장 방식 은 보통 이전 방식 을 응용 할 수 없 을 때 변 하 는 방법 이다.가짜 구조 함 수 를 만 들 고 다른 대상 의 새로운 인 스 턴 스 만 되 돌려 주 는 것 이 목적 이다.이 코드 는 공장 함수 와 매우 비슷 해 보인다.
 
function Car() {
var oTempCar = new Object();
oTempCar.color="red";
oTempCar.doors=4;
oTempCar.mpg=23;
oTempCar.showColor = function() {
alert(this.color);
}
return oTempCar;
}
은 고전 방식 과 달리 new 연산 자 를 사용 하여 진정한 구조 함수 처럼 보인다.var o Car=new Car().Car()구조 함수 내부 에서 new 연산 자 를 호출 했 기 때문에 두 번 째 new 연산 자(구조 함수 이외)를 무시 합 니 다.구조 함수 내부 에 생 성 된 대상 은 변수 var 로 전 달 됩 니 다.이런 방식 은 대상 방법의 내부 관리 에 있어 전형 적 인 방식 과 똑 같은 문 제 를 가진다.강력 한 건의:부득이 한 경우(제1 5 장 참조)를 제외하고는 이런 방식 을 사용 하지 않 는 것 이 좋다.요약:(어떤 방식 으로)현재 가장 광범 위 하 게 사용 되 는 것 은 혼합 구조 함수/원형 방식 이다.그 밖 에 동적 원형 방법 도 유행 하고 기능 적 으로 구조 함수/원형 방식 과 등가 이다.이 두 가지 방식 중 어느 하 나 를 채택 할 수 있다.그러나 고전적 인 구조 함수 나 원형 방식 을 단독으로 사용 하지 마라.왜냐하면 코드 에 문 제 를 가 져 올 수 있 기 때문이다.
 
//ps
//static class (1:function)
var CarCollection = new function() {
var _carCollection = new Array(); //global,private
this.Add = function(objCar) {
alert('Add');
}
this.Get = function(carid) {
alert('Get');
}
}
//static class (2:json)

var Car = {
color: 'red',
doors: 4,
showColor: function() { alert(this.color); }
}
Car.showColor();

좋은 웹페이지 즐겨찾기