class 정의
Class
- 클래스는 모양이 정해진 틀과 같다. 붕어빵 틀 혹은 청사진이라고도 부를 수 있다.
- 데이터가 들어가 있지 않고 한번만 선언된다.
- 메모리에 올라가지 않는다.
Object
- 붕어빵 틀로 만든 붕어빵
- 클래스에 데이터를 넣어서 만든 것이 객체
- 클래스를 이용해서 많은 객체를 만들 수 있음
- 붕어빵 클래스에 팥 데이터를 넣으면 팥 붕어빵, 크림 데이터를 넣으면 크림 붕어빵이 된다.
- 데이터가 들어가 있고, 여러번 선언될 수 있다.
- 메모리에 올라가게 된다.
클래스는 ES6에 추가된 기능임
- 클래스가 없었을 때에는 function을 이용해서 바로 object를 만들었다(이게 prototype)
- 기존 프로토타입 기반으로 하며 간편하게 쓸 수 있도록 문법적으로만 추가되었다고 해서 문법적 설탕(Syntatic sugar)이라고 한다. (여전히 클래스도 프로토타입 기반이다)
클래스 몸체에서 정의할 수 있는 메소드
- constructor(생성자)
- 프로토타입 메소드(일반 메소드)
- 정적 메소드(static)
Class 선언
Person 이라는 클래스 선언
class Person {
// 생성자를 이용해서 데이타를 전달한다.
constructor(name, age) {
// filed
this.name = name;
this.age = age;
}
// method
speak() {
console.log(`${this.name}: hello`);
}
}object 생성
yoon이라는 Object를 생성
const yoon = new Person("yoon", 25);
console.log(yoon.name); // yoon
console.log(yoon.age); // 25
yoon.speak(); // yoon: hello- 위에서
Person이라는 클래스를 만들고constructor→ 생성자 를 이용해서 값을 전달한다. const yoon = new Person('yoon', 25)에 의해서yoon이라는 값에 해당 값이 전달되었다.yoon이라는 변수 뒤에.을 이용하여 참조한다.
getter & setter
- 접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 함수(메소드)로 표현한다.
- getter와 setter 함수는
get과set키워드를 써서 작성한다. get은 property를 읽을 때 동작된다.set은 property에 값을 쓸 때 호출된다.get함수는 파라미터 값을 가질 수 없다.set함수는 한개의 파라미터를 가져야 한다.
getter, setter를 이해하기 쉬운 이야기
- 자판기 = class
- 자판기에는 커피가 있지
- 커피 개수 = 프로퍼티
- 동전을 넣고, 커피를 만들고 = 메소드
- 커피 개수가 마이너스인게 맞을까 안맞을까? 당연히 안맞지 그러니까 getter, setter를 쓰는거지
- 사용자가 마음대로 커피 개수를 설정하는게 좋을까 안좋을까 안좋으니까 private로 만드는거지
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
// constructor의 this.age가 getter 호출
get age() {
return this._age;
}
// constructor의 age가 setter 호출
set age(value) {
this._age = value < 0 ? 0 : value; //나이는 음수가 없으므로, 삼항 연산자 처리함
}
}
const user1 = new User("Steve", "Jobs", -1);
console.log(user1.age); // -1- getter, setter에서
age를_age로 선언한 것은 무한콜백 오류를 방지하기 위함
Fields (public, private)
#를 붙이면 클래스 내부에서만 사용가능하고 외부에서는 값을 읽을 수도 변경할 수도 없는 private으로 정의할 수 있다.
class Experiment {
publicField = 2;
#privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefinedStatic
- 오브젝트마다 할당 되는것이 아니라 클래스 자체에 붙게 되므로,
- 프로토타입 메소드처럼 인스턴스로 호출하지 않고 클래스로 호출된다.
class Article {
static publisher = "Dream Coding";
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
static printPublisher() {
console.log(Article.pusblisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.pusblisher); // undefined → object는 복사되지만 static은 할당 않됨
console.log(Article.pusblisher); // Dream Coding
Article.printPublisher(); // Dream CodingInheritance (상속 & 다양성)
extends키워드를 사용하여 상속 후 기존의 class의 값을 모두 접근하여 사용할 수 있다.- 원본 class 변경하면 상속된 class 또한 함께 변경이 된다.
- 상속 후 함수를 재정의 할 수 있으며, 이것을 Overrriding 이라 한다.
(재정의 - 상속 관계에 있는 클래스 간에 같은 이름의 메서드를 정의하는 것) - Override를 하면 재정립이 가능하지만 원본의 함수는 호출되지 않는다.
- 단, super 를 사용하여 부모의 함수를 그대로 가져올 수 있다. (단 맨 위에 호출)
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log(`drawing ${this.color} color!`);
}
getArea() {
return width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape {
draw() {
super.draw(); // 부모 메소드 호출
console.log("🔺");
}
getArea() {
return (this.width * this.height) / 2;
}
}
const rectangle = new Rectangle(20, 20, "blue");
rectangle.draw(); // drawing blue color!
console.log(rectangle.getArea()); // 400
const triangle = new Trinangle(20, 20, "red");
triangle.draw(); // drawing red color! 🔺
console.log(triangle.getArea()); // 200instanceOf
A instanceof B 선언되며, A의 object가 B 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를 상속)
UI 마크업 개발자 장지훈입니다.