JavaScript - 객체의 속성과 메소드 (2)

 

기본 자료형의 일시적 승급

 

원래 기본 자료형은 속성과 메소드를 가질 수 없다. 그렇다면 문자열.length, 문자열.anchor(), bold() 같은 것들은 무엇일까?

 

자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 (기본 자료형 뒤에 온점을 찍고 무언가 하려고 하면) 일시적으로 기본 자료형을 객체로 승급시킨다. 그래서 속성과 메소드를 사용할 수 있다.

 

단, 이런 승급은 일시적인 것이기 때문에 sample 속성에 기본 자료형이 추가되는 것처럼 보였지만, 실제로는 추가되지 않는 현상이 발생한다.

 

 

즉, d.sample = 10 을 입력할 때에는 일시적으로 객체로 승급되어 sample 속성을 추가할 수 있었지만, 일시적으로 승급된 것이기 때문에 다시 d.sample을 불러오면 이미 sample 속성이 사라져있는 것이다.

 

따라서 기본 자료형은 속성과 메소드를 사용할 수는 있지만, 추가로 가질 수는 없다.

 

 

프로토타입으로 메소드 추가

숫자 객체 전체에 어떤 속성과 메소드를 추가할 수 있다면 기본 자료형 숫자도 속성과 메소드를 사용할 수 있다.

 

프로토타입(Prototype) 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있다.

 

프로토타입

• 프로토타입은 상속 메커니즘이다.
  • 자바스크립트에서 객체들이 서로 기능을 공유하고 상속받을 수 있게 해주는 핵심적인 방법이다.
• [[Prototype]] (숨겨진 프로퍼티(속성))
  • 자바스크립트의 모든 객체(null 제외)는 숨겨진 내부 프로퍼티 [[Prototype]]을 가지고 있다.
  • 이 프로퍼티는 객체가 다른 객체를 참조하도록 연결한다. 이 참조되는 객체가 프로토타입 객체이다.
  • __proto__ ( Object.getPrototypeOf() )를 통해 이 프로퍼티에 접근할 수 있다.
• 프로토타입 체인
  • 객체에 없는 속성이나 메소드를 찾을 때, 자바스크립트 엔진은 먼저 해당 객체의 [[Prototype]] 이 가리키는 프로토타입 객체를 확인한다.
  • 프로토타입 객체에도 해당 속성이나 메소드가 없다면, 해당 프로토타입 객체의 [[Prototype]] 을 따라 계속해서 탐색한다. 이 연결된 프로토타입 객체들의 연결을 프로토타입 체인이라 한다.
  • 체인의 끝은 null이다. (null 의 [[Prototype]]은 undifined)
• prototype 프로퍼티 (함수 객체만 해당)
  • 모든 함수 객체는 prototype 이라는 특별한 프로퍼티를 가진다.
  • 이 prototype은 객체이며, 생성자 함수(new 키워드로 객체를 생성하는 함수)를 통해 생성된 객체들의 프로토타입 객체가 된다.

  • function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    
    Person.prototype.greet = function() {
        console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
    };
    
    const person1 = new Person("Alice", 30);
    const person2 = new Person("Bob", 25);
    
    person1.greet();  // "안녕하세요, 제 이름은 Alice입니다."
    person2.greet();  // "안녕하세요, 제 이름은 Bob입니다."
    console.log(person1.__proto__ === Person.prototype);  // true
    console.log(person2.__proto__ === Person.prototype);  // true

  • Person 이라는 생성자 함수의 Person.prototype은 new Person()으로 생성된 객체들의 프로토타입 객체가 된다.
  • Person.prototype에 정의된 greet 메소드와 같은 속성이나 메소드는, new Person()으로 생성된 모든 인스턴스 객체(person1, person2)에서 공유하고 사용할 수 있게 된다.
  • person1과 person2 는 Person.prototype 을 자신의 프로토타입 객체로 갖게 되며, 마치 person1과 person2 자신이 greet 메소드를 직접 가지고 있는 것처럼 사용할 수 있다.

 

키워드

• 상속 : 객체들이 기능을 공유하고 재사용하는 방법
• [[Prototype]] : 모든 객체가 가지는 숨겨진 프로퍼티, 프로토타입 객체 참조
• prototype :  함수 객체가 가지는 특별한 프로퍼티, 객체의 프로토타입으로 사용된다.
• 프로토타입 체인 : 프로토타입 객체들의 연결 고리
• 인스턴스 : 생성자 함수 또는 클래스를 통해 생성된 객체

 

프로토타입이 뭔지 알았으니 이제 프로토타입을 사용해서 어떻게 기본 자료형이 속성과 메소드를 사용할 수 있는지 예시를 봐보자.

 

사실 어느정도 자바스크립트를 해본 사람은 아래의 코드들을 몇 번씩들 사용해 봤을 것이다.

• Number : .toFixed(), .toString()
• String : .toUpperCase(), indexOf()

이것들이 Number와 String 생성자 함수의 프로토타입 프로퍼티에 해당 속성과 메소드가 정의되어있기 때문에 사용가능한 것이다. 즉, 프로토타입에 새로운 메소드를 추가해주면 해당 자료형들도 해당 메소드를 사용할 수 있게 된다.

 

 

예를 들어, Number 객체에 power() 라는 제곱을 하는 메소드를 추가하면 새로운 숫자형 객체들도 power() 메소드를 사용할 수 있게 된다.