class와 인스턴스 객체

pongdang·2022년 5월 31일
1
post-thumbnail

💡 class 는 객체를 생성하기 위한 템플릿

💡 인스턴스 객체 는 그 템플릿을 기준으로 만든 객체

❤️ ES5 에서의 class

function Car(brand, name, color){
	// 속성의 정의
	// 인스턴스가 만들어질 때 실행되는 코드
	// 여기서 this는 인스턴스 객체를 가리킨다
	this.brand = brand;
	this.name = name;
	this.color = color;

	// 메서드 정의
	Car.prototype.refuel = function() {
		console.log(`${this.name} 에 연료를 공급합니다.`);
	}

	Car.prototype.drive = function() {
		console.log(`${this.brand} 가 주행을 시작합니다.`);
	}
}

🔥 class 함수 작성하기

❗️ class 선언 규칙

  1. function 키워드 사용
  2. 그냥 함수와 class 함수를 구분하기 위해서 class 함수의 이름은 명사로, 첫 글자는 대문자로 지어준다.

❗️메소드 정의

prototype 을 이용하여 메서드를 정의해야 한다.

클래스함수이름.prototype.메서드이름 의 형태로 정의할 수 있다.

❤️ ES6 에서의 class

class Car {
	// 속성의 정의
	constructor(brand, name, color) {
		// 인스턴스가 만들어질 때 실행되는 코드
		// 여기서 this는 인스턴스 객체를 가리킨다
		this.brand = brand;
		this.name = name;
		this.color = color;
	}

	// 메서드 정의
	refuel(){
		console.log(`${this.name} 에 연료를 공급합니다.`);
	}

	drive() {
		console.log(`${this.brand} 가 주행을 시작합니다.`);
	}
}

🔥 class 함수 작성하기

함수를 정의하는 방법에 함수 표현식과 함수 선언식이 있는 것처럼 class 를 정의하는 방법에도 표현식과 선언식이 존재한다.

❗️ class 선언

class Car {
	constructor() {
	.
	.
	.
	}
}

❗️ class 표현식

let Car = class {
	constructor() {
	.
	.
	.
	}
}
console.log(Car.name); // Car

let Car = class NiceCar {
	constructor() {
	.
	.
	.
	}
}
console.log(Car.name); // NiceCar

class 함수의 이름을 알고 싶다면 name 속성을 이용할 수 있다.

| 👩‍💻 예제

Rectangle 이라는 변수에 class 함수를 할당해주었다. 그리고 그 class 함수의 찐 이름은 Rectangle2 다.

그러나 Rectangle2class 를 호출하면 아래와 같은 오류가 뜬다.

Rectangle2 is not defined at <anonymous>:1:1

이를 통해 class 표현식도 함수 표현식과 비슷하게 함수의 진짜 이름은 무시되고, 변수의 이름으로만 함수를 호출할 수 있다는 것을 알 수 있다.

❗️ constructor

여기서 constructor() 라는 메서드는 생성자 함수라고 불린다.

constructor() 메서드는 class인스턴스 객체를 생성하고 초기화할 수 있다. 그래서 따로 return 문이 필요없다.

constructor() 메서드는 클래스 안에서 딱 한 개만 존재할 수 있다.

❗️ class 선언 규칙

  1. class 키워드 사용
  2. class 함수의 이름의 첫글자는 대문자로, 이름은 명사로 지어준다.

❗️메소드 정의

class 함수 안에서 간단하게 메소드이름(){} 의 형태로 정의할 수 있다.

❤️‍🔥 인스턴스 객체

🤔 위에서 만든 Car 라는 클래스 함수의 속성과 메서드를 인스턴스 객체에서 사용하려면 어떻게 해야 할까?

  • 👀 class 함수 보기
    class Car {
    	// 속성의 정의
    	constructor(brand, name, color) {
    		// 인스턴스가 만들어질 때 실행되는 코드
    		// 여기서 this는 인스턴스 객체를 가리킨다
    		this.brand = brand;
    		this.name = name;
    		this.color = color;
    	}
    
    	// 메서드 정의
    	refuel() {
    		console.log(`${this.name} 에 연료를 공급합니다.`);
    	}
    
    	drive() {
    		console.log(`${this.brand} 가 주행을 시작합니다.`);
    	}
    }
    constructor() 메서드 안에서 쓰인 this 는 인스턴스 객체를 가리키고, 만들어진 인스턴스 객체에 해당 값을 부여하겠다는 의미이다.
let mini = new Car("bmw", "mini", "white");
mini.brand; // "bmw"
mini.refuel(); // 미니에 연료를 공급합니다.

위처럼 new 키워드를 사용하여 인스턴스 객체를 만들 수 있다.

let 인스턴스 객체 이름 = new class함수이름 (속성, ... 속성);

console.log(mini);


혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱

2개의 댓글

comment-user-thumbnail
2022년 6월 3일

class를 이용해서 인스턴스를 만들어 쓰는게 아닌 class 자체의 static 요소도 알아보면 좋을 것 같아요!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields

1개의 답글