My Notes

생성자 함수

• 생성자 함수 정의 및 객체 생성
  ⭐ 생성자 함수명은 대문자로 시작한다.

// 생성자 함수
function Student(name, kor, eng, math) {
	// 프로퍼티
	this.name = name;
	this.kor = kor;
	this.eng = eng;
	this.math = math;
	
	// 메소드
	this.getSum = function(){
		return this.kor + this.eng + this.math
	};
	this.getAvg = function(){
		return this.getSum / 4;
	};
	this.toString = function(){
		return this.name + ',' + this.getSum() + ',' + this.getAvg();
	};
}

// 객체 생성
var student = new Student('뽀로로', 95, 90, 85);
document.write(student);

• 생성자 함수로 객체 생성하여 배열에 저장

// 생성자 함수
function Student(name, kor, eng, math) {
	// 프로퍼티
	this.name = name;
	this.kor = kor;
	this.eng = eng;
	this.math = math;
	
	// 메소드
	this.getSum = function(){
		return this.kor + this.eng + this.math
	};
	this.getAvg = function(){
		return this.getSum / 4;
	};
	this.toString = function(){
		return this.name + ',' + this.getSum() + ',' + this.getAvg();
	};
}

// 배열 생성
var students = [];
students.push(new Student('뽀로로', 90, 85, 95));
students.push(new Student('루피',95, 90, 100));
students.push(new Student('크롱', 85, 95, 80));
students.push(new Student('패티', 80, 100, 85));

// for in 반복문을 이용한 출력
var output = '이름, 총점, 평균<br>';
for(var i in students){
	output += students[i].toString() + '<br>';
}
document.write(output);

프로토타입(prototype)

• 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있으며, 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.

• 프로토타입을 이용한 메소드 지정

function Student(name, kor, eng, math){
	this.name = name;
	this.kor = kor;
	this.eng = eng;
	this.math = math;
	
	// 프로토타입 메소드
	this.prototype.getSum = function(){
		return this.kor + this.eng + this.math;
	};
	this.prototype.getAvg = function(){
		return this.getSum() / 3;
	};
	this.prototype.toString = function(){
		return this.name + ', ' + this.getSum() + ', ' + this.getAvg();
	};
}

// 배열 생성
var students = [];
students.push(new Student('뽀로로', 90, 85, 95));
students.push(new Student('루피',95, 90, 100));
students.push(new Student('크롱', 85, 95, 80));
students.push(new Student('패티', 80, 100, 85));

// for in 반복문을 이용한 출력
var output = '이름, 총점, 평균<br>';
for(var i in students){
	output += students[i].toString() + '<br>';
}
document.write(output);

상속(inheritance)

• 자바스크립트에서는 프로토타입을 사용하여 객체를 복제하고 재사용하는 것을 상속이라고 한다.

• 프토로타입을 이용한 상속
  ⚠️ 상속시 생성자 함수명이 부모의 생성자 함수명으로 교체되는 현상이 일어나므로 바꿔줘야 한다.

// 부모 생성자 함수
function Person(name) {
	this.name = name;
}

// Person의 프로토타입에 프로퍼티 추가
Person.prototype.type = '사람';

// Person의 프로토타입에 메소드 추가
Person.prototype.getType = function(){
	return this.type;
};
Person.prototype.getName = function(){
	return this.name;
};

// 자식 생성자 함수
function Student(name){
	this.name = name;
}

// 상속
Student.prototype = Person.prototype;
// Student.prototype = new Person(); 와 동일

// 상속된 생성자 함수명 처리
Student.prototype.constructor = Student;

• instanceof 연산자 : 해당 객체가 어떤 생성자 함수를 통해 생성되었는지 확인할 때 사용

var student = new Student('에디');
document.write(student instanceof Student + '<br>');	// true
document.write(student instanceof Person + '<br>');	// true : 상속관계 - 부모
document.write(student instanceof Object + '<br>');	// true : 상속관계 - 최상위
document.write(student instanceof Number);		// false