AJAX 기본 사항: JavaScript에서 클래스 구현 JavaScript에서는 function 키워드를 사용하여 "클래스"를 정의하고 클래스에 멤버를 추가하는 방법을 사용할 수 있습니다. 함수 내에서 이 포인터를 통해 참조되는 변수나 메서드는 클래스의 멤버가 됩니다. 예를 들어
다음은 코드 조각입니다.
function class1(){
var s="abc";
this.p1=s;
this.method1=함수(){
Alert("테스트 방법입니다.");
}
}
var obj1=새 클래스1();
new class1()을 통해 객체 obj1을 획득하고, 객체 obj1은 속성 p1과 메소드 method1을 자동으로 획득합니다.
JavaScript에서는 함수의 정의 자체가 클래스의 생성자입니다. 앞에서 소개한 객체의 속성과 new 연산자의 사용법을 결합하여 new를 사용하여 객체를 생성하는 과정을 설명합니다.
(1) 인터프리터는 new 연산자를 만나면 빈 객체를 생성합니다.
(2)
class1 함수를 실행하기 시작하고 그 안의 this 포인터를 새로 생성된 객체를 가리킵니다.
속성에 값을 할당할 때 인터프리터는 객체에 대한 속성을 생성합니다. 예를 들어 class1에서 this.p1=s 명령문이 실행되면 속성 p1이 추가되고 변수 s의 값이 생성됩니다. 함수 실행은 이 객체를 초기화하는 과정, 즉 생성자의 역할을 구현하는 과정입니다.
(4) 함수가 실행되면 new 연산자는 초기화된 객체를 반환합니다.
이 전체 과정을 통해 기본적인 객체지향 메커니즘이 JavaScript로 구현됩니다. JavaScript에서 함수의 정의는 실제로 객체의 생성자를 구현하는 것이며 함수를 통해 완성되는 것임을 알 수 있습니다. 이 방법의 단점은 다음과 같습니다.
· 모든 초기화 문과 멤버 정의를 함께 사용하면 코드 논리가 명확하지 않고 복잡한 기능을 구현하기가 어렵습니다.
·클래스의 인스턴스가 생성될 때마다 생성자는 한 번씩 실행되어야 합니다. 생성자에 정의된 속성과 메서드는 항상 반복적으로 생성됩니다. 예를 들어
다음은 코드 조각입니다.
this.method1=function(){
Alert("테스트 방법입니다.");
}
여기서 method1이 class1의 인스턴스를 생성할 때마다 한 번 생성되므로 메모리 낭비가 발생합니다. 다음 섹션에서는 생성자에서 클래스 멤버를 정의함으로써 발생하는 단점을 해결할 수 있는 또 다른 클래스 정의 메커니즘인 프로토타입 객체를 소개합니다.
프로토타입 객체를 사용하여 클래스 멤버 정의
이전 섹션에서는 클래스 구현 메커니즘과 생성자 구현을 소개했습니다. 이제 클래스에 멤버를 추가하는 또 다른 메커니즘인 프로토타입 객체를 소개합니다. 새로운 함수가 생성되면 객체의 멤버가 생성된 객체에 자동으로 할당됩니다. 예를 들면
다음과 같습니다. 코드 조각은 다음과 같습니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
//단 하나의 속성 prop으로 클래스 함수 class1(){ 정의
this.prop=1;
}
//함수의 프로토타입 속성을 사용하여 클래스의 새 멤버를 정의합니다. class1.prototype.showProp=function(){
경고(this.prop);
}
//class1의 인스턴스 생성 var obj1=new class1();
//프로토타입 프로토타입 객체 obj1.showProp()를 통해 정의된 showProp 메서드를 호출합니다.
//-->
</script>
프로토타입은 프로토타입 객체에 메서드와 속성을 추가, 수정, 삭제할 수 있는 JavaScript 객체입니다. 이렇게 하면 클래스에 멤버 정의가 추가됩니다.
이제 함수의 프로토타입 객체를 이해했으니 new의 실행 과정을 살펴보겠습니다.
(1) 새 개체를 만들고 이 포인터가 이를 가리키도록 합니다.
(2) 이 새 개체에 함수 프로토타입 개체의 모든 멤버를 할당합니다.
(3) 함수 본문을 실행하고 개체를 초기화합니다.
(4) ) 개체를 반환합니다. (1)에서 생성되었습니다.
앞선 절에서 소개한 new의 실행 과정과 비교하면 프로토타입을 이용해 객체를 초기화하는 과정이 추가로 존재한다. 이는 해당 클래스의 인스턴스 프로토타입인 프로토타입의 문자 그대로의 의미와도 일치한다. 이 초기화 프로세스는 함수 본문(생성자)이 실행되기 전에 발생하므로 프로토타입에 정의된 속성과 메서드를 함수 본문 내에서 호출할 수 있습니다.
다음은 코드 조각입니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
//단 하나의 속성 prop으로 클래스 정의
함수 클래스1(){
this.prop=1;
this.showProp();
}
//함수의 프로토타입 속성을 사용하여 클래스의 새 멤버를 정의합니다.
class1.prototype.showProp=함수(){
경고(this.prop);
}
//class1의 인스턴스 생성
var obj1=새 클래스1();
//-->
</script>
이전 코드와 비교하면 여기서는 프로토타입에 정의된 showProp 메소드가 class1 내부에서 호출되므로 객체 생성 과정에서 대화 상자가 팝업되어 prop 속성의 값이 1임을 보여줍니다.
프로토타입 객체의 정의는 클래스 인스턴스를 생성하는 명령문 앞에 있어야 하며, 그렇지 않으면 작동하지 않습니다.
다음은 코드 조각입니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
//단 하나의 속성 prop으로 클래스 정의
함수 클래스1(){
this.prop=1;
this.showProp();
}
//class1의 인스턴스 생성
var obj1=새 클래스1();
//인스턴스를 생성하는 명령문 이후에 클래스에 대한 새 멤버를 정의하려면 함수의 프로토타입 속성을 사용합니다. 이는 나중에 생성된 객체에만 적용됩니다.
class1.prototype.showProp=함수(){
경고(this.prop);
}
//-->
</script>
이 코드는 런타임 오류를 생성합니다. 이는 클래스를 인스턴스화하는 명령문 다음에 메소드가 정의되므로 표시 객체에 showProp 메소드가 없음을 나타냅니다.
프로토타입 객체는 디자인 클래스의 멤버 전용임을 알 수 있습니다. 또한 프로토타입에는 생성자에 대한 참조를 나타내는 중요한 속성도 있습니다
. 다음은 코드 조각입니다.
함수 클래스1(){
경고(1);
}
class1.prototype.constructor(); //클래스 생성자를 호출합니다.
이 코드가 실행되면 텍스트 "1"이 표시된 대화 상자가 나타납니다. 이는 프로토타입이 클래스 정의와 밀접하게 관련되어 있음을 보여줍니다. 실제: class1.prototype.constructor===class1.
JavaScript 클래스의 디자인 패턴
클래스를 정의하는 방법과 클래스의 인스턴스를 초기화하는 방법을 이미 소개했습니다. 클래스는 함수에 의해 정의된 함수 본문에 멤버를 추가할 수 있으며 프로토타입을 사용하여 클래스의 멤버를 정의할 수도 있습니다. . 프로그래밍 코드가 혼란스러워 보입니다. 클래스를 명확하게 정의하는 방법은 무엇입니까? 클래스의 구현 패턴은 다음과 같습니다.
JavaScript에서는 개체의 유연한 특성으로 인해 생성자의 클래스에 멤버를 추가할 수도 있는데, 이는 유연성을 높일 뿐만 아니라 코드의 복잡성도 증가시킵니다. 코드의 가독성과 개발 효율성을 높이기 위해 멤버를 정의하는 방식을 사용하고 대신 프로토타입 객체를 사용할 수 있습니다. 이런 방식으로 함수의 정의는 구현에 맞춰 클래스의 생성자가 됩니다. 기존 클래스의 경우: 클래스 이름과 생성자 이름이 동일합니다. 예:
다음은 코드 조각입니다.
함수 클래스1(){
//건설자
}
//멤버 정의
class1.prototype.someProperty="샘플";
class1.prototype.someMethod=function(){
//메소드 구현 코드
}
위 코드를 통해 클래스 정의가 훨씬 명확해졌지만, 속성이나 메소드를 정의할 때마다 class1.prototype을 사용해야 하므로 코드 크기가 커질 뿐만 아니라 가독성도 부족합니다. 추가 개선을 위해 유형이 지정되지 않은 객체의 생성자를 사용하여 프로토타입 객체를 지정하여 클래스의 멤버 정의를 구현할 수 있습니다.
다음은 코드 조각입니다.
//클래스 정의 class1
함수 클래스1(){
//건설자
}
//프로토타입 객체를 지정하여 클래스의 멤버 정의를 구현합니다.
class1.prototype={
someProperty:"샘플", someMethod:function(){
//메서드 코드
},
...//기타 속성 및 메서드.
}
위의 코드는 class1을 매우 명확하게 정의하고 있으며, 생성자는 클래스 이름으로 직접 구현되며, 멤버는 형식화되지 않은 객체를 사용하여 정의됩니다. 모든 속성과 메서드는 목록으로 구현되며 동시에 초기화될 수 있습니다. 정의된 속성의 값입니다. 이는 또한 전통적인 객체 지향 언어의 클래스 구현과 더 비슷합니다. 다만 생성자 정의와 클래스 멤버 정의를 두 부분으로 나눈 것뿐입니다. 이는 JavaScript에서 클래스를 정의하기 위한 고정 패턴으로 간주할 수 있으므로 사용 시 이해하기가 더 쉽습니다.
참고: 클래스 멤버 간 참조는 이 포인터를 통해 이루어져야 합니다. 예를 들어 위 예제의 someMethod 메서드에서 someProperty 속성을 사용하려면 this.someProperty 형식을 전달해야 합니다. 속성과 메서드는 독립적이며 이 포인터를 통해 개체에 연결됩니다.