출처 : 유튜브 드림코딩 자바스크립트
class? 연관있는 data들 한 데 묶어놓는 container 같은 아이.
class person{
name;
age;
speak();}
field 속성 : name, age
method 행동 : speak();
즉 class는 fields와 methods가 종합적으로 묶여있다.
▪️ class : template 틀을 만든다. declare once, no data in.
(클래스 자체에는 data가 들어있지 않다.)
▪️ object : class를 이용해서 실제로 data를 넣어서 만드는 것. instance of a class. created many times. data in.
class Person {
//constructor
constructor(name, age){
// fields
this.name = name;
this.age = age;
}
//methods
speak(){
console.log(`${this.name}: hello!`);
}}
constructor을 만들어서 나중에 object를 만들 때 필요한 데이터를 전달한다.
전달된 데이터를 fields에 바로 할당해준다.
this = 생성된 object
const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
새로운 object를 만들 때 new 라는 keyword를 쓴다.
사용자들이 이상한 값 입력하지 않게끔 해주는 것
get : 값을 return한다. set : 값을 설정한다. set은 값을 설정하기 때문에 value를 받아와야 한다.
class User{
constructor(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get age(){
return this._age;
}
set age(value){
// if(value < 0){
// throw Error('age can not be negative');
// }
this._age = value < 0 ? 0 : value;
}
}
user라는 class 내에는 총 세개의 field가 존재 : firstName, lastName, _age
get과 set에 _age라고 적는 이유 : 그냥 this.age라고 적으면 constructor내의 this.age가 get을 호출하고 age가 set을 호출하여 무한반복된다.
다른 이름으로 적어줄 것!
* get과 set내의 변수에는 _도 적어주자!
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age)
field는 _age이지만 user1.age라고 호출할 수 있는 것, this.age에 값을 할당할 수 있는 것은 내부적으로 getter 와 setter를 이용하기 때문.
Too soon! (너무 최근에 개발된 것이라 아직 많은 개발자가 쓰고있지는 않음)
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField); //undefined로 출력된다.
privateField : class 내부에서만 값이 보여지고 접근이 되고 값이 변경 가능. 외부에서는 읽을 수 없음.
Too Soon!
class Article {
static publisher = 'Dream Coding';
constructor(articleNumer){
this.articleNumer = articleNumer;
}
static printPublisher(){
console.log(Article.publisher);
}
}
object와 상관없이 class가 가지고 있는 고유한 값과 data와 상관없이 동일하게 반복적으로 사용되는 method를 static이라는 키워드이용해서 붙이면 object 상관없이 class 자체에 연결되어있다.
ex)
const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher); //Dream Coding 출력됌
console.log(article1.publisher); //undefined --> static은 class자체에 값이 할당되어지기 때문!
Article.printPublisher(); //Dream Coding
a way for one class to extend another class.
class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;
}
draw(){
console.log(`drawing ${this.color} color of`);
}
getArea(){
return this.width * this.height;
}
}
class Rectangle extends Shape{}
class Triangle extends Shape{
draw(){
super.draw();
console.log('▵')
}
getArea(){
return (this.width * this.height) /2;
}
toString(){
return `Triangle: color: ${this.color}`
}
}
일일히 반복하기보다는 extends를 이용해서 shape를 재사용할 수 있다.
extends Shape{}를 적어줌으로써 shape에 있는 모든 것들이 rectangle에 포함된다.
super.draw() => override되지 않고 부모의 함수도 그대로 가져온다.
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); //drawing blue color of 출력된다.
const triangle = new Triangle(20, 20, 'white');
triangle.draw();
console.log(triangle.getArea());
object : class를 이용해서 만들어진 새로운 instance
a instanceof b : a라는 object가 b라는 class의 instance 인지 아닌지 즉 a라는 object가 b라는 class를 이용해서 만들어진 아이인지 확인한다.
true or 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 - shape을 상속했음으로.
console.log(triangle instanceof Object); //true js에 있는 모든 object는 js 내의 Object를 상속한 것임!
console.log(triangle.toString());
toString() : Object 내에 있는 함수
Javascript reference MDN(js 내부 포함된 object들)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference