14. 클래스

클래스

객체를 생성하기 위한 틀(Tamplate)로, 객체의 상태를 나타내는 속성과 객체가 수행할 수 있는 동작을 나타내는 메서드를 포함한다. 

 

* 생성 방법

 1. 클래스 정의(속성, 메서드)  

      - 속성: name, age

      - 메서드1: constructor() → name, age를 매개변수로 받아 this.name, this.age 속성을 초기화.

      - 메서드2: printMyName() → this.name, this.age 속성을 사용하여 인사말 출력.

 

 2. 클래스를 사용하여 객체 생성(클래스의 인스턴스 생성) 

     - new 키워드를 사용하여 Person 클래스의 새로운 인스턴스 생성하여 prs 변수에 할당.

       * 인스턴스:  클래스는 객체의 특성을 정의하는 것이고 그 클래스를 통해 생성된 구체적인 실체(Object)가 인스턴스. 

 

 3. 객체의 속성과 메서드 사용

     - prs 객체의 printMyName() 메서드를 호출하여 결과 출력.

class Person {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  
  printMyName(){
    console.log("My name is " + this.name + ", and I'm " + this.age);
  }
}

const prs = new Person("Kim", 30);

prs.printMyName();
// 결과: "my name is Kim, and I'm 30"

 

 

상속 

기존 객체를 기반으로 새로운 객체를 생성하고, 기존 객체의 속성과 메서드를 재사용 할 수 있다.

 

* 상속 방법(기본적으로 프로토타입 체인을 이용해 상속을 구현한다.)

  1. 생성자 함수(construcutor)와 프로토타입 객체 이용

     * 생성자 함수: 객체를 만드는 함수로 객체를 초기화하고 속성을 설정할 수 있다. 일반적으로 대문자로 시작하며 new 연산자와 함께 호출된다. 그러면 새로운 객체가 생성되고 생성자 함수 내에서 this 키워드를 사용하여 이 객체에 속성을 할당할 수 있다.

  2. 클래스와 extends 키워드 이용 

class Human {
  constructor(){
    this.gender = "female";
  }
  
  printGender(){
    console.log("and I'm a " + this.gender);
  }
}

class Person extends Human{
  constructor(name, age){
    super()
    this.name = name;
    this.age = age;
  }
  
  printMyName(){
    console.log("My name is " + this.name + ", and I'm " + this.age);
  }
}

const prs = new Person("Kim", 30);

prs.printMyName(); // 결과: "My name is Kim, and I'm 30"
prs.printGender(); // 결과: "and I'm a female"

* super 

   - 클래스의 상속을 구현할 때 사용하는 키워드.

   - 부모 클래스의 생성자 함수, 정적메소드, 일반 메소드를 호출하거나 부모클래스의 프로퍼티나 메소드에 접근하기 위해 사용

      * 프로퍼티(property): 클래스 내에 정의한 변수 

   - 자식 클래스의 생성자 함수 내에서 this를 사용하기 전에 반드시 super() 호출 

      → 없거나 위치 틀리면 TypeError 발생..  

 

**참고: JS MDN** 

Java나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 JavaScript가 동적인 언어라는 점과  class가 없다는 것에서 혼란스러워 한다.(ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 JavaScript는 여전히 프로토타입 기반의 언어다.) 상속 관점에서 JavaScript의 유일한 생성자는 객체뿐이다. 각각의 객체는[[Prototype]]이라는 은닉(private) 속성을 가지는데, 자신의 프로토타입(원형)이 되는 다른 객체를 가리킨다. 그 객체의 포로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다가 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며 프로토타입 체인의 종점 역할을 한다. 종종 이러한 점이 JavaScript의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 예를 들어, 프로토타입적 모델에서 고전적 방식을 구현하는 건 꽤 사소한 일이나, 그 반대는 훨씬 더 어렵기 때문이다. 

 

* 프로토타입 기반 언어란? 

클래스 기반 언어의 상속을 대신해 객체 간 상속 및 재사용을 구현하는 것,  객체를 직접 생성하고 이를 기반으로 새로운 객체 생성한다. (새로운 객체는 기존 객체를 상속받음) 이러한 객체를 프로토타입(prototype)이라 부르며, 모든 객체는 프로토타입을 가지고 있다. 객체의 속성이나 메소드를 찾을 때 해당 객체의 프로토타입 체인을 따라 올라가며 찾고, 이를 통해 객체 간 상속 또는 재사용을 쉽게 구현할 수 있다. 

 

* Java 와 JavaScript의 차이 

 1. Java는 정적(Static)타입 언어로 이들 언어는 변수의 타입이 컴파일 시간에 결정되며 실행시간에는 변경되지 않는다. 

 2. 클래스 기반 언어로 상속 등 객체지향적인 기능을 클래스를 이용하여 구현한다.

    (프로토타입은 클래스를 사용하지 않고 객체를 직접 생성하고, 이를 기반으로 상속 등 객체지향적 기능을 구현한다.) 

 3. 컴파일 언어로서 코드를 실행하기 전 명시적으로 컴파일 하여 기계어로 변환한다. 

    (자바스크립트는 인터프리터 언어로 코드를 실행하기 전 인터프리터가 한 줄씩 해석하고 실행한다.)

 

 

차세대 JavaScript 구문 

Property	Method
ES6
construntor( ) { this.myProperty = 'value' }	myMethod( ) { ... }
ES7
myProperty = 'value'	mtMethod = () => { ... }

class Human {
  gender = "female";
  
  printGender = () => {
    console.log("and I'm a " + this.gender);
  }
}

class Person extends Human{
  name = "Kim";
  age = 30;
  gender = "male"
  
  printMyName = () => {
    console.log("My name is " + this.name + ", and I'm " + this.age);
  }
}

const prs = new Person();

prs.printMyName(); // 결과: "My name is Kim, and I'm 30"
prs.printGender(); // 결과: "and I'm a male"