클래스 생성자와 메소드

 

 

자바스크립트의 class에 관해서는 이전 피드에서 다루어 생략합니다.:) 

https://dream-frontend.tistory.com/334

클래스와 기본 문법

 

 

 

생성자 (Constructor)

---

 

객체(Object)의 설계도인 클래스(class)는 문법이 비슷하다.

둘의 가장 큰 차이는 constructor라는 생성자 함수이다.

 

아래의 class를 살펴보자.

 

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
    this.salesAmount = 0;
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }
  
  addSales() {
    this.salesAmount++;
  }
}

const morning = new Car('Morning', 2000000);

 

morning과 같이 class로 객체를 생성하는 과정을 '인스턴스화'라고 부른다.

 

그리고 class를 통해 생성된 객체를 '인스턴스'라고 한다.

 

class는 새로운 instance를 생성할 때 마다 constructor() 메서드를 호출한다.

 

 

아래에서 class의 constructor를 더 살펴보자.

 

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

 

• Car는 class이름이다. 항상 대문자로 시작하고, CamelCase로 작성해야 한다.

• Car class의 instance를 생성할때마다 constructor메서드가 호출된다.

• constructor()메서드는 name, price 2개의 argument(인자)를 받습니다.

• constructor()메서드에 this 키워드를 사용했습니다. class의 실행범위(context)에서 this는 해당 instance를 의미한다.

• constructor()에서 인자로 넘어오는 name과 price를 사용해 Car instance의 name, price 프로퍼티에 값을 할당했다.

• 이렇게 클래스 내에서 name, price와 같이 변경 가능한 상태값이자 class내의 컨텍스트에서 어느 곳에서나 사용할 수 있는 변수를 '멤버 변수'라고 부른다.

• 멤버 변수는 'this' 키워드로 접근한다.

 

 

인스턴스(Instance)

---

위에서 우리는 class instance를 생성했다.

 

인스턴스(instance)는 class를 통해 생성된 객체이다.

인스턴스는 class의 property 이름과 method를 갖는 객체이다.

 

인스턴스마다 모두 다른 property값을 갖고 있다.

 

const morning = new Car('Morning', 20000000);

 

 

• 인스턴스는 Class 이름에 new를 붙여서 생성한다.

• 클래스 이름 우측에 () 괄호를 열고 닫고, 내부에는 constructor에서 필요한 정보를 인자로 넘겨줍니다.

• Car클래스의 instance를 morning이라는 변수에 저장했다.

• 다시 한 번! Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요합니다. new키워드는 constructor() 메서드를 호출하고 새로운 instance를 return해줍니다.

• 'Morning'이라는 String과 2000000이라는 Number를 Car 생성자에 넘겨주었고, name, price 프로퍼티에 각자의 값이 할당되었습니다.

 

 

새로운 차를 등록해보자

 

const spaceship = new Car('우주선', 25000000);
console.log(spaceship);
/*
Car {
  name: '우주선',
  price: 25000000,
  department: '선릉지점',
  salesAmount: 0 }
*/

console.log(spaceship.name);  // 우주선
console.log(spaceship.price);   // 25000000
console.log(spaceship.applyDiscount(0.5));  // 12500000

 

 

 

메서드(Method)

---

메서드는 함수이다.

그런데 객체가 프로퍼티 값으로 갖고 있는 것을 메서드라고 부른다.

 

Class의 method는 Object(객체)의 문법과 똑같다.

다만 객체는 프로퍼티마다 comma(,)로 구분해줘야 했지만, 클래스는 그렇지 않다.

 

 

아래는 Car객체에 changeDepartment메서드를 추가한 것이다.

 

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
    this.department = "선릉지점";
  }

  applyDiscount(discount) {  
    return this.price * discount;   
  }

  changeDepartment(departmentName) {
    this.department = departmentName;
  }
}

 

 

 

출처: 위코드(wecode)