[JavaScript] 객체와 프로토타입

오늘은 자바스크립트 객체와 프로토타입에 대해서 이야기 해볼까 합니다.

객체

자바스크립트에서의 객체는 프로퍼티와 값 쌍의 조합으로 이루어집니다. 각각의 프로퍼티에는 어떠한 값이든 할당될 수 있고 객체나 배열 함수 또한 가능합니다.

객체를 생성해봅시다.

    // ES6+에서의 객체리터럴 방식으로 객체생성
    const obj1 = {
      name:'john',
      getName() {
        return this.name
      },
      setName(name) {
        this.name = name
      }
    };

    // 생성자 함수 방식으로 객체 생성
    function ObjConFn (name) {
      this.name = name;
      this.getName = () => this.name;
      this.setName = (name) => {this.name = name};
    }

    // 새로운 객체 생성
    const obj2 = new ObjConFn("john");

    // 두가지 방식의 차이
    console.dir(obj1);
    console.dir(obj2);

위의 예제 소스를 보시면 두가지 방식으로 객체를 생성 하였습니다.

console 로그를 보시면

두가지 방식의 차이

테스트를 좀 해보면

둘다 잘동작한다

둘다 잘 동작하는 걸 확인 할 수 있습니다.

마지막으로 class 방식으로 객체를 생성 해 봅시다.

    // class를 이용하여 생성
    // ES6+ 에서 추가된 문법. 생성자함수를 따로 지정한다.
    class ObjConClass {
      constructor(name) {
        this.name = name;
      }

      getName() {
        return this.name;
      }
      setName(name) {
        this.name = name;
      }
    }

    // class 방식으로 생성
    const obj3 = new ObjConClass("john");
    console.dir(obj3);

위와 같이 생성합니다.

마지막 클래스 방식으로 생성한 것도 로그를 확인해 봅시다.

생성자가 클래스로 되어있다

차이점은 컨스트럭터가 다르다는 점이고, 나머지는 테스트 해봅시다.

역시 잘됩니다.

여러가지 객체 생성방식이 있지만 모두 잘 동작하는걸 확인했습니다.

본인이 맞는 방법으로 사용하면 될거 같습니다.

프로토타입

자바나 C계열에서 상속이란 개념이 있습니다.부모의 프로퍼티와 메소드를 상속받아 확장 할 수 있습니다.

마찬가지로 자바스크립트 또한 프로토타입 체이닝을 통해 상위 프로토타입의 메소드와 프로퍼티를 사용할 수 있습니다.

위의 예제들을 보면 콘솔에 __proto__ 라는 프로퍼티가 있는데 이것은 프로토타입을 가리키는 것으로 최종 종착지는 object 객체를 가리키게 됩니다.

위에서 테스트한 객체들로 프로토타입 체이닝을 테스트 해봅시다.

    console.log(obj1.hasOwnProperty('name')); // true
    console.log(obj2.hasOwnProperty('name')); // true
    console.log(obj3.hasOwnProperty('name')); // true

위와 같은 결과가 나오는 이유는 object 프로토타입 객체에 hasOwnProperty 메소드를 가지고 있고 모든 객체의 프로토타입은 object 객체를 가리키므로 현재 객체에 없는 메소드가 호출될경우 상위 프로토타입 객체의 메소드를 찾아서 실행 하게 됩니다.

이러한 자바스크립트의 특징은 프로토타입을 통한 상속의 개념을 구현할 수 있게 해줍니다.

프로토타입은 동적으로도 할당될 수 있습니다.

    // 생성자 함수 방식으로 객체 생성
    function ObjConFn2 (name) {
      this.name = name;
      this.getName = () => this.name;
      this.setName = (name) => {this.name = name};
    }

    ObjConFn2.prototype.goodBye = () => console.log('GOOD BYE~');

    // 새로운 객체 생성
    const obj4 = new ObjConFn2("john");

생성자 함수 방식으로 객체생성 예제에서 함수에 프로토타입을 추가 하였습니다.

obj4에는 없지만 프로토타입에는 있다

동적으로 추가한 프로토타입이 정상적으로 잘 동작하는 걸 확인 할 수 있습니다. 

오늘은 간단히 객체와 프로토타입에 대해서 설명해 보았습니다.