1. Class
fields
methods를 담을 수 있음
class안에서 함수를 선언할 때 function을 쓰지 않아도 됨
2. object
class를 이용하여 새로운 instance를 생성한 것
class person{
// constructor
constructor(name, age){
//fields
this.name = name;
this.age = age;
}
// methods
speak(){
console.log('${this.name}: hello!');
}
}
// object 생성
const hi = new Person(hi, 27);
// 새로운 object를 생성할 땐 new를 붙여줘야함
hi.speak();
// 결과 값 : hi: hello!
3. Getter & Setters
사용자가 지정된 범위 밖의 값을 입력하는 걸 막을 수 있음
(내가 지정한 값으로 변경되게 설정 가능)
get
값을 return
set
값을 할당
* value 꼭 넣어야 함
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
// getter를 호출 -> setter를 호출
}
get age(){
return this._age;
// getter와 setter안에 쓰이는 변수 이름 다르게 만들기
// 아니면 call stack 에러 뜸
}
// age 값을 리턴함
set age(value){
this._age = value;
// 활용 this._age = value < 0 ? 0 : value;
}
// 리턴된 age 값을 age에 할당함
}
const user1 = new User('steve', 'job', -1);
console.log(user1.age);
// 0을 반환함
4. Public, private
생성자를 쓰지 않고 필드를 정의할 수 있음
class Experiment {
publicField = 2;
#privateField = 0;
// class 내에서만 값 읽기, 변경, 적용 가능
// 외부에서 호출하게 되면 undefined
}
5. Static
object(데이터)와 상관없이 class가 가지고 있는 고유의 값, 동일하게 사용되는 method 값을 저장할 때 사용
class 자체에 연결됨
* object와 상관없이 공통적으로 class에서 쓸 수 있는 것에 쓰면 좋음(메모리 사용을 줄여줌)
class Article{
static publisher = 'hi';
constructor(articleNumber){
this.articleNumber = articleNumber;
}
static printPublisher(){
console.log(Article.publisher);
}
}
const article1 = new Article(1);
console.log(article1.publisher);
// undefined
console.log(Article.publisher);
// hi
// class 자체에 붙어 있기 때문
Article.printPublisher();
// hi
6. 상속 & 다양성
공통된 부분을 계속 재사용할 수 있음
(한 곳에서 수정하면 모든 곳이 수정돼서 유지보수 유리함)
class Shape{
constructor(width, height, color){
this.width = width;
this.heigh = height;
this.color = color;
}
draw(){
console.log('${this.color} wow!');
}
getArea(){
return width * this.height;
}
class Rextangle extends Shape {}
// 키워드 extends로 Shape을 연장함
// Shape에 있는 모든 것들이 Rextangle에 포함됨
class Triangle extends Shape {
draw(){
console.log('hi');
}
// hi
super.draw(){
console.log('hi');
}
// 부모의 draw인 red wow! 와 hi 같이 출력됨
getArea(){
return (width * this.height) / 2;
}
}
// 필요한 함수만 재정의해서 사용가능
const retangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
// blue wow!
const triangle = new Triangle(20, 20, 'red');
triangle.draw();
// red wow!
7. instanceOf
왼쪽에 있는 object가 오른쪽에 있는 class의 instance인지 아닌지 true와 false로 알려줌
console.log(rectangle instanceof Rectangle); // true
console.log(triangle instanceof Rectangle); // false
console.log(triangle instanceof Triangle); // true
console.log(triangle instanceof shape); // true
console.log(triangle instanceof Object); // true
// 자바스크립트에서 만든 모든 object는 자바스크립트에 있는 object를 상속한 것임
'js' 카테고리의 다른 글
[javascript] Array 개념 (0) | 2022.09.06 |
---|---|
[javascript] object 정리 (1) | 2022.08.26 |
[javascript] Function 함수 정리 (0) | 2022.08.23 |
[javascript] 연산자 정리, 조건문(if, switch), 반복문(while,for) (0) | 2022.08.18 |
[javascript] 증감 연산자, 할당 연산자, 비교 연산자 (0) | 2022.05.24 |