Classes

 

1. Class 정의

 

클래스는 개발자가 유사한 개체를 빠르게 생성하는 데 사용하는 도구

 

이름이 Halley 인 한 강아지의 객체를 정의 했을 때

let halley = {
  _name: 'Halley',
  _behavior: 0,

  get name() {
    return this._name;
  },

  get behavior() {
    return this._behavior;
  },

  incrementBehavior() {
    this._behavior++;
  }
}

 

하지만 이런 강아지가 100마리라면? 

또는 강아지가 아닌 고양이도 넣고싶다면? 

해당 코드 *100 반복해야함. 

 

반복은 코딩에서 제일 싫어하는 것!! 

 

하나 바꾸려면 100번 수정해야함 ㅠㅠ 

 

그래서 class 사용해서 

반복을 줄이고 디버깅을 줄이는 것!

 

---

 

2. Constructor

 

클래스와 객체 구문 사이에 유사점을 볼 수 있지만이를 구별하는 중요한 방법이 있습니다. 

constructor(생성자) 메서드 라고합니다 . 

JavaScript 는 클래스 constructor()의 새 instance 를 만들 때마다 메서드를 호출합니다 .

 

 

 

---

 

3. Instance

 

인스턴스는 고유 한 속성 값, 속성 이름과 클래스의 메서드를 포함하는 객체

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'

 

Dog클래스 아래 에서 new키워드를 사용하여 Dog클래스 의 인스턴스를 만듭니다 

 

1. 클래스 dog의 인스턴스를 저장할 새 변수 halley 를 만듭니다 .
2. 이 new키워드를 사용하여 Dog클래스 의 새 인스턴스를 생성합니다 .

new 키워드는 constructor()호출 , 그 안에 코드를 실행 한 다음 새 인스턴스를 반환합니다.
3. name속성을 로 설정하는 Dog 생성자에 'Halley'문자열을 전달합니다 .
4. 마지막으로, 콘솔에 기록 하는 객체 의 name키에 저장된 값 halley을 기록 'Halley'합니다.

 

---

4. Methods

 

클래스 메소드와 getter 구문은 메소드 사이에 쉼표를 포함 할 수 없다는 점을 제외하고 는 객체의 경우 와 동일 합니다.

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

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }

  incrementBehavior() {
    this._behavior++;
  }
}

 

---

4-1. Method Calls

 

인스턴스에서 메서드 및 getter를 호출하는 구문은 객체에서 호출하는 것과 동일합니다.

인스턴스에 마침표를 추가 한 다음 속성 또는 메서드 이름을 추가합니다. 

메서드의 경우 여는 괄호와 닫는 괄호도 포함해야합니다.

 

 

두 개의 Dog인스턴스 를 만들고 .incrementBehavior()그중 하나에서 메서드를 호출 해 보겠습니다.

 

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

 

---

 

5. Inheritance 

 

 

 

우리 강아지 탁아소가 너무 성공적이어서 사업을 확장하고 고양이 탁아소를 열기로 결정했다고 상상해보십시오

. 탁아소가 열리기 전에 Cat빠르게 Cat인스턴스를 생성 할 수 있도록 클래스 를 만들어야 합니다.

 Cat클래스 ( name, behavior)의 속성이 Dog클래스 의 속성과 비슷하다는 것을 알고 있지만,

물론 고양이는 개가 아니기 때문에 약간의 차이가있을 것입니다.

 

여러 클래스가 속성 또는 메서드를 공유하면 상속 대상이됩니다. 

개발자가 작성해야하는 코드의 양을 줄이기 위해 사용하는 도구입니다.

 

상속을 사용하면 여러 하위 클래스 ( 하위 클래스라고도 함)가 공유 하는 속성 및 메서드를 사용하여 상위 클래스 (수퍼 클래스라고도 함)를 만들 수 있습니다 . 

자식 클래스는 부모 클래스의 속성과 메서드를 상속합니다.

 

 

 

---

 

Cat와 Dog클래스 의 공유 속성과 메서드를 Animal(아래 참조) 라는 부모 클래스로 추상화했습니다 .

 

class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }

  incrementBehavior() {
    this._behavior++;
  }
} 

 

 

class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this._usesLitter = usesLitter;
  }
}

예에서는 클래스 Animal를 확장 하는 새 클래스 Cat를 만듭니다

 

 

 새 키워드 extends및 super.

 

extends클래스 선언 을 호출하면 모든 부모 메서드를 자식 클래스에서 사용할 수 있습니다.

 

1. extends키워드는 고양이 클래스 내부의 동물 클래스의 방법을 사용할 수 있습니다.
2. 새 Cat개체 를 만들 때 호출되는 생성자 는 두 개의 인수 name및 usesLitter.
3. super키워드는 부모 클래스의 생성자를 호출합니다.

이 경우 클래스 super(name)의 이름 인수를 Cat클래스의 생성자에 전달합니다 Animal.

4. Animal생성자가 실행 되면 this._name = name;새 Cat인스턴스에 대해 설정 됩니다 .
5. _usesLitterCat클래스에 고유 한 새 속성 이므로 Cat생성자 에서 설정합니다 .

 

super의 첫 번째 줄에서 constructor() 호출 한 다음 usesLitter두 번째 줄 에서 속성 을 설정합니다 . 

constructor()에서는this  키워드를 사용하기 전에 항상 super메서드를 호출해야합니다. 

그렇지 않으면 (this 를 먼저 사용) JavaScript에서 참조 오류가 발생합니다. 

참조 오류를 방지하려면 super하위 클래스 생성자의 첫 번째 줄 에서 호출하는 것이 가장 좋습니다 .

 

---

6. Static Methods

 

때로는 개별 인스턴스에서 사용할 수 없지만 클래스에서 직접 호출 할 수있는 메서드가 클래스에 포함되기를 원할 것입니다.

 

static키워드를 사용하여 클래스 Animal 에서 generateName 라는 정적 메서드method를 만드는 방법을 살펴 보겠습니다 

class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }

  static generateName() {
    const names = ['Angel', 'Spike', 'Buffy', 'Willow', 'Tara'];
    const randomNumber = Math.floor(Math.random()*5);
    return names[randomNumber];
  }
} 

 

정적 메서드는 클래스에서 호출되지만 클래스의 인스턴스에서는 호출되지 않습니다

const tyson = new Animal('Tyson'); 
tyson.generateName(); // TypeError