1. 객체의 정의
2. 생성자 객체를 정의하는 방법
생성자에 대해
3. new 연산자, 생성자 함수, 그리고 this
05-01.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-01</title>
</head>
<body>
<script type="text/javascript">
// 생성자 함수: 객체를 정의하는 방법
// 이 함수는 Rectangle 생성자 함수로 설계되었습니다.
function Rectangle(x, y, w, h) {
// this 키워드는 생성자 함수에 의해 생성되는 객체를 나타냅니다.
// 따라서 다음의 구문은 pointX, pointY, width, height 프로퍼티를 생성자 함수에 의해
// 생성되는 객체에 추가하고 매개변수 x, y, w, h로 전달된 값을 pointX, pointY, width, height
// 프로퍼티에 대입하는 문장이 됩니다.
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
this.toString = function() {//this를 써서 접근한다.
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY
+ ', width : ' + this.width + ', height : ' + this.height + ' }';
};
// 생성자 함수는 return 문을 만들지 않습니다.
}
// new 연산자는 아무런 프로퍼티도 정의되어 있지 않은 비어있는 객체를 생성합니다.
// 객체 생성 이후 new 연산자는 지정된 생성자 함수를 호출하여 명시된 인자들을 전달하고
// 방금 생성돤 새로운 객체에 대한 참조를 생성자 함수 내의 this 키워드를 통해 전달합니다.
// 생성자 함수는 이 this 키워드와 전달된 인자 값들을 사용하여 새로운 객체를 초기화합니다.
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 300, 30, 50);
document.writeln(rect1 + '<br/>');
document.writeln(rect2 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
4. 객체의 멤버
이렇기때문에 객체의 프로토타입에 메소드를 생성하게된다.
멤버 접근 방법
다음은 생성자 함수를 통해서 접근되는 메소드를 만드는 방법에 관한 예제입니다.
05-02.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-02</title>
</head>
<body>
<script type="text/javascript">
// 생성자 함수의 프로퍼티와 메소드
function Area() { }
// Area 생성자 함수에 삼각형의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.triangle = function(base, height) {
return base * height / 2;
};
// Area 생성자 함수에 사각형의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.rectangle = function(width, height) {
return width * height;
};
// Area 생성자 함수에 원의 넓이를 계산하는 메소드를 추가합니다.
// Area 생성자 함수의 프로퍼티로 추가되어 Area 생성자 함수를 통해서만 접근합니다.
Area.circle = function(radius) {
return Math.PI * Math.pow(radius, 2);
};
document.writeln('Area.triangle(10, 6): ' + Area.triangle(10, 6) + '<br/>');
document.writeln('Area.rectangle(10, 6): ' + Area.rectangle(3, 20) + '<br/>');
document.writeln('Area.circle(5): ' + Area.circle(5).toFixed(2) + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
5. 프로토타입 객체
05-03.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-03</title>
</head>
<body>
<script type="text/javascript">
// 프로토타입 객체와 prototype 프로퍼티
function Rectangle(x, y, w, h) {
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
}
// 모든 함수가 가지고 있는 prototype 프로퍼티는 프로토타입 객체에 대한 연결을 가집니다.
// Rectangle 생성자 함수의 prototype 프로퍼티가 참조하는 객체에 toString 이란
// 이름의 프로퍼티를 추가하는데 그 값으로 함수 리터럴을 대입하여 메소드를 추가합니다.
// 이 메소드는 Rectangle 생성자 함수를 통해 생성되는 객체에 상속될 것입니다.
Rectangle.prototype.toString = function() {
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY
+ ', width : ' + this.width + ', height : ' + this.height + ' }';
};
// 위의 toString() 메소드와 마찬가지로 Rectangle 생성자 함수의 prototype 프로퍼티가
// 참조하는 객체에 area() 메소드를 추가하여, Rectangle 생성자 함수를 통해 생성되는
// 객체에 상속될 것입니다.
Rectangle.prototype.area = function() {
return this.width * this.height;
};
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 300, 30, 50);
document.writeln('rect1: ' + rect1 + '<br/>');
document.writeln('rect1.area(): ' + rect1.area() + '<br/>');
document.writeln('rect2: ' + rect2 + '<br/>');
document.writeln('rect2.area(): ' + rect2.area() + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
6. constructor 속성
05-04.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>05-04</title>
</head>
<body>
<script type="text/javascript">
// consturctor 프로퍼티
function Rectangle(x, y, w, h) {
this.pointX = x;
this.pointY = y;
this.width = w;
this.height = h;
}
Rectangle.prototype.toString = function() {
return 'Rectangle : { pointX : ' + this.pointX + ', pointY : ' + this.pointY
+ ', width : ' + this.width + ', height : ' + this.height + ' }';
};
Rectangle.prototype.area = function() {
return this.width * this.height;
};
var rect1 = new Rectangle(100, 120, 20, 30);
if (rect1.constructor == Rectangle)
document.writeln('rect1 객체의 생성자 함수는 Rectangle입니다.<br/>');
if (rect1.constructor.prototype == Rectangle.prototype)
document.writeln('rect1 객체의 생성자 함수의 프로토타입 객체는 Rectangle 생성자함수의 프로토타입 객체와 동일합니다.<br/>');
var rect2 = new rect1.constructor(250, 300, 30, 50);
document.writeln('rect2: ' + rect2 + '<br/>');
document.writeln('<br/>');
</script>
</body>
</html>
출력화면
7. 네임스페이스
FQN#은 FULL NAME임
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - 간단한 가위바위보 게임 만들기 (2) | 2015.01.27 |
|---|---|
| Javascript - 웹브라우저 별 이벤트 처리 (0) | 2015.01.25 |
| Javascript - 객체 생성 과정 및 상속 (0) | 2015.01.25 |
| Javascript - 로또 번호 생성기 만들기 (0) | 2015.01.23 |
| Javascript - 함수의 이해 (0) | 2015.01.22 |
| Javascript - 함수 유효범위와 클로저 (0) | 2015.01.22 |
| Javascript - 연산자, 제어문, 예외처리 (0) | 2015.01.21 |
| Javascript - 변수, 데이터 타입, 리터럴 (0) | 2015.01.21 |