Object Oriented Programming

객체의 속성과 메서드

객체의 속성이 가질 수 있는 자료형

var object = {
	number:273,
	string:'RintIanTta',
	boolean: true,
	array: [52,273,103,32],
	method: function () {}
};
						

속성과 메서드의 구분

// 객체 선언
var person = {
	name: '도기동',
	eat: function  (food) {
		alert(this.name+'이 '+food+'을/를 먹습니다.');
	}
};
// 메서드 호출
person.eat('밥');
						

객체와 반복문

객체의 속성을 모두 살펴보려면 for in 반복문을 사용해야 한다.

// 객체 선언
var product = {
	name: 'Microsoft Visual Studio 2010 Ultimate',
	price: '15,000,000원',
	language: '한국어',
	supportOS: 'Win 32/64',
	subscription:true
};

// 출력
var output = "";
for (var key in product) {
	output += '* '+key+': '+product[key]+'\n';
}
alert(output);
						

함수를 사용한 객체 생성

makeStudent() 함수를 생성,
이 함수는 name, korean, math, english, science를 매개 변수로 받아 객체를 만든 후 객체를 리턴한다.
함수 내에서 객체를 만들고 그 만들어진 객체를 return 문으로 되돌려 주는 데 주목할 것.

객체를 생성하는 함수

function makeStudent (name, korean, math, english, science) {
	var willReturn = {
		// 속성
		이름: name,
		국어: Korean,
		수학: math,
		영어: english,
		과학: science,

		// 메서드
		getSum: function  () {
			return this.국어 + this.수학 + this.영어 + this.과학;
		},
		getAverage: function  () {
			return this.getSum() / 4 ;
		},
		toString: function  () {
			return this.이름 + '\t' + this.getSum() + '\t' + this.getAverage();
		}
	};
	return willReturn;
}
						

함수를 사용한 객체 생성

function makeStudent (name, korean, math, english, science) {
	var willReturn = {
		// 속성
		이름: name,
		국어: korean,
		수학: math,
		영어: english,
		과학: science,

		// 메서드
		getSum: function  () {
			return this.국어 + this.수학 + this.영어 + this.과학;
		},
		getAverage: function  () {
			return this.getSum() / 4 ;
		},
		toString: function  () {
			return this.이름 +	 '\t' + this.getSum() + '\t' + this.getAverage();
		}
	};
	return willReturn;
}

// 학생 정보 배열 생성
var students = [];
students.push(makeStudent('강윤경', 98, 98, 90, 95));
students.push(makeStudent('황현아', 98, 92, 82, 98));

// 출력
var output = '이름\t총점\t평균\n';
for (var i in students) {
	output += students[i].toString() + '\n';
}

alert(output);
						

생성자 함수

생성자 함수는 new 키워드를 사용해 객체를 생성할 수 있는 함수를 의미한다.
앞서 함수로 객체를 생성했지만 new 키워드를 사용하지 않았으므로 생성자 함수라 볼 수 없다.
생성자 함수 안에서는 this 키워드를 사용해 생성자 함수를 통해 생성될 객체의 속성을 지정한다.
cf) 생성자 함수의 이름은 일반적으로 대문자로 시작한다. 대문자로 시작하지 않아도 문제없지만 대부분의 개발자가 지키는 규정이다.

생성자 함수

function Student (name, korean, math, english, science) {
		// 속성
		this.이름: name;
		this.국어: korean;
		this.수학: math;
		this.영어: english;
		this.과학: science;

		// 메서드
		this.getSum: function  () {
			return this.국어 + this.수학 + this.영어 + this.과학;
		};

		this.getAverage: function  () {
			return this.getSum() / 4 ;
		};

		this.toString: function  () {
			return this.이름 +	 '\t' + this.getSum() + '\t' + this.getAverage();
		};
	}

// 학생 정보 배열 생성
var students = [];
students.push(new Student('강윤경', 98, 98, 90, 95));
students.push(new Student('황현아', 98, 92, 82, 98));

// 출력
var output = '이름\t총점\t평균\n';
for (var i in students) {
	output += students[i].toString() + '\n';
}

alert(output);
						

constructor 속성

인용 from. 야쿠이야기: yaku.pe.kr/314 - thank you!
constructor 속성은 객체를 만드는 기능함수(생성자 함수)를 반환하거나, 설정을 하는 메서드이다.
생성된 객체의 constructor 속성을 통해 해당 생성자 함수와 일치 여부 판별이 가능하다.
두 객체가 각각 다른 값과 역할을 가지고 있어도 생성자 함수가 동일한지 체크할 수 있다.

							// 생성자 함수 A()
							function A() {
								this.name = "A함수";
								this.getName = function () {
									return this.name;
								}
							}

							// 인스턴스화
							a = new A();
							
							reslt1.innerHTML = "1. a.constructor는 "+a.constructor; // 생성자 함수 A()를 반환한다. function A() {this.name="A함수"; this.getName = function() {return this.name;}}			
							reslt2.innerHTML = "2. a.constructor == A 의 결과는 "+(a.constructor == A);

							function B () {
								this.name;
								this.setName = function  (name) {
									this.name =  name;
								}
								this.getName = function  () {
									return this.name;
								}
							}

							b = new B();
							b.setName("B함수");
							c = new B();
							c.setName("C함수");

							reslt3.innerHTML = "3. b.getName() 메서드 호출 결과는 "+b.getName(); // "B함수" 반환
							reslt4.innerHTML = "4. c.getName() 메서드 호출 결과는 "+c.getName(); // "C함수" 반환

							reslt5.innerHTML = "5. (a.constructor == b.constructor)의 결과는 "+(a.constructor == b.constructor); // true 반환
						

프로토타입

일단, 자바스크립트는 프로토타입이라는 공간을 만들고, 생성자함수를 사용해 생성한 객체가 공통으로 가지는 공간이 된다.
프로토타입을 사용하여 메서드를 만들게 되면 모든 인스턴스 객체가 공통으로 사용할 수 있게 되고, 생성자 함수를 사용해 객체를 만들 때는 대부분 생성자 함수 내부에 속성만 넣으면 된다.

프로토타입

							function Student (name, korean, math, english, science) {
									// 속성
									this.이름: name;
									this.국어: korean;
									this.수학: math;
									this.영어: english;
									this.과학: science;
							}	
							
							// prototype 상속
							Student.prototype.getSum = function  () {
								return this.국어 + this.수학 + this.영어 + this.과학;
							};
	
							Student.prototype.getAverage = function  () {
								return this.getSum() / 4;
							};

							Student.prototype.toString = function  () {
								return this.이름+ '\t'+ this.getSum()+ '\t' + this.getAverage();
							};

							// 학생 정보 배열 생성
							var students = [];
							students.push(new Student('강윤경', 98, 98, 90, 95));
							students.push(new Student('황현아', 98, 92, 82, 98));

							// 출력
							var output = '이름\t총점\t평균\n';
							for (var i in students) {
								output += students[i].toString() + '\n';
							}

							alert(output);
						

instanceof 키워드

일단, 자바스크립트는 프로토타입이라는 공간을 만들고, 생성자함수를 사용해 생성한 객체가 공통으로 가지는 공간이 된다.
프로토타입을 사용하여 메서드를 만들게 되면 모든 인스턴스 객체가 공통으로 사용할 수 있게 되고, 생성자 함수를 사용해 객체를 만들 때는 대부분 생성자 함수 내부에 속성만 넣으면 된다.

프로토타입

							function Student (name, korean, math, english, science) {
									// 속성
									this.이름: name;
									this.국어: korean;
									this.수학: math;
									this.영어: english;
									this.과학: science;
							}	
							
							// prototype 상속
							Student.prototype.getSum = function  () {
								return this.국어 + this.수학 + this.영어 + this.과학;
							};
	
							Student.prototype.getAverage = function  () {
								return this.getSum() / 4;
							};

							Student.prototype.toString = function  () {
								return this.이름+ '\t'+ this.getSum()+ '\t' + this.getAverage();
							};

							// 학생 정보 배열 생성
							var students = [];
							students.push(new Student('강윤경', 98, 98, 90, 95));
							students.push(new Student('황현아', 98, 92, 82, 98));

							// 출력
							var output = '이름\t총점\t평균\n';
							for (var i in students) {
								output += students[i].toString() + '\n';
							}

							alert(output);
						

캡슐화

캡슐화