클래스 part1

2022. 11. 27. 17:57js

25.1 클래스는 프로토타입의 문법적 설탕인가?

라는 제목의 소제목을 가진다. 예전에 자주 등장했던 이야기 인듯 하다 .

이러한 내용이 나오는 이유는 js의 객체 지향 방식에 있다. js의 경우 프로토타입을 통한 객체지향

설계를 지향하는 언어 이기 때문에 js의 class 는 결국 prototype의 슈가 문법인지에 대해 다루는 이야기 인듯 하다 .

js 의 경우 (es5)

const Person = (function() {
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHi = function () {
        console.log("HI !" + this.name);
    }
    return (Person);
}());

const me = new Person("Jiho");
me.sayHi();

코드 1 처럼 사용 할 수 있다.

class Person{
    constructor(name) {
        this.name = name;
    }
    sayHi() {
        console.log(this.name);
    }
}

const you = new Person("hoi");
you.sayHi();

클래스로 구현하게 된다면 코드 2처럼 사용 할 수 있다 .
따라서 책에서는 클래스 기반 객체지향 모델을 제공하는 것이 아니며 , 클래스는 함수이고 기존 프로토 타입 기반 패턴을
클래스 처럼 사용 할수 있게 해주는 문법적 설탕으로 볼 수 있다고 한다.

클래스에서는 엄연하게 다른점이 존재하고 내부적인 처리 방식에서도 여러 차이점이 있기 때문에
문법적 설탕으로 보는것이 아니라 새로운 패턴으로 보는것이 옳다 라고 책에서 나와있으며
공부하는 입장인 나의 입장에서도 동의하는 내용이 아닐 까 싶다.

25.2 클래스의 정의

// 클래스 선언문
class Person() {}

const per = class {};
const per = class Person{};

위와 같이 선언하고 표현할 수 있다.

클래스에서 생성자를 호출 했을때 제일 먼저 처리하게 되는
constructor() 라고 불리는 부분에서 인스턴스의 생성과 초기화를 하는 부분을 처리 할 수 있음은 물론이다.

25.3 클래스 호이스팅

위에서 말했던 것과 같이 클래스는 함수로 평가 되기 때문에
런타임 이전에 먼저 평가되어 객체를 생성하게 된다. 이때 생성되는것이 앞선 constructor라고 볼 수 있을 듯 하다 .

클래스도 호이스팅이 된다.

25.4 인스턴스 생성

new 를 통해 클래스를 생성해야 하고 new 가 없다면 class 는 생성되지 않는다.

25.5 몌서드

클래스 내부의 멤버함수 라고 볼 수 있으며
constructor, 프로토타입 메서드, 정적 메서드 의 종류를 선언 할 수 있다.

이때 constructor의 경우 일반적인 메서드가 아니라 함수 몸체의 일부로 표현 되고 하나의 constructor만 존재해야 한다.

프로토 타입 메서드

class Person{
    constructor() {}
    sayHi() {} 
}

일반 함수를 new 를 통해 프로토타입 체이닝 하기 위해서는 직접 연결해주는 작업이 필요 했지만
클래스 내부에서는 직접 연결을 하지 않아도 프로토타입 체인에 자동으로 연결되어 들어가게 된다.

정적 메서드

class Person{
    constructor() {}
    static sayHi() {} 
}
Person.sayHi();

일반 메서드 앞에 static을 붙이게 되면 정적 메서드로 동작하는데 정적 메서드는 클래스 정의 이후
인스턴스가 없어도 이미 평가된 녀석이기에 클래스에서 호출 가능하다는 점이 있다.

25.5.4 정적 메서드와 프로토 타입 메서드의 차이

정적 메서드와 프로토타입 메서드는 자신이 속해있는 프로토 타입 체인이 다르다.
정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다.
정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조 할 수 있다.

위의 3말을 종합하게 되면 결국 this의 바인딩되는 방식이 달라진다는 것을 알 수 있다.
정적 메서드의 this와 프로토타입 메서드의 this가 다르기 때문에 위와 같은 차이가 발생하는 것을 알 수 있다.

25.5.5 클래스에서 정의한 메서드의 특징

function키워드가 생략된 축약 표현을 사용하고
객체리터럴과 다르게 ,를 사용지 않는다.
암묵적으로 클래스 내부에서는 strict mode 가 동작된다.
for in 이나 object.keys 와 같은 열거 값이 false (즉 열거 할 수 없음)
new 로 함수를 호출 할 수 없음.

'js' 카테고리의 다른 글

http 공부중.  (0) 2022.12.07
클래스 나머지 정리.  (0) 2022.12.05
모노레포에 대해 정리.  (0) 2022.11.22
클로저 정리.  (0) 2022.11.20
23장 part3  (0) 2022.11.15