[Javascript] 8. 객체지향, 클래스 계승(상속)

🏃Dekay (JuniorDeveloper)·2021년 9월 16일
0

Javascript

목록 보기
8/8
post-thumbnail

1. Javascript의 객체지향 특징

  • ES2015에서는 class 구문이 도입되어 코드의 형태가 많이 변경되었다.
  • Javascript에서는 프로토타입을 이용하여 새로운 객체를 생성하는데, 이것을 프로토타입 베이스의 객체지향이라 부른다.
    *프로토타입은 어떤 객체의 원본이 되는 객체를 뜻한다.

1.1 클래스 정의하기

  • 프로토타입은 편의적으로 클래스라고 부른다.
var Member = function() {};
  • 변수 Member에 대해, 빈 함수 리터럴을 대입하고 있는 것 처럼 보이지만 Javascript의 클래스다.
  • 또한, Member 클래스는 다음과 같이 new 연산자로 인스턴스화가 가능하다.
var mem = new Member();
  • Javascript에서는 함수(Function 객체)에 클래스의 역할을 부여한다고 생각하자.
  • 그리고, 애로우 함수에서는 생성자를 정의할 수 없다는 것도 기억!

1.2 생성자로 초기화하기

  • 생성자인스턴스(객체)를 생성할 때 객체의 초기화를 처리하기 위한 메소드(함수)를 말한다.
  • 생성자의 이름은 다른 함수와 구별하기 위해 대문자로 시작하는 것이 일반적이고, 반환값이 필요 없다.
var Member = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.getName = function() {
    return this.lastName + ' ' + this.firstName;
  }
};

var mem = new Member('대경', '박');
console.log(mem.getName()); // 👉 결과: 박 대경
  • 여기서 this 키워드는 생성자에 의해 생성되는 인스턴스(자기 자신)를 나타내는 것이다.
  • 또한, this 키워드에 대해 변수를 지정함으로써 인스턴스프로퍼티를 설정할 수 있다.
this.프로퍼니명 = 값;

1.3 동적으로 메소드 추가하기

  • 메소드생성자에서만 정의할 수 있는게 아니고, new 연산자로 인스턴스화 된 객체에 대해서 메소드를 추가할 수 있다.
var Member = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
};

var mem = new Member('대경', '박');
mem.getName = function() {
  return this.lastName + ' ' + this.firstName;
}

console.log(mem.getName()); // 👉 결과: 박 대경

2. ES2015 객체지향

2.1 클래스 정의

  • ES2015에서는 class 명령을 사용하여 아래의 코드와 같이 클래스를 정의할 수 있다.
class Member {
  // 생성자
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  // 메소드
  getName() {
    return this.lastName + this.firstName;
  }
}

let m = new Member('대경', '박');
console.log(m.getName()); // 👉 결과: 박대경
  • class를 사용하여 정의할 때, 생성자의 이름은 constructor로 고정이다.
  • 기존에 java/C# 등을 했던 사람은 public/protected/private와 같은 액세스 한정자를 사용할 수 없다는 점을 햇갈리면 안될 것 같다.
    * 액세스 한정자메소드/프로퍼티가 어디에서 액세스할 수 있는지 나타내는 정보로, Javascript의 클래스는 모든 멤버가 public이다.

2.2 클래스 계승

  • 클래스 계승extends 키워드를 사용하여 기존 클래스를 계승(상속)한 서브 클래스를 정의할 수 있다.
class Member {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  getName() {
    return this.lastName + this.firstName;
  }
}

class studyMember extends Member {
  study() {
    return this.getName() + '은 공부하고 있다.';
  }
}

let m = new studyMember('대경', '박');
console.log(m.getName()); // 👉 결과: 박대경
console.log(m.study()); // 👉 결과: 박대경은 공부하고 있다.
  • studyMember 클래스에 정의된 study 메소드와, Member 클래스에 정의된 생성자getName 메소드를 studyMember 클래스의 멤버로 호출할 수 있다.

2.3 객체 리터럴 개선

  • ES2015에서 객체 리터럴 구문도 개선되어 프로퍼티/메소드를 더욱 간단하게 정의할 수 있다.
//기존 메소드 정의
이름: function(args, ...) {...}

//ES2015 메소드 정의
이름(args, ...) {...}

end

profile
Believe you can & you're half way there 🙏

0개의 댓글