16-3. 자바스크립트 특징 / 자바스크립트 인스턴스, instanceof 연산자

인스턴스

• Instance

  • Class를 new 연산자로 생성한 것
  • ES5에는 클래스가 없죠?
    하지만 prototype에 연결된 것이 있으면 Class로 볼 수 있습니다.
    이것은 new 연산자로 생성하기 때문이죠.

• 인스턴스 목적

  • Class에 작성된 메소드 사용
    prototype에 연결된 프로퍼티로 인스턴스를 만들어서 메소드를 호출하겠다라는 것입니다.
  • 인스턴스마다 프로퍼티 값을 유지
    또한 인스턴스마다 프로퍼티 값을 유지하겠다라는 겁니다.
    사실 이것이 더 큽니다.
  • 예 : 축구 경기에서 각 팀에 적용되는 규칙(메소드)은 같지만 팀마다 선수(프로퍼티 값)는 다르다.
    메시(프로퍼티 값)가 슛을했다(메소드).

new 연산자

• 인스턴스를 생성하여 반환

  • new Book(“JS책”); // ES5에서는 생성자 함수
  • 인스턴스를 생성하므로 Book()을 생성자 함수라고 부름
    즉, prototype에 있는 constructor를 호출하는 겁니다.
  • 코딩 관례로 첫 문자를 대문자로 작성

• 파라미터

  • 생성자 함수로 넘겨줄 값을 소괄호()에 작성

      var Book = function (point) {
          // this는 생성하는 인스턴스를 참조합니다.
          this.point = point;
      }
      Book.prototype.getPoint = function () {
          return this.point + 100;
      }
      var oneInstance = new Book(200);
      console.log(oneInstance.getPoint()); // 300
    

    1. new Book(200)으로 인스턴스 생성
       oneInstance가 인스턴스 이름
    2. 파라미터 값을 생성하는 인스턴스에 설정
    3. 따라서 인스턴스마다 고유의 값을 가질 수 있음
    4. oneInstance.getPoint() 형태로 prototype에 연결되 getPoint() 메소드 호출

    oneInstance에서 getPoint를 호출할 땐 prototype을 연결하지 않습니다.
    그럼 getPoint가 호출되고 getPoint의 this가 instance를 참조하므로 이미 할당되어있던 값 200을 불러와 100을 더해 반환하게 되고, 그 값을 출력하게 됩니다.

이와 같이 인스턴스를 생성하는 이유는 A라는 사람과 B라는 사람의 point가 다르겠죠?
C라는 사람도 마찬가지일 거고요.
point는 다르지만 getPoint하는 방법은 같습니다.
이것이 인스턴스를 생성하는 이유입니다.

instanceof

• 오브젝트로 생성한 인스턴스 여부 반환

  • instance instanceof object

      var Book = function (point) {
          this.point = point;
      }
      Book.prototype.getPoint = function () {
          return this.point + 100;
      }
      var oneInstance = new Book(200);
      // new 연산자로 만든 인스턴스니? 라고 물어보는 것
      console.log(oneInstance instanceof Book); // true
    

    1. new Book()으로 인스턴스 생성
    2. onInstance instanceof Book
    3. oneInstance가 Book()으로 생성한 인스턴스이므로 true 반환

    ---

  • instance 위치에 인스턴스 작성
  • object 위치에 비교 기준 오브젝트 작성

• instance가 object로 생성한 인스턴스이면 true, 아니면 false 반환