프론트엔드/자바스크립트

프로토타입 (Prototype)

테오구 2022. 4. 24. 11:57
728x90

자바스크립트에서 정말 헷갈리는 개념으로, 자바스크립트를 다루는데 있어서 굉장히 중요한 역할을 하기 때문에 반드시 이해하여야 한다.

정의

자바스크립트의 모든 객체는 자신의 "원형(Prototype)" 이 되는 객체를 가지며 이를 프로토타입이라고 한다. 보이지 않는 속성인 [[Prototype]] 이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있으나 이는 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야 한다.

.prototype과 [[Prototype]]

프로토타입이 헷갈리는 이유는 그 명명법과 연결방식에 있는데, 모든 객체는 은닉 속성인 [[Prototype]] 을 갖는데 특별히 함수 객체 는 접근할 수 있는 속성인 prototype 을 갖는다.

  • [[Prototype]] : 자신의 프로토타입 객체를 참조하는 속성이다.
  • .prototype : new 연산자로 자신을 생성자 함수로 사용한 경우, 그걸로 만들어진 새로운 객체의 [[Prototype]] 이 참조하는 값이다.
function Func() {}
var a = new Func();

프로토타입 체인

어떤 객체의 프로퍼티를 참조하거나 값을 할당할 때 해당 객체에 프로퍼티가 없을 경우, 그 객체의 프로토타입 객체를 연쇄적으로 보면서 프로퍼티를 찾는 방식  을 프로토타입 체인이라고 한다. 단, 참조할 때와 값을 할당할 때의 메커니즘이 다르니 기억해두어야 한다.

728x90

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

이벤트 위임  (0) 2022.05.24
데이터 타입  (0) 2022.04.28
이터레이션(이터러블)  (0) 2022.04.20
제너레이터  (0) 2022.04.20
이터러블  (0) 2022.04.04