ES6 Class

ES6 Class 문법에 대한 정리에 앞서..

자바스크립트는 객체 기반 또는 프로토타입 기반(Prototype-based) 언어입니다.

그래서 클래스 기반(Class-based)의 객체지향 언어들과는 달리 프로토타입 체인과 클로저 등을 이용하여 상속과 캡슐화같은 개념들을 만들어 냈습니다.

 

하지만, ES6(ECMAScript 6)에서 Class문법이 추가되었습니다.

이 문법에 대해서 syntax sugar인가 아닌가에 대해 다양한 의견들이 있습니다.

이에 대해선 스스로 다양한 글을 읽고 판단하시는 것을 추천합니다.

 

자바스크립트에 Class문법이 추가되었다고 했지만,

사실은 Class로 선언된 객체의 속성을 알아보면 Function이라 나옵니다. (더보기 참고)

// ES5
function Human(name) {
	this.name = name;

	Human.prototype.hello = function () {
		console.log("안녕하세요, " + this.name);
	};
}

var mina = new Human("mina");
mina.hello();

// ES6 Class
class Human {
    constructor(name) {
      this.name = name;
    }

    hello() {
      console.log(`안녕하세요, ${this.name}`);
    }
  }

const mina = new Human("mina");
mina.hello();

다음과 같이 코드를 작성하고 Human의 속성을 알아보면,

Function 이라고 나와있는 것을 알 수 있습니다.

 

그럼으로 "기존의 Prototype 기반의 속성을 Class 문법으로 작성해 나타낸 것이구나" 라고 이해하시면 될 것 같습니다.

---

Class 문법 알아보기

Class 문법은 위에서 잠깐 보았듯이 class 키워드를 사용해 정의합니다.

우리가 함수를 함수 선언식과 함수 표현식으로 정의 하듯이 Class 문법도 선언식과 표현식으로 나타낼 수 있습니다.

Class는 호이스팅이 일어나지 않기 때문에 호출 이전에 선언 해주어야 합니다.

 

Class 선언식

// Class 선언식

class Human {
	constructor(name) {
		this.name = name;
}

	hello() {
		console.log(`안녕하세요, ${this.name}`);
	}
}

 

Class 표현식 

// Class 표현식

// 익명 Class
const Human = class {
	constructor(name) {
		this.name = name;
	}

	hello() {
		console.log(`안녕하세요, ${this.name}`);
	}
}

// 기명 Class
const Human = class Human {
	constructor(name) {
		this.name = name;
	}

	hello() {
		console.log(`안녕하세요, ${this.name}`);
	}
}

---

Constructor (생성자)

constructor 메서드는 객체를 생성하고 초기화하는 역할을 합니다. 

Class에서 constructor 메서드는 단 하나만 존재해야 합니다.

 

constructor 메서드는 생략할 수 있습니다.

constructor 메서드를 생략하면 Class에 빈 객체의 constructor 메서드가 생성됩니다.

그럼으로 인스턴스에 프로퍼티를 추가하려면 인스턴스를 생성한 이후, 프로퍼티를 동적으로 추가해야 합니다.

---

Class Field

Class Field는 Class 내부의 캡슐화된 변수를 말합니다.

Class Field는 인스턴스의 프로퍼티 또는 정적 프로퍼티가 될 수 있습니다.

쉽게 말해, 자바스크립트의 생성자 함수에서 this에 추가한 프로퍼티를 Class 기반의 객체지향 언어에서는 Class Field 라고 부릅니다.

class Human {
	constructor(name) {
		this.name = name; // 클래스 필드의 선언과 초기화
}

	hello() {
		console.log(`안녕하세요, ${this.name}`);
	}
}

 

constructor 메서드 내부에서 선언한 Class Field는 Class가 생성할 인스턴스를 가리키는 this에 바인딩 됩니다.

Class Field는 Class가 생성할 인스턴스의 프로퍼티가 되며, Class의 인스턴스를 통해 클래스 외부에서 언제나 참조할 수 있습니다.

 

---

getter와 setter

정적 메서드

extends, super 키워드

...