es6 class - 풀스택개발 EastFlag

OOP

es5에서 생성자 함수를 이용해서 객체를 생성하는 방법이 es6에서는 class 문법으로 좀더 OOP (Object Oriented Programming)적인 개념으로 객체를 생성할 수 있게 되었습니다.

OOP의 주요한 특징으로는 캡슐화(Encapsulation), 추상화(Abstraction), 다형성(Polymorphism), 상속(Inheritance) 등이 있습니다.

소프트웨어를 OOP 로 개발하게되면 코드의 재사용성을 높이고, 확장성과 유지보수성을 좋게 해줍니다.

생성자, 속성, 메서드

Q: Person라는 이름의 클래스를 만들고 name 이라는 파라메터를 입력으로 받아서 클래스의 속성인 name을 초기화하는 생성자를 추가하시오.

class Person {
  constructor(name) {
    this.name = name
  }
}

class Person {

constructor(name) {

this.name = name

}

Q: “Tom” 이라는 이름을 넘겨서 tom 이라는 이름의 인스턴스를 생성하시오.

const tom = new Person('Tom');
console.log(tom);
console.log(tom instanceof Person);

const tom = new Person('Tom');

console.log(tom);

console.log(tom instanceof Person);

Q: 생성자의 역할은 무엇인가? 생성자안에 사용된 this는 무엇을 가르키는가?

생성자는 클래스의 속성을 초기화 하는 역할을 합니다. 클래스의 속성이 되기 위해서는 자기 자신을 가르키는 this 를 사용합니다.

Q: name 파라메터를 받아서 속성의 name을 바꾸는 changeName 메서드를 추가하시오.

class Person {
  constructor(name) {
    this.name = name
  }
  
  changeName(name) {
    this.name = name
  }
}

class Person {

constructor(name) {

this.name = name

}

changeName(name) {

this.name = name

}

Q: changeName 메서드에 ‘Jane’ 파라메터를 넘겨서 이름을 바꾸시오.

tom.changeName('Jane');
console.log(tom);

1 2	tom.changeName('Jane'); console.log(tom);

상속

Q: Person 클래스를 상속받는 Student 클래스를 추가하고 새로운 인스턴스 kim을 생성하시오. 그 결과는 namae이 undefined 가 나온다. 그 이유는 무엇인가?

class Student extends Person {
}

1 2	class Student extends Person { }

상속을 하게되면 부모의 모든 속성과 메서드를 물려받는다. Person 클래스는 name 속성과 changeName이라는 메서드를 갖고 있고, Student 클래스는 이것을 모두 물려 받게 된다. 그러면 Student 클래스는 자기 자신의 속성을 초기화해야 할뿐만 아니라 부모로 부터 물려받은 name도 초기화를 해야 하는데 초기화를 하지 않았기 때문에 undefined가 출력되었다.

Q: 부모로부터 물려받은 name 속성을 초기화 하시오.

class Student extends Person {
  constructor(name) {
    super(name);
  }
}

const kim = new Student('Kim');
console.log(kim);

class Student extends Person {

constructor(name) {

super(name);

}

const kim = new Student('Kim');

console.log(kim);

부모의 생성자를 호출하는 방법은 super()를 호출하면 된다.