[생활코딩] 객체지향 - Classes

객체를 찍어내는 공장 constructor의 대체제 class를 살펴보겠다.

 

class는 ES6 문법인데, 통계를 기반으로 해당 문법이 어느 환경에서 가능한지 

아래 사이트에서 확인 가능하다.

 

https://caniuse.com/

 

 

IE 에서는 사용이 안된다고 나오는데,

https://babeljs.io/

 

최신 문법의 코드를 과거의 코드로 변환해주는 사이트가 있다.

Compiler , Transpiler 라고 부른다.

 

Try it out 에 가서 작성한다.

---

<Classes의 생성>

 

function Person만 놓고 본다면 그냥 함수이지만 저 함수가 사용될 때

new를 붙이게 되면 객체를 return하게 된다.

객체가 return되기전에 this.name = name; 같은 코드로 인해서

그 객체의 속성이 기본적으로 셋팅이 된 객체가 return 되는거다.

new가 붙게되면 맥락에서 Person이라는 함수는 생성자 (constructor)가 된다.

 

생성자는 첫 번째로는 객체를 만들고, 두 번째는 객체의 초기상태를 만든다.

 

생성자가 하는 일을 class에서는 어떻게 하는지를 살펴보겠다.

class person{

}

우선 포커스를 두고 봐야할것은 객체를 만드는 공장이 class이라는거다..

Person 이라는 이름의 객체가 생성되었다.

우리가 이전에 생성자 함수를 만든것을 살펴보면

객체가 만들어질때 가지고 있어야 될 기본적인 기능들을 셋팅해주는 기능도

생성자 함수가 하는일이여서 깔끔하지 못했다.

 

그러면 class에서는 생성되는 객체를 어떻게 초기화할까?

 class에서 객체를 만들 때 그 객체에 속하는 함수(메소드)를 만들 때는 

function 키워드를 사용하지 않는다.

class Person{
  sum(){
    
  }
}

저렇게 하면 함수를 정의한것이 된다.

어떤 객체가 생성될때 초기상태를 지정하기 위한 객체가 만들어지기 직전에

실행되도록 약속된 함수가 있다. 그 함수가 constructor() 이다.

저 함수를 자동으로 호출한다.

new Person이 실행되면서 객체가 생성되는 과정에서 실행되는것을 볼 수 있다.

우리가 호출한적도 없는데 실행되었다.

class Person{
  constructor(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
  }
}
var kim = new Person('kim',10 ,20);
console.log(kim);

객체가 생성될 때 자동으로 실행되도록 약속되어있는 함수인 consturctor 함수를 클래스내에서 구현해보았다.

 

---

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.