[Javascript강의]12강 클래스

클래스

자바스크립트는 프로토타입 기반 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현 할 수 있다.

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

      //프로토타입 메서드
      Person.prototype.sayHi = function(){
          console.log('Hi! My Name is '+this.name);          
      }

      //생성자 함수 반환
      return Person;
  }());

  //인스턴스 생성
  var me = new Person('Kim');
  me.sayHi(); //Hi! My Name is Kim

클래스와 생성자 함수 차이

1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 하지만 생성자 함수를 new 연산자 없이
호출하면 일반 함수로서 호출된다.
2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는
extends와 super 키워드를 지원하지 않는다.
3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자
함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생한다.
4. 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를
해제할 수 없다. 하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.
5. 클래스의 constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어트리뷰트
[[Enumerable]]의 값이 false다. 다시 말해, 열거되지 않는다.

클래스 정의

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

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

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

클래스는 일급 객체로서 다음과 같은 특징을 갖는다.
1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에게 전달할 수 있다.
4. 함수의 반환값으로 사용할 수 있다.

//클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에서 정의할 수
//있는 메서드는 생성자, 프로토타입 메서드, 정적 메서드의 세 가지가 있다.

//클래스 선언문
class Person {
  //생성자
  constructor(name){
    //인스턴스 생성 및 초기화
    this.name = name; //name 프로퍼티는 public 하다
  }
  
  //프로토타입 메서드
  sayHi(){
    console.log(`Hi! My name is ${this.name}`);
  }
  
  //정적 메서드
  static sayHello(){
   console.log('Hello!');
  }
}

//인스턴스 생성
const me = new Person('Lee');

 //인스턴스의 프로퍼치 참조
  console.log(me.name); //Kim
  //프로토타입 메서드 호출
  console.log(me.sayHi()); //Hi!

//인스턴스 생성
class Person{}

const me = new Person();

//함수 표현식과 마찬가지로 클래스를 가리키는 식별자로 인스턴스 생성
const Person = class MyClass {};
const me = new Person();
const you = new MyClass(); // ReferenceError: MyClass is not defined

인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다.

  //최신 브라우저에서는 클래스 필드 사용가능 함
  class Person{
      name = 'Kim';
  }
  
  //private 클래스 필드
   class Person{
      #name = 'Kim';
      
      get name(){
          return this.#name.trim();
      }
  }  
  
   //static 필드
   class Person{
      static PI = 22/7;
  }
  console.log(Person.PI);

 

상속

  class Animail{
      constructor(age, weight){
          this.age = age;
          this.weight = weight;
      }

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

  //상속을 통해 Animal 클래스를 확장한 Bird 클래스
  class Bird extends Animal {
      constructor(age, weight, sex){
        super(age, weight);
        this.sex = sex;
      }
      
      fly() { return 'fly'; }
  }

  const bird = new Bird(1,5);

  console.log(bird);
  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

 

표준 빌트인 확장

  class MyArray extends Array{
      uniq(){
          return this.filter((v,i,self) => self.indexOf(v) === i );
      }
  }
  
  const myArray = new MyArray(1,1,2,3);
  console.log(myArray.uniq()); //1,2,3