인스턴스와 클래스

인스턴스(Instance)

• 객체 지향 개발은 밑그림을 그리고 그를 바탕으로한 객체를 만들어 사용한다고 했다.
• 여기서 밑그림은 클래스(class), 그를 바탕으로한 객체를 인스턴스(instance) 라고 한다.
• 즉 인스턴스란, 클래스 함수를 통해 만들어진 객체를 전달받는 변수를 의미한다.
• 인스턴스를 선언하기 위해서는 변수 선언 한 뒤에 new 키워드를 사용하여 class 함수에 인자를 넣어 할당해주어야 한다.

let newInstance = new NewClass(인자)

• 여기서 작성된 인자는 class 함수 내부에서 생성자 함수(constructor)의 규칙에 따라 인스턴스에 객체로 변환되어 전달된다.

클래스(Class)

• 객체를 만들기 위한 밑그림을 작성한다.
• new 함수에 작성된 인자는 class 내부의 규칙에 따라 객체가 되고, 인스턴스가 해당 객체를 가진다.
• 객체로 전달되기 위한 규칙은 생성자 함수(constructor)의 내부에 작성되며, 아래와 같이 사용한다.

class SomeClass {
	constructor(매개변수){
    // 규칙
  }
}

• 함수로 클래스를 정의하는 방법과 class 키워드를 사용하여 정의하는 방법이 있다.
  → 최근에는 class 키워드가 많이 사용됨.(ES6)
• 클래스 내부에 함수를 추가하여 메소드로 사용 할 수 있다.

// class 문법(ES6), 이걸 자주씁니다.

class SomeClass {
	constructor(a, b, c){
    this.a = a
    this.b = b
    this.c = c
  }
  someFn(){console.log('hi!')}
}
// 받은 인자들을 어떻게 인스턴스에 전달할지에 대한 밑그림

let el = new SomeClass(1, 2, 3)
el.someFn() // 'hi!'
// {a : 1, b : 2, c : 3}
// class의 규칙에 따라 객체가 반환된

// 함수로 class 만들기(ES5)

function SomeClass (a, b, c) {
  this.a = a
  this.b = b
  this.c = c
}

SomeClass.prototype.someFn = function (){
  console.log('hi!')
}

let el = new SomeClass(1, 2, 3)
el.someFn() // 'hi!'

• this는 항상 바인딩하는 요소가 조건에 따라 변하지만, class에서 this 는 자신이 소속된 인스턴스 객체를 이야기한다.
• 즉, 위의 예제에서 el 이 this 가 되고, el.a 가 매개변수 a 자리에 들어온 값을 값으로 가지게 된다.
  → 생성자 함수 내부의 내용이 객체의 데이터 추가 방식과 같다
• 위에서 prototype은 원형객체를 뜻하며, 같은 prototype 을 공유하는 하위 클래스에 데이터를 상속 시킬 수 있다.

---

+

• 정리하자면,
  1. class 함수를 정의하고,
  2. class 함수 내부의 생성자 함수를 통해 어떤 방식으로 인스턴스에 객체를 전달할지 결정한다.
  3. 인스턴스가 될 변수를 선언하여,
  4. new 키워드를 통해 class 함수를 할당하고,
  5. 해당 함수에 원하는 데이터(인자)를 작성하면,
  6. 인자의 값이 class 함수 내부 생성자 함수의 매개변수로 전달되어
  7. 작성된 규칙을 통해 만들어진 객체가 인스턴스로 반환된다.
  8. 그리하여 인스턴스는 객체를 가지게 되었땅.