roadmap
9. 프로토타입, 클래스, 인스턴스 본문
{ } 표기법으로 빈 객체를 생성할 수도 있지만
생성자를 사용하여 객체를 생성할 수 있다
|
1
2
3
4
5
6
7
8
9
10
11
|
function Make(a,b,c) {
this.a = a;
a = 1111;
}
var z = new Make(0);
console.log(z);
var array = new Array(1,1,2,3);
var today = new Date();
|
cs |
생성자 함수는 일반적으로 반환값이 없다.
하지만 생성자 함수에서 결과값으로 객체를 반환하면 반환값을 가질 수는 있다.
이 객체는 new 문장의 결과가 된다. 그리고 생성자 안의 this가 가리키고 있던 객체는 폐기된다.
프로토타입은 객체지향적인 방법으로 프로그램을 작성하게 해준다.
자바스크립트의 모든 객체는 프로토타입객체를 내부적으로 참조하고 있다.
지금껏 모든 객체가 참조하고 있던 __proto__이다.
그래서 모든 객체는 프로토타입의 프로퍼티를 자신의 프로퍼티로 사용할 수 있다.
(자바스크립트의 객체는 자신의 프로토타입에 있는 프로퍼티를 상속 받는다.)
new 연산자를 사용하면 객체가 생성되고,
이때 생성된 객체는 자신을 만들어낸 생성자의 prototype의 프로퍼티 값을 자신의 프로토타입으로 설정한다.
prototype 프로퍼티 초기값으로 프로퍼티가 하나 있는 객체로 지정된다.
이 프로퍼티가 contructor인데, 프로토타입과 관련이 있는 생성자 함수를 가리킨다.
그래서 모든 인스턴스는 constructor를 가지고 있다.
|
1
2
3
4
5
6
7
8
9
10
11
|
// 생성자 함수는 인스턴스의 프로퍼티에 인수로 다른 값들을 초기화 시킨다
function Rectangle(w, h) {
this.width = w;
this.height = h;
}
// 프로토 타입 객체는 각 인스턴스가 공유해야 하는 메서드를 정의한다
Rectangle.prototype.area = function() {
return this.width * this.height;
}
|
cs |
프로퍼티는 프로토타입에서 새로운 객체로 복사하는 것이 아니다.
따라서 프로토타입 객체를 사용하면 각 객체가 프로토타입의 프로퍼티를 상속받아 필요로 하는
메모리의 양을 상당히 줄일 수 있다.
또한 프로토타입에 새로운 프로퍼티를 추가하면, 이미 생성되었던 객체에도 추가된 프로퍼티를 상속받는다.
이것은 기존의 클래스에 새로운 메서드를 추가할 수 있다는 사실이다.
객체 o의 프로퍼티인 p를 읽을 때, 자바스크립트는 o에 p라는 이름을 가진 프로퍼티가 있는지 검사한다.
만약 없다면 o의 프로퍼티인 p를 읽을 때, o의 프로토타입 객체에 p라는 프로퍼티가 있는지를 검사한다.
이것이 프로토타입 기반의 상속 원리이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
c = new Rectangle(3, 4);
d = new Rectangle(2, 4);
// area는 c에 정의되어 있지 않으므로 c의 프로토타입 객체를 검사한다.
c.area();
// pi는 c에 정의되어 있지 않으므로 pi를 c의 새로운 프로퍼티로 생성한다.
c.pi = 4;
// w, h는 프로토타입 객체에를 볼 필요없이 c에서 반환된다.
a = c.w*c.h;
// pi는 d에 정의되어 있지 않으므로 d의 프로토타입 객체를 검사한다.
// w, h는 프로토타입을 볼 필요없이 d에서 반환한다.
a = d.pi*d.w*d.h;
|
cs |
한 객체에서 함수와 프로퍼티를 관리하는 방법이 다르기 때문에 이런 용어를 사용한다.
자바스크립트는 클래스를 지원하지 않지만 생성자를 통해 클래스와 동일하게 사용 가능하다.
클래스 기반의 객체지향 언어들은 모두 한 클래스에 속하는 여러 개의 객체가 있을 수 있다.
이런 객체를 클래스의 인스턴스라고 부른다.
인스턴스 프로퍼티 : 한 클래스에 속하는 인스턴스들의 프로퍼티
인스턴스 메서드 : 인스턴스 프로퍼티와는 달리 인스턴스만의 사본을 가지지 않는다.
대신 인스턴스 메서드는 클래스의 모든 인스턴스가 공유한다. (prototype의 메서드와 같은 말이다.)
클래스 프로퍼티 : 인스턴스와 관계 없는 클래스에만 속한 프로퍼티이다.
클래스와 연관되어 논리적인 보호 영역이 있다.
클래스 메서드 : 클래스 메서드는 인스턴스와 무관하고, 클래스 자체를 통해서만 호출된다.
클래스 프로퍼티와 클래스 메서드는 전역에서 접근할 수 있다.
클래스 메서드는 특정한 객체에서 작동하는 것이 아니여서 클래스를 통하는 함수라고 생각하면 된다.
이 둘은 자바스크립트 네임스페이스에서 보호 영역이 있어서 충돌을 방지한다.
클래스 메서드를 정의하기 위해선 함수를 생성자 함수의 프로퍼티로 만들면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
// 생성자 함수를 정의한다.
function Circle(radius) {
// r은 인스턴스 프로퍼티이며, 생성자 안에서 정의되고 초기화된다.
this.r = radius;
}
// Circle.PI는 클래스 프로퍼티이고, 생성자 함수의 프로퍼티이다.
Circle.PI = 3.14159;
// 원 면적을 계산하는 인스턴스 메서드이다.
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
// 이 클래스 메서드는 반지름이 큰 객체를 반환한다.
Circle.max = function(a,b) {
if (a.r > b.r) return a;
else return b;
}
var c= new Circle(1.0); // Circle 클래스의 인스턴스를 만든다.
c.r = 2.2; // 인스턴스 프로퍼티 r을 지정한다.
var a = c.area(); // 인스턴스 메서드 area()를 호출한다.
var x = Math.exp(Circle.PI); // 클래스 프로퍼티인 PI를 이용하여 계산한다.
var d = new Circle(1.2); // 다른 Circle 인스턴스를 만든다.
var bigger = Circle.max(c,d); // 클래스 메서드인 max()를 호출한다.
|
cs |
'web programming > JavaScript' 카테고리의 다른 글
| 8. 변수의 유효 범위(scope chain) (0) | 2020.08.07 |
|---|---|
| 7. 예외 처리 (0) | 2020.08.05 |
| 6. 배열 (0) | 2020.08.05 |
| 5. 객체 (0) | 2020.08.05 |
| 4. 값과 참조 (0) | 2020.08.05 |
