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