[TIL] 기록 54일차

Today I Learned

• JavaScript의 Class에 대해 공부했다.

ES5 이전 버전에서는 Class 대신 사용자 정의 타입 생성이라는 개념의 방법이 있었다.

PersonType(name) {
	this.name = name;
}

PersonType.prototype.sayName = function() {
    console.log(this.name)
}

let person = new PersonType('Woody');  
person.sayName() // Woody

Class 선언은 class 키워드와 이름으로 시작한다.

    class PersonClass {
        constructor(name) {
            this.name = name;
         }
         sayName() {
            console.log(this.name);
         }
    }

    let person = new PersonClass('Woody')  
    person.sayName() // Woody  

PersonClass 클래스 선언은 이전에 함수를 생성자로 정의하는 대신 constructor 메소드를 사용하여 클래스 내부에 직접 생성자를 정의할 수 있다. 클래스 메소드는 간결한 구문을 사용하기 때문에 위에서 보는 것과 같이 sayName이라는 메소드를 정의할 때 따로 function 키워드를 사용할 필요가 없다.

• 가능한 모든 property는 생성자 함수 내에서 만드는 것이 좋다. 그 이유는 클래스으 한 장소에서 모든 property가 표현되기 때문

• 클래스 선언은 실제로 contructor 메소드의 동작을 갖는 함수를 생성한다. 이것이 typeof로 PersonClass를 찍어봤을 때 function을 리턴해주는 이유이다.

클래스와 사용자 정의 타입의 유의해야할 차이점이 몇 가지가 있다.

• 클래스 선언은 함수 선언과 달리 Hosting 되지 않는다.
• 클래스 선언의 모든 코드는 strict 모드로 자동 실행된다. strict 모드를 거부할 수 있는 방법은 없다.

strict 모드는 기존 자바스크립트에서 묵인했던 에러들의 에러 메세지를 발생시킴. 엄격한 문법 검사.
	- 선언없이 전역변수를 만들 수 없다.
	- read only 객체의 수정이 불가능하다.
	- arguments 를 변수 또는 함수, 매개 변수의 이름으로 사용할 수 없다.
이외에도 정확한 문법체크를 위해 많은 에러를 발생시킴.

• 모든 메소드는 Non-Enumerable이다. Object.defineProperty() 를 사용하여 메소드를 Non-Enumerable하게 만드는 사용자 정의 타입과 다른 중요한 변경 사항이다.

* Enumerable의 뜻을 찾아보니 '열거, 혹은 셈이 가능한' 이라는 의미를 지니고 있다.

•  모든 메소드는 내부 [[Constructor]] 메소드가 없으며, new로 호출하려고 하면 에러가 발생
•  new를 사용하지 않고, 클래스 생성자를 호출하면 오류가 발생한다.
•  클래스 메소드 내에서 클래스 이름을 덮어 쓰려고 하면 오류가 발생한다.

일급 시민으로서의 클래스. 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가르킨다. 그 연산에는 함수에 파라미터로 넘기기, 변수에 대입하기와 같은 연산들을 말한다.

 function createObject(classDef) {
     return new classDef();
 }

 let obj = createObject(class {

    sayHi() {
        console.log('Hi!')
    }
 });

 obj.sayHi();

 

클래스 표현식의 또 다른 흥미로운 사용법은 클래스 생성자를 즉시 호출하여 싱글톤을 생성하는 것이다. 이렇게 하려면 클래스 표현식에 new를 사용해야하고, 마지막에 괄호를 포함해야한다.

 let person = new class {
     constructor(name) {
         this.name = name;
     }
     sayName() {
         console.log(this.name);
     }
 }('Wodoy')

 person.sayName()

 

출처 : https://infoscis.github.io/2018/02/13/ecmascript-6-introducing-javascript-classes/