Javascript 클래스

ES6부터 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍을 좀 더 클래스 기반 객체지향 프로그래밍 언어와 흡사하게 객체를 생성할 수 있도록 메커니즘을 제공해주는 것이다.

클래스

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

// 익명 클래스 표현식
const Person = class {};
// 기명 클래스 표현식
const Person = class MyClass {};

클래스를 표현식으로 정의할 수 있다는 건 클래스가 일급 객체라는 것이다.

무명의 리터럴 생성할 수 있음
변수나 자료구조(객체, 배열 등)에 저장 가능
함수의 매개변수로 전달
함수의 반환 값 사용

클래스 호이스팅

클래스는 함수로 평가된다.

class Person{}
console.log(typeof Person); //function

그래서 클래스도 호이스팅이 발생한다. 단 let, const 키워드로 선언한 변수처럼 호이스팅된다.

const Person = '';
{
  console.log(Person);  
  class Person{};
}

호이스팅이 발생하지 않는다면 ''이 출력되어야 하지만 RefereneceError: Cannot access 'Person' before initialization이 발생한다.

인스턴스 생성

클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다.

class Person {}

//인스턴스 생성
const me = new Person();
console.log(me); // Person {}

함수는 new를 쓰지 않으면 일반 함수로 호출 되지만, 클래스는 반드시 new 연산자와 함께 호출해야 한다.
인스턴스를 만드는 것만이 목적이니까.

메서드

클래스 몸체에는 0개 이상의 메서드만 선언할 수 있다.
또한 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드가 있다.

constructor

인스턴스를 생성하고 초기화하기 위한 메서드

class Person{
  constrcutor(name, address){
    // 인스턴스 생성 및 초기화
      this.name = name;
    this.address = address;
  }
}

클래스는 평가되어 함수 객체가 된다. 그래서 함수 객체가 갖고 있는 고유의 프로퍼티를 모두 갖고 있다.
마찬가지로 프로토타입과 연결되어있다.
constructor

클래스 내에 최대 한 개만 존재할 수 있다. 2개 이상이면 문법에러 발생
생략하면 암묵적으로 빈 constructor를 만듬
별도의 반환문을 쓰지 않는다.

만약 반환문을 쓰면?

명시적으로 객체 반환하면 암묵적인 this 반환 무시
class Person{ constrcutor(name, address){ // 인스턴스 생성 및 초기화 this.name = name; return {}; } }

console.log(new Person('Lee')); // {}

2. 명시적으로 원시값 반환하면? 반환 무시, this 반환
```javascript
class Person{
  constrcutor(name, address){
    // 인스턴스 생성 및 초기화
      this.name = name;

    return 100;
  }
}

console.log(new Person('Lee')); // Person {name: 'Lee'}

하지만 constructor의 목적과 의도에 맞지 않으므로 사용하지 않도록 한다.

constructor

생성자 함수는 프로토타입 메서드 생성하려면 프로토타입에 명시적으로 써줘야했다. 하지만 클래스는 몸체에 정의한 메서드는 기본적으로 프로토타입 메서드가 된다.

class Person{
  constrcutor(name, address){
      this.name = name;
  }
  sayHi() {
   console.log(`Hi my name is ${this.name}`); 
  }
}

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

만약 생성자함수를 사용한다면?

function Person(name){
  this.name = name;
}
Person.prototype.sayHi = function() {
   console.log(`Hi my name is ${this.name}`); 
};

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

정적 메서드

정적 메서드, 즉 static method는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다.
만드는 방법은 클래스 내 메서드에 static 메서드를 붙이면 정적 메서드가 도니다.

class Person{
  constrcutor(name, address){
      this.name = name;
  }
  static sayHi() {
   console.log(`Hi my name is ${this.name}`); 
  }
}

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

function Person(name){
  this.name = name;
}
Person.sayHi = function() {
   console.log('Hi!'); 
};

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

클래스의 인스턴스 생성

인스턴스 생성과 this 바인딩
클래스가 인스턴스 생성( 빈 객체임 ) - 프로토타입 연결/ this가 클래스가 생성한 인스턴스 가리킴
인스턴스 초기화
this에 바인딩되어 있는 인스턴스 초기화, 초기 값 초기화
인스턴스 반환
만들어진 인스턴스와 바인딩된 this 반환프로퍼티
class Person{ //생성자 constructor(name){ // 1. 암묵적으로 인스턴스 생성되고 this에 바인딩 console.log(this); //Person {} console.log(Object.getPrototypeOf(this) == Person.prototype); // true // 2. this에 바인딩 되어 있는 인스턴스 초기화 this.name = name; // 3. 완성된 인스턴스가 바인딩 된 this가 암묵적으로 반환 } }

접근자 프로퍼티

접근자 프로퍼티는 자체적으로 값([[Value]]내부슬롯)을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다.

const person = {
 //데이터 프로퍼티
  firstName: 'Ungmo',
  lastName: 'Lee',

  //fullName은 접근자 함수로 구성된 접근자 프로퍼티다.
  get fullName(){
      return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name){
    [this.firstName, this.lastName] = name.split(' ');
  },
};

클래스에서도 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수를 사용할 수 있음

class Person{
     //생성자
  constructor(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(name){
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const me = new Person('Ungmo', 'Lee);
console.log(${me.firstName} ${me.lastName}); //Ungmo Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter함수가 호출된다.
console.log(me.fullName); // Heegun Lee

get, set 키워드를 메서드 이름 앞에 사용해서 정의함
접근자 함수를 사용하여 참조하면 get이 실행됨
접근자 함수를 사용하여 값을 할당하면 set이 실행됨
기본적으로 접근자 프로퍼티는 프로토타입의 프로퍼티가 됨

private 필드 정의 제안

public에서 필드는 클래스 내부, 자식 클래스 내부, 클래스 인스턴스를 통한 접근가능하다.
private는 클래스 내부에서만 접근가능하고, 자식 클래스 내부/ 클래스 인스턴스를 통한 접근이 막힌 경우이다.

기호를 private를 하고 싶은 클래스 필드 모양 앞에 붙여주면 private 필드로 사용 가능하다
(ex. #name='') -> 클래스 외부, 인스턴스에서 접근하지 못함
접근자 프로퍼티를 private 필드를 참조하여 만들면, 간접적으로 접근 가능함
내부에서 private 필드를 클래스 내부에서 참조하는 경우에는 this를 붙여 사용해야함
private 필드는 constructor를 통해서 정의하지 못하므로 클래스 몸체에서 무조건 정의해야 함

class Person{
  // private 필드 정의
  #name = '';
  constructor(name){
    this.#name = name;
  }

  //name은 접근자 프로퍼티다.
  get name() {
   return this.#name.trim(); 
  }
}
const me = new Person('Lee');
console.log(me.name); //Lee

타입스크립트에선 public, private, protected 모두 지원.

static 필드 정의 제안

static 키워드를 통해서 이전에 정적 메서드를 정의 했었음
but static으로 정적 필드를 정의할 수는 없었다.
제안되어 있음.

class MyMath{
  static PI = 22 / 7;
  //static private 필드 정의
  static #num = 10;
}

상속에 의한 클래스 확장, extends 키워드

프로토타입 기반의 상속은 다른 객체의 자산을 상속받는 개념이지만 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의
자바스크립트에선 유사한 개념이라고 볼 수 있다.

class Animal{
  constrcutor(age, weight){
    this.age = age;
    this.weight = weight;
  }

  eat() {return 'eat';}
  move() {return 'move';}
}

// 상속을 통해 Animal 클래스 확장한 Bird클래스
class Bird extends Animal{
    fly(){ return 'fly'};
}
const bird = new Bird(1, 5);

console.log(bird); // Bird {age:1 , weight: 5}
console.log(bird instanceof Bird); // true
console.log(bird instanceof Animal); // true

console.log(bird.eat()); //eat
console.log(bird.move()); //move
console.log(bird.fly()); //fly

다른 클래스를 확장할 수 있는 문법
생성자 함수는 다른 생성자 함수를 확장할 수 있는 문법이 없음
클래스 또한 프로토타입을 통해 상속 관계를 구현함

동적 상속

extends를 통해서 클래스 뿐만 아니라 생성자 함수도 상속을 받을 수 있기 때문에 조건을 걸어 동적으로 선택하여 상속을 받는다.
[[Construct]] 내부 메서드를 갖는 함수 객체면 가능함 -> 클래스, 함수 선언문, 함수 표현식 모두 상속 받을 수 있음

function Base1() {}

class Base2 {}

let condition = true;

class Derived extends (condition ? Base1 : Base2) {}

const derived = new Derived();
console.log(derived instanceof Base1); // true

서브클래스의 constructor

서브클래스에 constructor를 생략하는 경우 암묵적으로 constructor가 정의되면서
서브클래스로 인스턴스를 생성할 때 넣은 인수 리스트를 수퍼클래스의 constructor에 넣어 호출
수퍼클래스, 서브클래스 모두 constructor를 생략하면 빈 객체 생성

// constructor 생략
class Derived extends Base {}


// 암묵적인 constructor 생성과 세팅 값
class Derived extends Base {
  constructor(...args) {
    super(...args);
  }
}

super 키워드

super 호출 -> 수퍼클래스의 contructor를 호출
서브클래스에 인스턴스 프로퍼티를 지정하는 경우에는,
constructor를 생략할수 없고 사용해야만 함 이때 super 호출을 무조건 해야함

super 호출 전에는 this참조가 불가하다
반드시 서브클래스의 constructor에서만 super을 호출

표준 빌트인 생성자 함수 확장

함수 객체로 평가될 수 있는 모든 표현식을 상속 받을수 있으므로, 표준 빌트인 생성자 함수도 상속 받아 확장할 수 있음

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }

  uniq() {
    return this.filter((v, i, self) => self.indexOf(v) === i);
  }
}

저작자표시

'JavaScript > JS 기초' 카테고리의 다른 글

Javascript this와 apply, call, bind 메서드 (0)	2021.09.19
함수와 일급객체 (0)	2021.09.12
JavaScript 원시 타입과 객체 타입, 원시 값과 객체 (0)	2021.09.07
JavaScript 변수의 생명 주기, 전역 변수의 문제점 (0)	2021.09.05
JavaScript 객체 타입(Object) (0)	2021.08.31

쪽파코딩

Javascript 클래스

Javascript 클래스

클래스

클래스 호이스팅

인스턴스 생성

메서드

constructor

constructor

정적 메서드

클래스의 인스턴스 생성

접근자 프로퍼티

private 필드 정의 제안

static 필드 정의 제안

상속에 의한 클래스 확장, extends 키워드

동적 상속

서브클래스의 constructor

super 키워드

표준 빌트인 생성자 함수 확장

'JavaScript > JS 기초' 카테고리의 다른 글

티스토리툴바

Javascript 클래스

Javascript 클래스

클래스

클래스 호이스팅

인스턴스 생성

메서드

constructor

constructor

정적 메서드

클래스의 인스턴스 생성

접근자 프로퍼티

private 필드 정의 제안

static 필드 정의 제안

상속에 의한 클래스 확장, extends 키워드

동적 상속

서브클래스의 constructor

super 키워드

표준 빌트인 생성자 함수 확장

'JavaScript > JS 기초' 카테고리의 다른 글

'JavaScript/JS 기초' Related Articles

티스토리툴바