TIL 26 | JavaScript 객체 지향 프로그래밍 03

Saemsol Yoo·2020년 12월 29일

JavaScript Object Oriented Programming class

javascript

목록 보기

17/25

생활코딩 객체 지향 프로그래밍 수업을 보며 정리한 내용입니다.

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 이라는 함수를 가지고 있기 때문에 여기서 실행되어 다른 메소드가 실행되는 것이다.