생성자 함수를 이용한 객체생성
<!DOCTYPE html>
<!--
* JS 객체 : 이름과 값으로 구성된 집합 프로퍼티의 집합
이름이 붙어있는 데이터값들의 모음, 복합타입
* JS 모든 객체 : Object 생성자함수를 상속하며,
공통으로 Object에서 상속받은 프로퍼티 메소드가 있음.
* __proto__ : (프로토타입 객체)
=> JS 모든객체는 프로토타입이라고 불리는 객체를 내부적으로 참조함.
* 프로토타입 객체 : new 연산자와 Object 생성자 함수 호출을 통해 생성한 Object객체
==> 프로토타입 객체를 이용하면 좀 더 효율적으로 메소드를 추가할수 있음.
* prototype 프로퍼티
1) 모든 함수는 prototype 프로퍼티가 있으며, 함수가 정의될때 생성되고 초기화됨.
2) new 연산자는 빈 객체를 생성하고,
해당객체의 prototype 프로퍼티를 생성자 함수의 prototype 프로퍼티값을 이용해 설정,
3) 프로토타입 객체는 생성자 함수와 연결되고,
이 생성자 함수를 통해서 생성되는 객체들은 생성자 함수와 연결된 프로토타입 객체의
프로퍼티들을 똑같이 상속,
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 객체를 정의하는 방법 : 생성자 함수 사용 */
//생성자 함수 : 객체를 만드는틀.
//생성자의 이름 첫문자는 대문자포함(다른함수 구별하기 위함)
//초기화할뿐 다른 역할은 수행하지 않는 것이 원칙임.
//생성자 함수의 구현시 return 문은 사용하지 않음.
function Rectangle(x, y, w, h) {
this.pointX = x; //프로퍼티
this.pointY = y;
this.width = w;
this.height = h;
this.toString = function() {
return 'Retangle : {pointX : '+ this.pointX+
', pointY : ' +this.pointY+
', width : ' +this.width+
', height : '+this.height+
'}'
};
}
var rect1 = new Rectangle(100, 120, 20, 30);
var rect2 = new Rectangle(250, 200, 30, 50);
document.writeln(rect1 + '<br/>');
document.writeln(rect2 + '<br/>');
console.log(rect1);
</script>
</body>
</html>
* JS 객체 : 이름과 값으로 구성된 집합 프로퍼티의 집합
이름이 붙어있는 데이터값들의 모음, 복합타입
* JS 모든 객체 : Object 생성자함수를 상속하며,
공통으로 Object에서 상속받은 프로퍼티 메소드가 있음.
* __proto__ : (프로토타입 객체)
=> JS 모든객체는 프로토타입이라고 불리는 객체를 내부적으로 참조함.
* 프로토타입 객체 : new 연산자와 Object 생성자 함수 호출을 통해 생성한 Object객체
==> 프로토타입 객체를 이용하면 좀 더 효율적으로 메소드를 추가할수 있음.
* prototype 프로퍼티
1) 모든 함수는 prototype 프로퍼티가 있으며, 함수가 정의될때 생성되고 초기화됨.
2) new 연산자는 빈 객체를 생성하고,
해당객체의 prototype 프로퍼티를 생성자 함수의 prototype 프로퍼티값을 이용해 설정,
3) 프로토타입 객체는 생성자 함수와 연결되고,
이 생성자 함수를 통해서 생성되는 객체들은 생성자 함수와 연결된 프로토타입 객체의
프로퍼티들을 똑같이 상속,
생성자 함수의 프로퍼티와 메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 생성자 함수의 프로퍼티와 메서드 */
//Area 생성자 함수
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(3,20) : ' +Area.rectangle(3,20)+ '<br/>');
document.writeln('Area.circle(5) : ' +Area.circle(5).toFixed(2)+ '<br/>');
</script>
</body>
</html>
프로토타입 객체의 prototype 프로퍼티
프로토타입 객체에 의한 상속을 통해 메모리 사용량 줄일수 있으며,
프로토타입 객체에 프로퍼티를 변경되거나 추가되어도
기존 객체들 역시 변경되거나 추가된 프로퍼티를 바로 사용할수 있다는 장점이 있음.
모든함수가 가지고 있는 prototype 프로퍼티는 프로토타입 객체에 대한 연결을
가짐. ==> 이 메서드는 Rectangle 생성자함수를 통해 생성되는 객체에 상속될 것임.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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 생성자함수를 통해 생성되는 객체에 상속될 것임. */
Rectangle.prototype.toString = function() {
return 'Retangle : { 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);
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/>');
console.log(rect1);
</script>
</body>
</html>
