[Javascript] Class (Part.1 body, method 정의)

신세원·2020년 9월 14일
0

javascript

목록 보기
16/19
post-thumbnail

class는 객체를 생성하기 위한 템플릿이다.

class는 데이터와 이를 조작하는 코드를 추상화한다.

ES6에서 class라는 문법이 추가 되었고, 원래 prototype을 이용하여 만들어졌지만 기존의 기반으로 클래스를 만드는것보다 명료하게 클래스를 만들수 있게 되었다.


Class 정의 및 표현 방법

Class는 사실 함수입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도

  • class 선언
  • class 표현식

두 가지 방법을 제공합니다.

1. Class 선언

class를 정의하는 한 가지 방법은 class 선언을 이용하는 것이다.

class를 선언하기 위해서는 클래스의 이름과 함께 class 키워드를 사용해야 합니다.


class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  

Hositing

함수선언class선언의 중요한 차이점은 '함수선언'의 경우 호이스팅이 일어나지만,

클래스의 선언은 그렇지 않다.

클래스를 사용하기 위해서는 클래스를 먼저 선언해야 한다.

그렇지 않으면 다음 아래의 코드처럼 ReferenceError 에러를 던질 것이다.


const a = new Person(); // ReferenceError

class Person {}

2. Class 표현식

class 표현식도 클래스를 표현하는 다른 방법이다.

클래스 표현식은 익명 클래스와 기명 클래스를 만들 수 있다.


const Person = class { 
  constructor(name, age) { 
    this.name = name; 
    this.age = age; 
  } 
}; 

const Person = class Person { 
   constructor(name, age) { 
    this.name = name; 
    this.age = age; 
  } 
}; 

클래스 표현(Class expressions) 또한 클래스 선언(Class declarations)와 같이 호이스팅(hoisting)이 되지 않는다.

Class body 와 method 정의

Class body는 중괄호 {} 로 묶여 있는 안쪽 부분이다.

이곳은 method나 constructor와 같은 class members를 정의할 곳이다.

method(메소드) 정의

위에서 처럼 ES6의 class에서, 클래스의 몸통(body)는 {} 이며, class 메소드는 class의 {} 안에 정의해야 한다.

Constructor (생성자)

javascript 생성자는 new 연산자와 함께 사용된다.

constructor 메소드는 Javascript 객체를 생성하는 데 사용되는 함수라고 불리고,

class로 생성된 객체를 생성한 후 생성자 함수를 호출하고 새 객체를 this 키워드의 값으로 전달하며, 객체가 사용되기 전 설정 돼 있어야 할 프로퍼티를 설정하는 역할을 한다.


function Point(x,y){
    this.x = x;
    this.y = y;
    // 보통 생성자 함수는 반환값이 없다.
}
 
point1 = new Point(5,5);
point2 = new Point(8,8);
 
console.log(Point1,Point2); // {"x":5,"y":5}, {"x":8,"y":8}

constructor라는 이름을 가진 특수한 메소드는 클래스 안에 한개만 존재할 수 있다.

만약 클래스에 여러 개의 constructor 메소드가 존재하면 SyntaxError 가 발생할 것이다.


const Person = class { 
  constructor(name, age) {
    this.name = name; 
    this.age = age; 
  } ˆ
  constructor(name2, age2) { 
    this.name2 = name2; 
    this.age2 = age2 ; 
  } 
};
//Uncaught SyntaxError: A class may only have one constructor
profile
생각하는대로 살지 않으면, 사는대로 생각하게 된다.

0개의 댓글