About Class

class

객체를 생성하기 위한 템플릿. 함수의 종류라고 볼 수 있으며, class 문법에도 표현식과 선언 방법이 있다.

 

---

Class 선언

class를 정의하기 위한 방법 중 하나로, class와 함께 class의 이름을 지정해야한다.

class WeCode {
	constructor(height, width) {
		this.height = height;
		this.width = width;
	}
}

 

---

Hoisting

function과 class 선언의 중요한 차이점은 function의 경우,

정의를 하기 전에 호출이 가능하지만 class는 반드시 정의를 해야 사용할 수 있다.

const student = new WeCode();
class WeCode {}

// ReferenceError! 꼭 선언 후 호출하도록 하자.

 

---

Class 표현식

class 선언과는 다른 또 다른 정의 방법으로, 이름을 가질 수도 있고, 갖지 않을 수도 있다.

이름을 가진 class표현식은 body 안의 local scope에 한해 유효하다.

class를 표현식으로 정의할 수 있다는 것은 값으로 사용할 수 있는 일급 객체라는 것을 의미한다.

이는 무명의 리터럴로 생성할 수 있으며, 변수나 자료구조에 저장할 수 있다는 뜻이다.

또한, 함수의 매개변수에 전달하거나 반환값으로 사용할 수 있다.

 

(1) 익명 클래스 표현식 Unnamed

const Person = class{};

let WeCode = class
	constructor(height, width) {
		this.height = height;
		this.width = width;
	}
};
console.log(WeCode.name);
// 출력 : "WeCode"

 

(2) 기명 클래스 표현식 named

const Person = class MyClass {};

// named
let WeCode = class WeCode2 {
	constructor(height, wideth) {
		this.height = height;
		this.width = width;
	}
};
console.log(WeCode.name);
// 출력 : "WeCode2"

 

---

Class body와 Method 정의

class의 body는 {}로 묶여 있는 안 쪽 부분이다.

이곳에 메서드를 정의할 수 있으며, body 부분에 정의할 수 있는 class의 메서드는

constructor(생성자), 프로토타입 메서드, 정적 메서드 세 가지가 있다.

 

(1) Constructor(생성자)

constructor 메서드는 class로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.

class안에 한 개만 존재할 수 있으며, 여러개가 있으면 SyntaxError가 뜬다.

이름을 변경할 수 없으며, 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용한다.

// 선언문
class Person {
	// 생성자
	constructor(name) {
		// 인스턴스 생성 및 초기화
		this.name = name;
	}
}

 

(2) 프로토타입Prototype 메서드

constructor(생성자)를 사용하여 인스턴스를 생성할 경우,

프로토타입 메서드를 생성하기 위해서는 명시적으로 프로토타입 메서드를 추가해야 한다.

// 생성자 함수
function Person(name) {
	this.name = name;
};
// 프로토타입 메서드
Person.prototype.sayHi = function () {
	console.log(`Hi! My name is ${this.name}`);
};

const me = new Person('Park');
me.sayHi(); // Hi! My name is Park 출력

body에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과 다르게

class의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.

(생성자 함수와 마찬가지로 클래스가 생성한 인스턴스는 프로토타임 체인의 일원이 됨)

 

 

프로토타입 체인과 메소드의 정의 /   https://poiemaweb.com/js-object-oriented-programming

 

(3) 정적Static 메서드

정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 뜻한다.

생성자 함수의 경우 정적 메서드를 생성하기 위해서 명시적으로 생성자 함수에 메서드를 추가해야 한다.

// 생성자 함수
function Person(name) {
	this.name = name;
}

//정적 메서드
Person.sayHi = function () {
	 console.log('Hi!');
}

//정적 메서드 호출
Person.sayHi(); // Hi! 출력

 

class에서는 메서드에 static을 붙이면 정적 메서드(class 메서드)가 된다.

class Person {
	// 생성자
	constructor(name) {
		// 인스턴스 생성 및 초기화
		this.name = name;
	}
	// 정적 메서드
	static sayHi() {
		console.log('Hi!');
	}
}

정적 메서드는 프로토타입 메서드처럼 인스턴스로 호출하지 않고 클래스로 호출한다.

인스턴스의 프로토타입 체인 상에는 class가 존재하지 않기 때문에 메서드를 상속받을 수 없다.

 

---

Book : 모던 자바스크립트 Deep Dive - 이응모 지음

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

https://poiemaweb.com/js-syntax-basics