TIL 26 | JavaScript 객체 지향 프로그래밍 03
생활코딩 객체 지향 프로그래밍 수업을 보며 정리한 내용입니다.
class
constructor function
의 대체제라고 할 수 있는 Class 를 알아보자!
class라고 하는 문법은 자바스크립트의 ES6 에서 추가된 기능이다.
1. classes의 생성
1-1. 객체를 만드는 새로운 공장
① 생성자함수로 만들기 (비교)
이전에는 객체를 만드는 공장으로 constructor function
을 이용하는 법을 공부했다.
//consturctor function으로 객체공장 만들기
function Person(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
Person.prototype.sum = function () {
return `prototype : ${this.first + this.second + this.third}`;
};
여기서 constructor function
이 했던일은
- 객체를 만든다.
- 그 객체의 초기상태를 세팅한다.
→ 그럼이제 이 똑같은 일을 class 에서는 어떻게 하는지 살펴보자! ✨
② class 로 만들기
이제 객체를 만드는 공장은 class 이다.
class Person {
}
const kim = new Person();
console.log(kim); //person { } .... Person 이라는 이름의 객체가 생성되었다.
→ 이렇게 class를 이용해서 객체를 만드는 것을 확인했다.
👏🏻 그럼이제 constructor function
이 했던 것처럼 그 객체가 가지고 있어야 할 기본적인 기능들을 세팅해주는(초기상태 세팅)을 하는 방법을 알아보자! class에서는 생성되는 객체를 어떻게 초기화 하는걸까?
1-2. 객체의 초기상태 세팅
① 생성자함수에서의 방법 (비교)
constructor function
의 본문과 같은 역할을 class에서는 어떻게 하는지 알아보자!
function Person(name, first, second) {
this.name = name; //여기서 하는 역할
this.first = first; //여기서 하는 역할
this.second = second; //여기서 하는 역할
}
② class 에서의 초기상태 세팅
먼저 class 의 특징을 살펴보아야 하는데, 그건 객체가 생성될 때 constructor 함수는 자동으로 호출된다는 것이다.
class Person {
constructor() { //여기서 이 "constructor" 은 약속된 이름이다. 이 이름을 마음대로 바꾸면 안된다!
console.log("Hello! constructor?");
}
}
const kim = new Person(); // 이렇게 객체를 생성하는 과정에서 constructor 함수는 자동으로 호출되어
// → 콘솔창에 Hello! constructor? 이 찍히게 된다.
🚨 constructor의 이름은 반드시 constructor 라고만 써야 자바스크립트가 객체를 생성할 때 이 constructer함수를 자동으로 호출해준다.
그래서 이 특징으로 이제 우리는 객체의 초기상태 세팅을 해줄 수 있는거다.
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
}
const kim = new Person("kim", 10, 20); // 여기서 constructor함수는 호출되어 실행된다.
console.log(kim); //Person {name: "kim", first: 10, second: 20}
const kim = new Person("kim", 10, 20);
이렇게 객체가 생성되는 과정에서 class 내부에 있는 constructor 함수는 자동으로 호출되어 실행되는데, 이때 전달해준 값들이 들어오기 때문에 객체가 만들어지면서 전달된 값들을 이용해 세팅이 될 수 있는 것이다. 이렇게 객체가 만들어 진 후 console.log(kim);
로 출력하면 세팅된 Person 객체가 만들어 진 것이 확인된다!
1-3. method 만들기
이번엔 객체지향의 꽃 중 하나라고 할 수 있는 객체에 소속된 함수 → method
를 만드는 방법을 살펴보자! ✨🌷✨🌷
① 생성자함수에서의 방법 (비교)
전통적인 방법에서는 constructor function
의 prototype 이라는 객체에 sum이라고 하는 property를 함수로 지정하는것을 통해서,
Person이라고 하는 coustructor를 통해 만들어진 모든 객체가 공유하는 함수를 만들 수 있었다.
Person.prototype.sum = function() {
return this.first + this.second;
}
→ 그럼 이제 이것을 class 에서는 어떻게 하는지 알아보자 👏🏻
② class 에서 method 만들기 (방법 1)
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
}
Person.prototype.sum = function () { //일단 그냥 이렇게 똑같이 써줘도 동작한다.
return this.first + this.second;
};
const kim = new Person("kim", 10, 20);
console.log(kim.sum()); //30
이게 똑같이 동작하는 이유는 class 라는건 새로운 기능이 아니라 이미 있는 것에서 문법만 조금 추가된 것뿐이기 때문이다. syntactical sugar
③ class 에서 method 만들기 (방법 2)
🤚🏻 그리고! class 안에 이렇게 넣어주는 것도 가능하다! .. 이 방법을 더 권장!
class Person {
constructor(name, first, second) {
this.name = name;
this.first = first;
this.second = second;
}
sum () {
return this.first + this.second;
};
}
const kim = new Person("kim", 10, 20);
console.log(kim.sum()); //30 ...똑같이 출력된다. 왜냐면 이렇게 해주는 방법도 의미가 같기때문이다!
const lee = new Person("lee", 10, 10);
console.log(lee.sum()); //20 ...이것도 잘 동작한다!
→ 즉 sum()
이라는 method는 같은 class에 속해있는 모든 객체가 공유하는 함수가 되는 것이다! ✨
④ 일부 method만 다르게 정의하기
🤔 kim 이라는 객체에서만 다르게 동작하는 method 를 정의하고 싶다면?
이전에 했던 방법처럼 이렇게 해주면된다!
kim.sum = function() {
return "this method has changed!";
}
console.log(kim.sum()); //this method has changed!
// ..이제 kim은 같은 클래스에 속한 다른 객체들과는 다른 method를 가지고있는 상태가 된 것이다!
→ kim
이라는 객체에 sum
이라고 하는 함수를 포함시키면 된다.
- 그러면, 자바스크립트는 우선
kim
이라는 객체가sum
이라는 함수를 가지고 있는지 여부를 먼저 확인해보고! - 만약 없다면 이
kim
의 Person 이라고 하는 class 안에sum
이라는 method가 정의되어 있는지를 보고, 그곳에 있다면 이제 그걸 실행하게 된다. - 위 경우에서는
kim
이라는 객체가sum
이라는 함수를 가지고 있기 때문에 여기서 실행되어 다른 메소드가 실행되는 것이다.
여기까지, class를 기반으로 해서 객체지향을 구현하는 가장 중요하고 핵심적인것들은 다 끝났다 🙂
Author And Source
이 문제에 관하여(TIL 26 | JavaScript 객체 지향 프로그래밍 03), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@saemsol/TIL-26저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)