개발.코딩

자바스크립트 javascript 프로토타입 prototype

스마트스타일 2021. 7. 20. 01:33
반응형

자바스크립트 javascript 프로토타입 prototype

프로토타입은 너무 어려워서 자료를 많이 찾아봐도, 온전하게 이해가 안되고 있습니다. 심지어 무엇을 말하고 있는지, 무엇을 알고 무엇을 모르는지 조차도 이해가 잘안됩니다. 그래서 이글은 다소 정확하지 않을 확률이 있습니다. 다만 최대한 이해를 돕기 위해 글쓴이가 다시 찾아보기 위핸 기록용 블로그 임을 밝히며 참고해서 읽기바랍니다.

 

프로토타입 mdn에서 설명하면 기본 예시를 들어보겠습니다.

function Person(first, last, age, gender, interests) {

  // 속성과 메소드 정의
  this.first = first;
  this.last = last;
//...
}

이것을 함수명대로 Person함수라고 하겠습니다. 

 

여기서 중요한 개념이, <Person함수>를 생성함과 동시에 내부적인 작동으로 자동적으로 새로운 객체를 만들어 냅니다. 이렇게 자동적으로 만들어낸 객체는 <Person프로토타입객체> 라는 녀석인데, 이녀석을 별도로 만들어 버립니다.

 

그럼 현재 만든것은 1개이지만, 총 2개가 만들어진 것입니다.

 

현재 만들어진것

(1)Person함수와 (2)Person프로토타입객체

 

(1)

Person 함수안에는

prototype 이라는것이 있다고 합니다.

 

(2)

Person프로토타입객체 안에는

constructor 라는 녀석이 있습니다.

 

(1)에 있는 Person.prototype는 Person프로토타입객체를 바라보고 있습니다.

 

그래서 (1)Person.prototype을 찍어보면 이렇게 나옵니다.

Person.prototype는 곧 Person프로토타입객체 입니다.

 

(2)에 있는 constructor는 Person함수를 바라보고 있습니다.

그래서 (2)에 있는 프로토타입객체라는 녀석(Person.prototype)의 constructor를 찍어보겠습니다.

Person.prototype.constructor를 찍어보면 

Person.prototype.constructor===Person함수 그자체가 나옵니다.

찍어보면 

이렇게 일치함을 알 수 있습니다. 이 상태에서 Person함수를 이용하여 인스턴스(사례)를 만들어 보겠습니다.

var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);

person1객체를 Person속성을 상속받아 생성하였습니다. 

 

방금 만든것

(3)person1 인스턴스 객체

 

(3)

person1 인스턴스객체가 생성되면

__proto__라는 속성이 자동으로 생성됩니다.

 

__proto__는 해당객체가 어떤 프로토타입객체를 이용해서 만들어졌는지 알려주는 녀석입니다. 

person1객체는 Person함수를 이용하여 생성되었잖아요? 그래서 person1의 __proto__는 Person프로토타입객체를 바라보고 있습니다.

같다는 것을 알 수 있습니다. 

 

결론

 오늘 작성한 글은 이해가 없는 상태에서 보시면 거의 이해가 안되실것 같습니다. 어느정도 익숙은 해진상태에서 보셔야 조금은 이해에 도움되지 않을까 생각해봅니다. 아마 프로토타입은 사용할때 그때그때마다 개념을 다시 또 보고, 안쓰면 잊어먹고, 쓸때 찾아보고, 안쓰면 잊어먹고 계속 반복하게 될 것 같습니다. 이해에 도움되길 바랍니다.

 

 

 

 

 

 

반응형