[JS] Constructor 메서드와 prototype 메서드의 차이

※ 멋쟁이사자 강의, 코어 자바스크립트 책, 자바스크리브 deep dive 정리 블로그 등을 참고해 수업예제에서
   생성자함수, prototype, this 관련 부분을 이해한 내용을 기록하기위한 포스팅입니다
   개인적인 이해를 기록하기 때문에 정확하지 않을 수 있으니 잘못된 부분이 있으면 지적해 주세요 

 

생성자 (Constructor)

프로그래밍적으로 '생성자'는 구체적인 인스턴스를 만들기 위한 틀 입니다

해당 클래스의 공통 속성들이 미리 준비돼 있고 구체적인 인스턴스의 특징을 더해 개별 인스턴스를 만들 수있습니다

따라서 생성자는 생성자를 통해 생성된 객체에 같은 프로퍼티와 메서드를 공유할 수 있게 해준다는 것입니다
자바스크립트에서는 함수에 생성자로서 역활을 함께 부여했습니다

new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작하게 됩니다

그리고 어떤 함수가 생성자 함수로서 호출 된 경우 내부에서 this는 새로 만들 구체적인 인스턴스 자신이 됩니다

아래 코드는 생성자 함수의 동작방식 , 생성자 함수의 메서드와 prototype 메서드의 차이를 이해하기 위한 예제입니다

        let person1 = ['김앤장','010-0000-0000','경기도 안양시']
        let person2 = ['백종원','010-0000-0000','서울시 은평구']
        const myInfo = function(personInfo){
           // this = {} 빈 객체가 암시적으로 만들어짐, 이 객체에 프로퍼티와 메서드 추가
            this.name = personInfo[0];
            this.phoneNum = personInfo[1];
            this.address = personInfo[2];

            this.hello2 = function(){
                console.log(`hello - this ${this.name}`);
            }
            // return this; 적지않아도 default로 this를 반환함
        }

        let info = new myInfo(person1);
        let info2 = new myInfo(person2);

        myInfo.prototype.hello = function(){
            console.log(`hello - prototype ${this.name}`);
        }

1. 어떤 생성자 함수를 new 연산자와 함께 호출하면 (myInfo)
2. Constructor에서 정의된 내용을 바탕으로 새로운 인스턴스가 생성됩니다
     -  myInfo 에서 정의된 프로퍼티와 메서드를 가지고 있는 인스턴스 info , info2 생성
     -  Constructor 함수에서 암시적으로 return this 를 반환하고있고 this는 각각 info , info2 를 가리키고 있습니다
3. 이때 인스턴스에는 __proto__ or [[Prototype]] (둘 다 같음) 프로퍼티가 자동으로 부여되는데
   이 프로퍼티는 Constructor 의 prototype 의 프로퍼티를 참조합니다
   __proto__ [[prototype]] 이랑 prototype 프로퍼티는 다른점을 알아 두어야 합니다
   
   

https://poiemaweb.com/js-prototype

Prototype | PoiemaWeb

프로토타입 전체에 관한 내용은 따로 정리할 예정이지만 위 블로그가 너무 잘 정리되어 있어서 링크를 첨부합니다

위 예제에서 아래 결과가 이해 안가서 공부하고 포스팅을 작성하게 되었습니다.

 

info.hello2 === info2.hello2  // false   , 생성자 메서드

infohello2() === info2.hello2() // true , 생성자 메서드

info.hello === info2.hello // true , prototype 메서드

info.hello() === info2.hello() //true , prototype 메서드

 

괄호없이 함수를 부른다면 변수에 담긴 함수객체의 참조를 부른게 됩니다

info , info2 는 서로 다른 객체이므로 info객체의 hello2와 info2객체의 hello2 는 서로 다른 객체를 참조하고 있습니다

따라서 1번의 경우 false가 출력됩니다

info.hello2 = info2.hello2 로 참조값을 복사 해주고 info.hello2 === info2.hello2 를 재입력하면 true 가 뜨는 것도
확인 할 수 있습니다

괄호를 붙이고 함수를 부르면 함수를 실행한 결과값을 의미합니다

위 예제에서 hello2 함수안의 내용을 보면 return 값이 없으므로 console.log 내용을 출력하고 undefined를 반환하게
됩니다. 따라서 결과값이 서로 같으니 true 를 반환하게 되는 것이었습니다
return 'sdfasdf' 을 추가하고 typeof hello2 를 돌려주면 'string' 값이 반환되는 것도 확인 할 수 있습니다

 

위 예제에서 myInfo.prototype.hello() 으로 myInfo 생성자 함수의 prototype 프로퍼티에 hello 라는 메서드를 지정했습니다. instance의 __proto__ (예제에선 info, info2 가 되겠습니다) 생성자의 prototype 프로퍼티를 참조하기 때문에 
같은 객체를 바라보게 됩니다.

따라서 3번은 생성자 메서드와는 다르게 true 를 반환하게 되는 것 입니다

 

해당 예제에서 고민한 부분을 적어보았습니다
공부하면서 원시타입, 참조타입에서의 참조와 할당, 객체에 대한 얕은복사, 불변객체 만들기, 생성자 내에서의 this prototype 등을 이해하는데 도움이 되었습니다

참고한 링크들 입니다

https://ko.javascript.info/object-copy

참조에 의한 객체 복사

https://ko.javascript.info/constructor-new#ref-30

new 연산자와 생성자 함수

https://velog.io/@jakeseo_me/2019-04-01-1904-%EC%9E%91%EC%84%B1%EB%90%A8-2bjty7tuuf

자바스크립트 개발자라면 알아야 할 33가지 개념 #3 값(value) vs 참조(reference) (번역)