객체와 클래스
- 클래스는 객체를 만들기 위한 설계도?, 청사진이다.
1.1 객체 리터럴
- 일반적으로 자바스크립트에서 객체를 만들기 위해 객체 리터럴 방식을 많이 사용한다. 쉽게 생성 할 수 있기 때문에.
1. 객체 리터럴 방식
const person = {
name : "홍길동",
age : 20,
}
const person2 = {
name : "김짱구",
age : 25,
}
const person3 = {
name : "이커피",
age : 30,
}- 물론 이 방식도 많이 사용하지만 프로퍼티에 오타가 생길 수도 있다는 단점이 있다.
- 따라서 클래스를 이용해 객체를 만들면
클래스라는틀로 객체를 정의할 수 있어 그 위험을 줄여준다.
1.2 클래스
- class [클래스명] { ... } 으로 클래스를 생성한다.
- [클래스명]의 첫 시작단어는 대문자로 작성한다.
- Ex) class Person { ...}, class ProductItem { ... }
- 클래스를 이용해 객체를 생성할때는
new키워드를 사용한다.
2. 클래스 생성
class Person {
name = "기본값"; // 변수에 넣듯 = 를 사용해 값을 미리 설정할 수 있다.
age; // 기본값이 없다면 비워둬도 된다.
}
console.log(new Person); //Person {name: '기본값', age: undefined}1.3 클래스를 이용해 객체 만들기
- 클래스를 이용해 다른 객체를 만들고 값을 부여하기 위해서는
constructor를 이용한다. - new [클래스] 로 객체를 생성하면 자바스크립트는 자동으로
constructor를 호출하고 값을 부여한다.
3. 클래스를 이용해 객체 생성하기
class Person {
name = "기본값";
age;
constructor(nickName, ageNum){
this.name = nickName;
this.age = ageNum;
}
}
const person1 = new Person("홍길동", 20);
const person2 = new Person("김짱구");
console.log(person1) // Person {name: '홍길동', age: 20}
console.log(person2) // Person {name: '김짱구', age: undefined}
-----------------------------------------------------------
3.1 위 방법과 아래 방법은 같은 것임.
class Person {
constructor(nickName, ageNum){
this.name = nickName;
this.age = ageNum;
}
}
constructor를 이용한다면 따로 name과 age같은 프로퍼티를 설정해주지 않아도 된다.
-----------------------------------------------------------
3.2 필드와 프로퍼티
class Person {
--------------------------------
필드라고 부름
--------------------------------
constructor(nickName, ageNum){
--------------------------------
프로퍼티라고 부름
--------------------------------
}
}const person1 = new Person("홍길동", 20); 처럼 클래스를 호출하면 자바스크립트는 자동으로 class Person{} 내부의 constructor를 호출한다. 또한 그 constructor로 전달된 인자값을 해당 객체의 값으로 할당해준다. 이때의 this는 새로 생성된 객체를 가리키게된다.
1.4 게터(getter)와 세터(setter)
- 게터(getter):
객체의 속성을 가져온다특정 속성의 값을 반환하는 함수로, get 키워드를 사용해 정의한다. - 세터(setter):
객체의 속성을 설정한다특정 속성의 값을 설정하는 함수로, set 키워드를 사용해 정의한다. - 속성 앞에 언더스코어( _ )를 붙여 구분하는 관례가 있는데 이는 게터와 세터를 이용해 접근을 권장하는 의미이다. (관례)
class Person {
constructor(name, age){
`constructor가 실행될때 set을 이용해 값을 입력하게됨`
this.name = name; // this.name은 속성이 아니라 아래의 set을 의미함
this.setAge = age;
}
get name(){ // 게터와 세터의 이름은 같아도, 달라도 상관없음
return this._name;
}
set name(name){
this._name = name; // _name 이라는 속성에 값이 저장됨
}
get age(){ // 게터와 세터의 이름은 같아도, 달라도 상관없음
return this._age;
}
set setAge(age){
this._age = age; //_age 라는 속성에 값이 저장됨
}
}
const person = new Person("홍길동", 20);
console.log(person.name) // "홍길동"
person.name = "김짱구";
console.log(person.name) // "김짱구"
console.log(person.age) // 20
person.setAge = 30
console.log(person.age) // 301.5 게터와 세터의 이름
게터와 세터 메서드의 이름과그 안에서 사용하는 속성이름이 같으면 무한 재귀 호출이 발생되어 문제가 발생한다.
class MyClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
set name(value) {
this.name = value; // 문제 발생! 무한 재귀 호출
}
get age() {
return this.name; // 문제 발생! 무한 재귀 호출
}
}
set name(){...} 의 name과 그 안의 this.name의 name이름이 같으면 안됨- 따라서 메서드의 이름과 다른 이름의 속성을 사용하거나
- 속성 이름 앞에 '_'를 붙이는 방법을 사용함 (게터와 세터를 이용해 접근하라는 권장도 포함)
class MyClass {
constructor(name, age) {
this.name = name;
this.age = age;
}
`속성에 '_'를 추가해 메서드와 이름이 다르게 구분해줌`
set name(value) {
this._name = value;
}
get age() {
return this._name;
}
}1.6 클래스의 상속
extends키워드를 이용해 클래스를 상속 할 수 있다.- 상속받은 클래스는 부모 클래스의 속성과 메서드에 접근이 가능하다.
- 자식클래스에서
super키워드를 이용해 부모 클래스의 생성자를 호출 할 수 있다.
class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`안녕하세요. 저는 ${this.name}입니다.`);
}
}
class Student extends Person {
constructor(name, age) {
super(name); // 부모 클래스의 생성자 호출
this.age = age;
}
introduce() {
super.introduce(); // 부모 클래스의 메서드 호출
console.log(`나이: ${this.age}`);
}
}
const student = new Student('홍길동', 20);
student.introduce();
`안녕하세요. 저는 홍길동입니다.
나이: 20`더 공부해야 할 것
1. 클래스 연결? 해서 사용하기
2. 정적 메서드(static) 알아보기
3. 상속 좀더 알아보기
4. Private 프로퍼티 등 알아보기 등
