1. Class
- 프로토타입의 자바스크립트 > 클래스 기반 객체지향(대세)으로 변화하는 중
1.1 클래스 선언
1.1.1 클래스 선언하기
클래스는 선언할 때 클래스명을 대문자로 선언해야 함.
클래스 내부에 생성자(constructor) 선언
class Student {
constructor(이름,국어,영어,수학){
this.이름=이름;
this.국어=국어;
this.영어=영어;
this.수학=수학;
}
1.1.2 모든 객체가 공유하는 기능
생성자 함수 밖에서 공유할 기능을 선언하는 prototype
과 달리, 클래스 내에서 선언함.
클래스 내에서 함수를 선언할때는 function 키워드를 사용하지 않아도 됨.
class Student {
...
getSum() {
return this.국어 + this.영어 + this.수학;
}
getAvg() {
return this.getSum() / 3;
}
toString() {
return output = this.이름 + "\t" + this.getSum() + "\t" + this.getAvg() + "\n";
}
}
1.2 인스턴스 생성하기
프로토타입과 동일
new 생성자함수명(속성값,속성값,...)
형태로 작성
var students=[];
students.push(new Student('우고은',80,90,78));
students.push(new Student('우고은',70,90,78));
students.push(new Student('우고은',60,90,78));
students.push(new Student('우고은',50,90,78));
1.3 출력부
프로토타입과 동일
var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
output+= students[k].toString();
}
console.log(output);
1. Prototype
- Javascript => 프로토타입 기반의 객체지향 프로그래밍
- IE => 프로토타입 지원
- 최신 웹브라우저 => 클래스, 프로토타입 지원
1.1 생성자 함수 선언
1.1.1 생성자함수 만들기
생성자 함수는 선언할 때 생성자 함수 이름을 대문자로 선언해야 함.
function Student(이름,국어,영어,수학){
this.이름=이름;
this.국어=국어;
this.영어=영어;
this.수학=수학;
}
1.1.2 모든 객체가 공유하는 기능
prototype
키워드를 사용하여 생성자 함수 밖에서 선언
생성자함수이름.prototype.함수이름 = function () {...}
형태로 작성
prototype 으로 선언된 기능들을 모든 객체가 공유하게 됨
function Student(이름,국어,영어수학) { ... }
//
Student.prototype.getSum = function () {
return this.국어 + this.영어 + this.수학;
}
Student.prototype.getAvg = function () {
return this.getSum() / 3;
}
Student.prototype.toString = function () {
return output = this.이름 + "\t" + this.getSum() + "\t" + this.getAvg() + "\n";
}
1.2 인스턴스 생성하기
인스턴스를 생성할 때 new 생성자함수명(속성값,속성값,...)
형태로 작성
var students=[];
students.push(new Student('우고은',80,90,78));
students.push(new Student('우고은',70,90,78));
students.push(new Student('우고은',60,90,78));
students.push(new Student('우고은',50,90,78));
1.3 출력부
기존과 동일
var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
output+= students[k].toString();
}
console.log(output);
1. 학생들의 성적 총점과 평균을 출력하는 코드 작성하기
1.1 배열에 인스턴스 추가하기
var students=[];
students.push({ 이름: '우고은', 국어:80, 영어:90, 수학:78 });
students.push({ 이름: '김이박', 국어:90, 영어:92, 수학:72 });
students.push({ 이름: '박이김', 국어:70, 영어:94, 수학:98 });
students.push({ 이름: '이박김', 국어:78, 영어:95, 수학:86 });
1.2 점수의 총합과 평균 출력하기
1.2.1. For 문 내부에 변수(total, avg) 선언하기
var output= '이름\t총합\t평균\n';
for(var i=0;i<students.length;i++){
var total = students[i].국어 + students[i].영어 + students[i].수학;
var avg = total/3;
output += students[i].이름 + "\t" + total + "\t" + avg + "\n";
}
console.log(output);
1.2.2. 객체 내부에 메서드 삽입하기
for(var j=0;j<students.length; j++){
students[j].total = function() {
return this.국어 + this.영어 + this.수학;
}
students[j].avg = function() {
return this.total() / 3;
}
students[j].toString = function(){
return output = this.이름 + "\t" + this.total() + "\t" + this.avg() + "\n";
}
}
1.3 출력하기
var output= '이름\t총합\t평균\n';
for(var k=0; k< students.length; k++){
output+= students[k].toString();
}
console.log(output);
1.4 한계
- 서로 다른 기능을 하는 코드들이 혼재되어 있어 코드의 가독성이 떨어짐
- 이를 위해 기능 별로 코드를 분리하여 코드의 가독성을 높이고자 함.
See the Pen Javascript 객체지향 기본[1] : 객체를 만드는 함수 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
2. 기능 별로 코드 분리해보기
- 동일한 기능을 하는 부분들을 분리하여 따로 작성함으로써, 협업 및 코드 관리가 용이
2.1 객체 선언
2.1.1 객체의 속성 정의
function createStudent(이름,국어,영어,수학){
var object = {
// 2.1.1 속성 정의
//키로 선언되는 값 : 매개변수의 값
이름 : 이름,
국어 : 국어,
영어 : 영어,
수학 : 수학
};
2.1.2 객체의 메서드 정의
createStudent() 함수 내부에 메서드 정의
function createStudent(이름,국어,영어,수학){
...
// 2.1.2 메서드 정의
object.total = function() {
return this.국어 + this.영어 + this.수학;
}
object.avg = function() {
return this.total() / 3;
}
object.toString = function(){
return output = this.이름 + "\t" + this.total() + "\t" + this.avg() + "\n";
}
return object;
}
}
2.2 student 객체 생성하기
createStudent()로 배열에 객체 추가
var students=[];
students.push(createStudent('우고은',80,90,78));
students.push(createStudent('우고은',70,90,78));
students.push(createStudent('우고은',60,90,78));
students.push(createStudent('우고은',50,90,78));
2.3 출력하기
toString() 함수 이용
var output= '이름\t총합\t평균\n';
for(var k=0; k<students.length; k++){
output+= students[k].toString(); //toString()함수 이용
}
console.log(output);
2.4 한계
- 객체를 생성할 때 마다
같은 기능을 하는 메서드
를 객체를 생성할 때 마다중복하여 정의
하게 됨
- 메모리 낭비 발생
- 이를 해결하기 위해 객체지향 프로그래밍 방식의 prototype 개념이 도입됨.
See the Pen Javascript 객체지향 기본[1] : 기능 별 코드 분리하기 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.
1. 정적으로 속성 추가하기
객체 내부에서 직접 추가
var student = {
이름 : "우고은"
};
console.log(student); // 이름:'우고은'
2. 동적으로 속성 추가하기
객체 외부에서 속성 추가
객체명.추가할 속성명 = '추가할 속성 값'
입력
student.성별 = '여자';
console.log(student); // 이름:'우고은', 성별:'여자'
3. 속성 제거하기
delete 객체명.속성명
키워드 이용
delete student.이름;
console.log(student); // 성별:'여자'
4. toString() 메서드
자바스크립트의 모든 객체들이 내장하고 있는 함수
student.toString = () =>{
return '안녕하세요';
}
console.log(student); // '안녕하세요', 성별 : '여자'
1. 함수에서 this 키워드 사용하기
객체 메서드 내부에서는 this 키워드를 사용
하여 자기 자신이 가지고 있는 다른 속성을 참조할 수 있다.
var person = {
name : '우고은',
eat_a : function(food) {
//this == person 객체
document.write(this.name + '이 ' + food + '을 먹습니다');
}
출력 결과
person.eat_a('밥'); // 우고은이 밥을 먹습니다.
2. Arrow 함수에서 this 키워드 사용하기
출력할 때 this.name 이 비워져 있음
화살표 함수에서는 this 를 바인딩 하지 않는다.
** 객체 내부에서 this 키워드를 활용하고 싶을 때는, 화살표 함수를 사용하지 않는다.**
eat_b : (food) => {
document.write(this.name + '이 ' + food + '을 먹습니다');
}
}
출력 결과
person.eat_b('냠냠'); // 이 냠냠을 먹습니다
See the Pen Javascript - 객체 02 속성과 메서드 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.