Class 클래스
: 설계도, 틀, 템플릿. ex) 붕어빵 틀
Object 객체
: 설계도로 구현할 대상. class의 instance. ex) 붕어빵
- 클래스로 선언됐을 때
Instance 인스턴스
: 설계도로 구현된 실체. ex) 슈크림붕어빵- 메모리에 할당되어 실제 사용할 때
prototype
청사진을 만들때 쓰는 원형 객체
constructor
인스턴스가 초기화될때 실행하는 생성자 함수
this
함수실행시, 해당 Scope마다 생성되는 고유한 실행 컨텍스트.
new 키워드로 인스턴스 생성시, 해당 인스턴스가 바로 this 값이 됨
모델이 되는 설계도를 만들고 이를 바탕으로 객체를 만드는 프로그래밍 패턴
예) 자동차 기본설계도를 바탕으로 테슬라, 부가티, 람보르기니를 만들 수 있는 것
class - 설계도
instance - 설계도를 바탕으로 만든 객체
객체를 정의하고 만들기 위한 설계도, 틀, 템플릿
예) 자동차 설계도, 쿠키 모양 틀, 붕어빵 틀
class User {
constructor(firstName, lastName, age){
// fields 속성
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
// method 메서드
eat() {
console.log(`${this.name} Welcome!`);
}
}
<예시>
우리가 자판기머신 클래스를 만든다고 가정해보자.
여기에 속성은 커피개수/ 함수는 동전넣기, 커피만들기가 있다고 해보자.
- 그런데 사용자가 멍청하게 커피개수를 -1로 설정해버린다면?
NO! 그래서 setter로 사용자가 -1을 넣더라도 0으로 설정해주는 거지- 그런데 사용자가 커피개수를 설정하는게 좋을까?
NO! 그래서 커피개수를 private로 접근 불가능하게 하자. 캡슐화를 해야한다
// age설정을 -1로 설정하려고함, 이를 방지하기 위해 get,setter 사용
class User {
constructor(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age; // this.age : get호출/ = age : set호출
}
get age() { // 값을 리턴
return this._age;
}
set age(value){ // 값을 설정함. 할당. 그래서 value를 받아와야함
this._age = value < 0 ? 0 : value;
}
}
const user1 = new User('Mika', 'Hoi', -1);
console.log(user1.age); // 0
get과 set에 같은 변수명을 사용할 때 생기는 문제
constructor의 this.age = age;
에서
this.age
가 get을 호출하고
= age;
가 set 호출하게되는데
set 안에 this.age = value
에서
= value
도 set을 계속 호출하므로 무한반복에 빠진다
call stack 초과됐다는 오류가 남
해결방법
getter와 setter의 변수명을 다르게 변경
예) this._age;
그냥 정의
- 외부에서 접근가능#키워드로 정의
- 클래스외부에서 접근/변경 불가능class Experiment {
publicField = 2;
#privateField = 0; // # 키워드로 private 정의
}
const experiment = new Experiment();
console.log(experiment.publicField); // 2
console.log(experiment.privateField); // undefined
들어오는 데이터와 상관없이, 클래스의 값과 메서드를 사용하기
class명.변수명
으로 써야함class Article {
// static 변수
static publisher = 'martin';
constructor(articleNumber) {
this.articleNumber = articleNumber;
}
// static 함수
static printPublisher() {
console.log(Artivle.puclisher);
}
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher); // undefined
console.log(Article.publisher); // martin
Article.printPublisher(); // martin
class User {
constructor(firstName, lastName, age){
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
eating() {
console.log(`${this.firstName} eating rice!`);
}
introduce() {
console.log(`${this.age} years old.`);
}
// extends 로 확장 - 재사용성
class Person extends User {}
class Dog extends User {
// 오버라이딩 - 다양성
eating() {
console.log(`${this.firstName} eating milk!`);
}
introduce(){
super.introduce(); // super로 부모의 메서드 호출
console.log('멍멍');
}
}
const person = new Person('mina', 'ha', 22);
person.eating(); // mina eating rice!
const dog = new Dog('coco', 'ha', 2);
dog.eating(); // coco eating milk!
dog.introduce(); // 2 years old. // 멍멍
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
super(name); // 부모 생성자를 실행해줌. 안하면 에러남
this.earLength = earLength;
}
// ...
}
// 이제 에러 없이 동작
let rabbit = new Rabbit("흰 토끼", 10);
alert(rabbit.name); // 흰 토끼
alert(rabbit.earLength); // 10
console.log(person instanceof Person); // true
console.log(dog instanceof Dog); // true
console.log(dog instanceof User); // true 상속받음
console.log(dog instanceof Object); // true
function Car(color){
//인스턴스가 만들어질때 실행되는 코드
}
constructor 생성자 : 인스턴스가 만들어질 때 실행되는 코드
class Car{
constructor(brand, name, color){
//인스턴스가 만들어질때 실행되는 코드
}
}
클래스의 설계도, 틀로 구현된 구체적 실체
- 메모리에 할당되어 실제 사용할 때.
예) 부가티, 초코쿠키, 슈크림붕어빵
// Car 클래스에 avante라는 인스턴스 - 메모리에 할당
let avante = new Car('bmw', 'avante', 'red'); // avante 인스턴스
let avante = new Car('bmw', 'avante', 'red');
avante.brand; // 'bmw'
avante.refuel // 연료를 공급
인스턴스 객체를 의미한다
class Student {
constructor(name, age, grades) {
this.name = name;
this.age = age;
this.grades = grades;
}
}
function Car(brand, name, color) { 생략 }
Car.prototype.refuel = function() {
}
Car.prototype.drive = function() {
}
class Car {
constructor(brand, name, color) { 생략 }
}
드림코딩을 참고했습니다
자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6)