[TIL] CLASS

객체지향언어 이해가 어려워 class를 좀 더 자세히 공부하고 정리해보게 되었다.

Constructor

class와 object 구문은 비슷하지만 class에는 constructor method가 존재한다는 차이점이 있다.

class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  }
}

class name은 대문자로 시작하는 것이 관례적이다
JS에서는 Dog 클래스의 새 인스턴스를 만들 때마다 constructor() 메서드를 호출한다.
constructor() 메서드 내에서는 this 키워드를 사용하는데, this는 해당 클래스의 인스턴스를 나타낸다.
Dog 클래스에서 this를 사용하여 Dog 인스턴스의 name 속성 값을 name 인수로 설정한다.

Instance

인스턴스는 클래스의 속성인 name과 method를 포함하지만 고유한 속성 값을 가진 객체이다.

class Dog {
  constructor(name) {
    this.name = name;
    this.behavior = 0;
  } 
}
 
const halley = new Dog('Halley'); // Create new Dog instance
console.log(halley.name); // Log the name value saved to halley
// Output: 'Halley'

• halley라는 새 변수를 만들고 new 키워드를 사용하여 Dog 클래스의 새 instance를 생성한다.
• new 키워드는 constructor() 메서드를 호출하며, 그 내부의 정세비 파주 코드를 실행한 다음 새 instance를 return한다.
• 'Halley'를 Dog constructor에 전달하여 name 속성을 'Halley'로 설정한다
• 그 후 console에 변수 halley의 name을 호출한다.

Method (getter, setter)

class의 getter 구문은 메소드 사이에 쉼표를 넣지 않는다는 점을 빼고는 object getter와 동일하다

class Dog {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }
 
  get name() {
    return this._name;
  }
 
  get behavior() {
    return this._behavior;
  }
 
  incrementBehavior() {
    this._behavior++;
  }
}

const halley = new Dog('Halley');

name과 behavior에 getter메서드를 추가하였다.
이 때 속성이름 앞에 꼭 _ 를 붙여 직접 액세스되는 것을 방지한다.
그 후 incrementBehavior() 메서드를 추가하여 Dog 인스턴스에서 .incrementBehavior()를 호출하면 _behavior 속성에 1이 추가된다.

새로운 메서드를 사용해서 Dog 인스턴스의 데이터에 접근하고 조작해보자!
위의 예에서 Dog 클래스를 만든 다음 halley라는 변수에 인스턴트를 생성했다.
인스턴스에서 메서드 및 getter를 호출하는 방법은 객체에서 호출한 것과 동일하다
인스턴스에 .을 추가한 다음 속성 또는 메서드 이름을 추가하며, 메서드의 경우 ()를 함께 작성한다.

console.log(halley.behavior); // 0
halley.incrementBehavior();
console.log(halley.behavior) // 1
let nikko = new Dog('Nikko'); // Create dog named Nikko
nikko.incrementBehavior(); // Add 1 to nikko instance's behavior
let bradford = new Dog('Bradford'); // Create dog name Bradford
console.log(nikko.behavior); // Logs 1 to the console
console.log(bradford.behavior); // Logs 0 to the console