Javascript Class 알아보기
Javascript Class
갑자기 class??
이유는 javascrip class를 활용한 코딩을 거의 하지 않아
다시 공부해 보려고 한다.
또한, 추후 기회가 된다면 라이브러리를 사용하지 않고
바닐라로 spa 만들기에 대해 포스팅 할 기회가 있다면 class를 활용할 예정.
1. 인스턴스 생성해 보기
class Product {
//* 인자를 받아 초기화
//* 생략 가능
//* 암묵적으로 this를 반환 한다고 함
constructor(name, price) {
this.name = name;
this.price = price;
};
//* method
//* prototype에 등록됨
ProductLog () {
...
};
//* prototype에 등록되지 않음
ProductLog2 = () => { ...
}
//* 메소드를 등록할때 화살표 함수로 등록하게 되면
//* prototype에 등록되지 않기 때문에
//* 상속받은 인스턴스에서는 사용할 수 없음.
};
2. field(필드)
class Product {
//* 필드
//* this.name = name이런 식으로 설정할 필요 없음.
name = 'tom';
price = 3000;
constructor() {
}
};
3. 정적 필드와 메소드(static)
class Product {
//* Class자체에서 접근 가능
//* 정적 메소드는 정적 프로퍼티만 접근 가능
static name = 'tom';
static getPrice {};
constructor() {
}
};
4. private
class Product {
#name = "doney;
#price = 0;
constructor(name, price) {
this.#name = name;
this.#price = price;
};
//* private로 선언되면 접근이나 수정이 불가능
//* 필드에 같이 정의 해야 한다
get getPrice () {
return this.#price;
//* 클래스 내에서는 접근 가능
}
};
5. 상속
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
};
intoroduce () {
return `${this.name}의 가격은 ${this.price}원 입니다.`
};
};
//* extends 키워드로 상속 가능
class Sample extends Product {
constructor(name, price, type) {
//* 부모의 constructor를 호출
super(name, price);
this.type = type;
};
// *프로토타입 체이닝으로 introduce라는 메소드를
//* 사용할 수 있음
//* But 재 선언해 오버라이딩 됨.
introduce () {
return `이것의 타입은 ${this.type}의 한 종류 입니다.`
};
//* 부모의 메소드를 호출해 사용
introduce2 () {
return super.introduce + ", " + this.introduce();
};
};
class Product {
static name = "막걸리";
static price = 5000;
static introduce() {
console.log(`이것은 ${this.name} 입니다.`);
};
};
class Sample() extends Product {
static introduce () {
super.introduce();
console.log("이것의 종류는 술입니다.")
};
};
Sample.introduce();
// 이것은 막걸리 입니다.
// 이것의 종류는 술입니다.
// 이렇게 사용 할 수 있다.
# Javascript Class
갑자기 class??
이유는 javascrip class를 활용한 코딩을 거의 하지 않아
다시 공부해 보려고 한다.
또한, 추후 기회가 된다면 라이브러리를 사용하지 않고
바닐라로 spa 만들기에 대해 포스팅 할 기회가 있다면 class를 활용할 예정.
### 1. 인스턴스 생성해 보기
```
class Product {
//* 인자를 받아 초기화
//* 생략 가능
//* 암묵적으로 this를 반환 한다고 함
constructor(name, price) {
this.name = name;
this.price = price;
};
//* method
//* prototype에 등록됨
ProductLog () {
...
};
//* prototype에 등록되지 않음
ProductLog2 = () => { ...
}
//* 메소드를 등록할때 화살표 함수로 등록하게 되면
//* prototype에 등록되지 않기 때문에
//* 상속받은 인스턴스에서는 사용할 수 없음.
};
```
### 2. field(필드)
```
class Product {
//* 필드
//* this.name = name이런 식으로 설정할 필요 없음.
name = 'tom';
price = 3000;
constructor() {
}
};
```
### 3. 정적 필드와 메소드(static)
```
class Product {
//* Class자체에서 접근 가능
//* 정적 메소드는 정적 프로퍼티만 접근 가능
static name = 'tom';
static getPrice {};
constructor() {
}
};
```
### 4. private
```
class Product {
#name = "doney;
#price = 0;
constructor(name, price) {
this.#name = name;
this.#price = price;
};
//* private로 선언되면 접근이나 수정이 불가능
//* 필드에 같이 정의 해야 한다
get getPrice () {
return this.#price;
//* 클래스 내에서는 접근 가능
}
};
```
### 5. 상속
```
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
};
intoroduce () {
return `${this.name}의 가격은 ${this.price}원 입니다.`
};
};
//* extends 키워드로 상속 가능
class Sample extends Product {
constructor(name, price, type) {
//* 부모의 constructor를 호출
super(name, price);
this.type = type;
};
// *프로토타입 체이닝으로 introduce라는 메소드를
//* 사용할 수 있음
//* But 재 선언해 오버라이딩 됨.
introduce () {
return `이것의 타입은 ${this.type}의 한 종류 입니다.`
};
//* 부모의 메소드를 호출해 사용
introduce2 () {
return super.introduce + ", " + this.introduce();
};
};
class Product {
static name = "막걸리";
static price = 5000;
static introduce() {
console.log(`이것은 ${this.name} 입니다.`);
};
};
class Sample() extends Product {
static introduce () {
super.introduce();
console.log("이것의 종류는 술입니다.")
};
};
Sample.introduce();
// 이것은 막걸리 입니다.
// 이것의 종류는 술입니다.
// 이렇게 사용 할 수 있다.
```